Design adaptatif, un design compatible mobile

[legolas]

Salut à tous,

Comme je sais que cela intéresse certains d'entre vous, et que d'autres font des études de multimédia, je vous livre mes reflexions à voix haute.
Je réfléchis depuis maintenant 2 mois à une version mobile de vefblog, déjà pour voir les blogs.
En même temps, en ce moment je lis beaucoup de hoses sur les technologies internet, et notamment, les framework de présentation. Du style, ceci : http://cssgrid.net/

Une version mobile a plusieurs différences avec une version desktop :

1/ le design qui doit être adapté ; pour le moment si je vais voir mon blog sur mon petit smartphone, je dois zoomer et suivre le texte, ce n'est pas pratique.
Les menus ne devraient pas être les mêmes sur un grand écran que sur un mobile,
etc

2/ la navigation et l'accès au contenu peuvent être adaptés et plus modernes, par exemple passer d'un article à l'autre en glissant le doigt sur l'écran avec l'article qu iglisse de droite à gauche ; autre exemple pour accéder aux articles suivants, au lieu de changer de page ou pourrait juste descendre la barre d'ascensur sur ordinateur, et glisser de bas en haut sur mobile. On peut faire en sorte que le navigateur retienne plus de choses d'une fois sur l'autre.

On voit que certains de ces changements ne concernent pas que la version mobile, mais peuvent moderniser l'experience de consultation sur tous les supports.

On voit aussi que les deux points sus cités peuvent être indépendants, à condition de commencer par le premier sur le design adapté.

J'envisage donc, en fin de compte et après reflexion, une progression en deux temps :

1/ Adapter le design d'un blog en fonction de la largeur de l'ecran ; on parle d'auto adaptation ou de design adaptatif (sur de rares sites il sufit de diminuer la fenetre pour s'en rendre compte, voir le lien plus haut).

Par exemple :

- On part du design actuel des blogs pour les grands ecrans;
- En dessous d'une certaine largeur, les largeurs personnalisées ne comptent plus et les cadres des articles rétrécissent pour adapter leur largeur; on impose une taille de caractères toujours lisibles,
- Encore plus petit, le menu disparait vers le bas pour laisser l'article sur tout la largeur de l"ecran ; les images et photos aparaissent pas plus grand que l'ecran elles aussi ; Certaines propriétés de personnalisation ne sont alors plus actives,
- Largeur de smarthpone : le menu est remplacé par une barre d'icones en bas (c'est un exemple)



2/ Plus tard, moderniser la navigation et l'accès au contenu :

- Le navigateur retient les articles déjà visités,
- Sur ecran tactile on passe d'un article à l'autre en glissant sur le côté,
- En passant d'un article à l'autre on a un animation des articles qui se remplacent l'un-l'autre,
- liste d'articles qui se complètent automatiquement en descendant vers le bas de la page,
- Utilisation généralisée d'ajax pour éviter le rechargement des pages,
- etc (ce sont des exemples)


L'intérêt, c'est que le premier point n'est pas difficile à faire ni très long, et peut se développer progressivement en partant de la situation présente.
Je pense que nous pourrons donc bientôt voir plus facilement les blogs sur toute taille d'écran. J'aurais besoin de vous pour conseil et essais divers ,bien sûr.

Le deuxième point sera plus long, mais fun à faire et à prévoir. Là aussi, vos idées seront les bienvenues. Ca peut se faire relativement progressivement pour certaines choses comme l'affichage des commentaires ; pour d'autres il faudra peut être franchir le pas automatiquement pour les mobiles, puis les version desktop ain d'arriver sur une seule et unique version.

Comme vous le voyez, j'envisage, non pas de prévoir UNE version mobile de vefblog, mais de le rendre plus moderne et adaptatif à tous les supports, en m'inspirant des technologies et bonnes pratiques actuelles du web.

[Micka Profil]

Que de bonnes idées. On retrouve cette manière de pratiquer maintenant sur la plupart des plateformes, c'est bien de nous y mettre.

Très intéressant le concept de design adaptatif, ça fait un petit moment que j'y pense.

En parlant du design et sans vouloir trop sortir du sujet, ne pourrais tu pas rendre possible de grandes images pour le fond des pages ? Que l'on puisse avoir un vrai background bien personnalisé, qui pourrait être centré et coïncider avec les articles par exemple ? Plutôt que d'avoir quelque chose de tout petit et de devoir jouer avec pour essayer d'avoir quelque chose de joli ?

