Le responsive web design, nouveau graal des stratégies Web ?

Christelle Keller
Responsable de l’Agence interactive au sein du Groupe Jouve

Choisir le responsive web design (RWD), c’est repenser la manière de concevoir les parcours de navigation et créer une interface unique dont le design s’adapte automatiquement à la bonne dimension de l’écran de lecture quel que soit le terminal utilisé. Il permet de réaliser des économies dès la conception, de bénéficier d’une plus large diffusion et d’influencer positivement les critères de classement utilisés par les moteurs de recherche. Cette nouvelle approche nécessite un travail conjoint entre les concepteurs de contenus, les ergonomes, les webdesigners, les intégrateurs et les référenceurs. En conception, si la méthode du Mobile first est rarement appliquée car restrictive, il faut à chaque instant conserver l’interface mobile en tête : Mobile in mind ! C’est la règle du plus petit dénominateur commun.

L’ergonome doit adapter sa façon de concevoir les interfaces et penser par « blocs de contenus ». Les constructions basées sur un système de colonnes paires sont à privilégier puisqu’elles sont plus maniables et adaptables. Il faut aussi anticiper la transposition d’une interface sur des supports tactiles (tablette, smartphone, PC) et prêter attention à deux aspects : la zone des interactions et la taille des éléments cliquables. Sur les interfaces tactiles, le clavier s’affiche sur l’écran, utilisant en moyenne 50 % de la surface, c’est un des points d’attention majeur.

Le webdesigner doit, lui, garantir une identité cohérente quel que soit le support. Le graphisme doit aller à l’essentiel ! Le style graphique minimaliste, ou flat design, semble ainsi le mieux adapté au RWD. L’objectif est de réduire au maximum « le bruit visuel ». Garder une homogénéité graphique sur l’ensemble des supports est primordial pour que l’expérience de l’internaute reste efficace et simple.

Le RWD impose à l’intégrateur de nouvelles spécificités : contraintes de performance, tests supplémentaires sur les projets centrés sur l’accessibilité, gestion de toutes les tailles d’écrans et des types d’interfaces. Une phase de conception défaillante peut avoir de lourdes conséquences sur les temps de développements. Il lui faudra raisonner en familles de terminaux et éviter le piège des résolutions.

Une interface unique pour de multiples appareils
On ne sépare plus la version mobile de la version classique. En effet, quel que soit l’appareil de consultation, les interfaces en RWD possèdent la même structure HTML. Le RWD en intégration est essentiellement basé sur une technique CSS, les Media Queries, qui détectent la largeur de l’écran, puis permettent d’appliquer des modifications de mise en page.

La résolution « HD » des mobiles modernes est l’un des plus grands défis car les images de résolution standard ne profiteront pas de la qualité de l’écran et leur rendu ne sera pas net. La technique consiste donc à doubler la taille des images et à les afficher dans le même espace que celui du visuel standard. Un problème subsiste encore : des images deux fois plus lourdes sont diffusées sur le réseau mobile. Dans ce contexte, il est opportun de se demander si le confort visuel est prioritaire par rapport à un accès rapide au contenu. Il n’y a pas de réponse universelle, c’est une problématique relative aux objectifs de chaque projet.

Si le RWD semble désormais un passage obligé pour être présent sur la Toile de manière optimale, il n’en est encore qu’à ses débuts. Beaucoup de chemin reste à parcourir, à inventer, à remettre en cause, à nuancer. Parallèlement, les usages et les comportements des utilisateurs évoluent toujours plus vite. Pour faire face à cet écosystème en perpétuelle mutation, il est capital de veiller à ce que chaque interface développée en RWD continue d’offrir une expérience unique, moderne et satisfaisante pour tous et sur tous les supports.