La gestion du multi-screen par le “responsive design”

Le webdesign est entré dans une nouvelle ère, celle du multiscreen. Le sujet est identifié depuis plus de 10 ans, mais c’est seulement depuis peu que les concepteurs de sites web n’envisagent plus de créer un site sans réfléchir à son rendu sur smartphones et tablettes.

par Olivier Milcent (@omilcent), DG France et CMO de Momac

Dans le sillon du HTML5,  le responsive design est devenu l’un des termes les plus en vogue de l’industrie du web. Le concept est séduisant: permettre d’adapter automatiquement la mise en forme d’une page HTML selon la taille et la résolution du navigateur ou l’OS.

Cette transformation s’applique à la structure de la page, ses images, ses polices et tout autre élément de style, grâce à différentes techniques offertes par CSS3. Le responsive design est une réponse nouvelle aux problématiques de fragmentation des navigateurs, et remet en cause les méthodes traditionnelles de conception d’un site web ou mobiles.

Prenons l’exemple de l’excellent http://css-tricks.com

Faites le test en réduisant la largeur du navigateur, et voyez le résultat sur la mise en forme des menus et des éléments de la page.

Comment ça marche ?

Un site web doit aujourd’hui s’afficher pour des écrans variant entre 240px et 1920px. Un vrai défi pour les designers ! L’une des premières techniques est d’utiliser la technique de fluid grid permettant de rendre proportionnel tout élément de la page. Par exemple, au lieu de dimensionner une cellule de tableau à 200px, on lui attribuera 20% de la ligne du tableau. Il en va de même pour les polices que l’on définira en « ems » en non pas en pixels.

Ensuite, on utilisera la technique CSS des medias queries, qui depuis CSS3 permettent d’appliquer une feuille de style selon

• La hauteur ou la largeur d’un écran
• L’orientation de l’écran
• Le ratio LxH
• La résolution et le nombre de couleur

La combinaison de media queries et de différentes CSS permet donc d’afficher un rendu propre à chaque taille du navigateur. On peut donc, plus facilement qu’avant, concevoir une version web, tablette et smartphone, à partir d’un même noyau de site. La gestion des images est plus complexe. Il faudra faire en sorte que chaque image s’adapte facilement à la transformation de la page. Il faudra également prévoir plusieurs versions d’images afin de ne charger que celle qui correspond au besoin final.

Attention aux pièges

Pour beaucoup, le responsive design est le remède que l’on attendait tous pour gérer le rendu multiscreen sans technologie complèxe. Mais comme toute nouvelle approche technique, la période initiale d’émerveillement révèle progressivement des limites.

1. La méthode fonctionne partiellement sur certains terminaux (Android, Nokia, Windows Phones), voire pas du tout sur d’autres, notamment Blackberry. Au-delà de la simple comptabilité CSS3/mediaqueries, on peut avoir des surprises concernant le rendu des CSS et des javascripts selon le type de terminal
2. Une version mobile pourra générer des pages trop lourdes si on ne prend pas garde à éliminer totalement les éléments prévus pour le web, notamment les images. Arriver à charger uniquement le bon contenu par rapport au bon contexte est TRES compliqué (c’est le type de technologie qui mobilise par exemple 5 ingénieurs R&D à plein temps chez Momac…). Or le temps de chargement est la cause n°1 d’abandon sur mobile. (voir ce graphique sur les causes d’abandon d’un site mobile)
3. Soyez-prêts à passer beaucoup de temps à optimiser votre code, et à le maintenir. Plus on avance, plus la lisibilité de son code devient un enjeu
4. Au delà de ces considérations techniques, il faut également accepter l’idée que le responsive design n’est ni plus ni moins qu’une façon plus moderne de faire du « portage », c’est à dire de partir d’une version web et dégrader l’expérience utilisateur pour les terminaux mobiles.

Si l’envie vous vient de  concevoir votre prochain site en utilisant le responsive design, voici deux conseils qui pourront vous être utiles

• Adopter un design « mobile-first » : commencer par concevoir les interfaces mobiles, puis allez progressivement sur le rendu tablette, puis Web-PC. Cela vous permettra de poser plus efficacement les priorités ergonomiques, et optimisera votre code source
• Si vous le pouvez, mettez en place une architecture permettant une séparation totale du contenu et de la présentation, via des webservices et flux de contenus. Vous pourrez alors totalement optimiser l’expérience utilisateur selon le contexte, qui au-delà du terminal, peut revêtir d’autres aspects (location, type de réseau, profiling…).

Quelques beaux exemple de responsive design à voir sur http://mediaqueri.es