[legolas]

Que de bonnes idées. On retrouve cette manière de pratiquer maintenant sur la plupart des plateformes, c'est bien de nous y mettre.

Justement, pas tant que cela je trouve. La plupart des sites sont très figés.

Il y a souvent une version mobile très séparée de la version bureau, sans place pour les écrans intermédiaires, et sans adaptation à la volée (visible en diminuant la taille de la fenetre)

[legolas]

Voici un premier essai sur mon blog d'essai :
http://legolas.vefblog.net/essai/

Essayez de redimensionner la fenetre (en largeur).
Comparez avec un autre blog.
Essayez avec votre smartphone ou votre tablette.
Essayez avec plusieurs navigateurs.

Je suis assez content pour le moment, sauf qu'il faut que je trouve une solution pour les menus (en faire des menus déroulants en bas ou en haut du blog ?)

D'autre part, j'ai du virer tous les hacks css pour internet explorer 6 et redéfinir quelques techniques pour les dimensions ; à vérifier maintenant que les blogs apparaissent ok sur les dernieres versions de IE (le bug des articles qui disparaissent vers le bas, risque de revenir).

[legolas]

Le design adaptatif est à l'essai sur le blog de vefblog.
J'ai déjà repéré une correction à apporter à la gestion du bandeau.

Essayez !

[Micka Profil]

Par contre le bandeau tout en haut qui demande à stocker des données sur notre ordinateur pour une utilisation hors connexion, c'est embêtant... Tu peux enlever ?

Ma vue de l'iPod Touch et de l'iPhone : http://uppix.net/d/8/7/e9ac17f044b2aaea ... a28088.png

Normal le petit espace avec l'article sur le côté droit ?

[legolas]

Par contre le bandeau tout en haut qui demande à stocker des données sur notre ordinateur pour une utilisation hors connexion, c'est embêtant... Tu peux enlever ?

Ma vue de l'iPod Touch et de l'iPhone : http://uppix.net/d/8/7/e9ac17f044b2aaea ... a28088.png

Normal le petit espace avec l'article sur le côté droit ?

Le petit espace, je crois savoir, je vais corriger.
Je pense aussi augmenter un peu la taille des caractères dans la version mobile, surtout pour les menus.
Le bandeau "utilisation hors connexion" est chiant, mais bien pratique pour les mobiles. Je vais me document un peu plus à son propos ; peut-etre ne le proposer que pour les navigateurs mobiles qui eux ne se plaignent pas ?

[legolas]

J'ai changé plein de petites choses, surtout dans la taille des caractères, afin que l'experience sur mobile soit plus sympa.
Je pense bientôt mettre en ligne ; il faudrait faire une bonne pub de ce nouveau design pour mobile, non ?

[Micka Profil]

Oui, c'est une nouveauté majeure sur Vefblog... Quoi comme pub?

[legolas]

Il faudrait le mettre en page d'accueil, voire même en page d'accueil pour les invités ; passer l'info sur facebook ; voire en profiter pour refaire des articles dans des sites des référencement ?

[legolas]

Le bandeau, quand il n'y a que une image, s'adapte maintenant à la largeur du mobile..

[Micka Profil]

ok, I do that asap !

[legolas]

Je viens de mettre en ligne le design auto adaptatif des blogs pour tous les blogs, sans l'annoncer. A priori, on attends la fin des vacances scolaires pour communiquer dessus, parce que là c'est un peu mort..
On verra s'il y a des bugs entre temps

Il y a juste le message sur firefox qui demande l'autorisation de stocker des données ; je n'ai pas d'alternatives pour le moment et c'est dommage de ne pas mettre en cache par le navigateur...

[Micka Profil]

C'est vrai que c'est embêtant ce message... ... ... ...

J'ai repéré un petit truc étrange, quand tu fais un zoom au maximum et que tu reviens en taille normale (ctrl+0), la moitié des menus disparaissent ?

[legolas]

C'est vrai que c'est embêtant ce message... ... ... ...

J'ai repéré un petit truc étrange, quand tu fais un zoom au maximum et que tu reviens en taille normale (ctrl+0), la moitié des menus disparaissent ?

J'ai supprimé le message de firefox, tant pis pour le cache pour le moment.

Je n'ai pas ton problème ; quel blog par exemple ? en partant d'une taille de mobile ou d'ecran normal ?