S’il existe de nombreuses définitions du Responsive Web Design (RWD), l’essentiel est d’en appréhender la philosophie basée sur la fluidité, l’adaptabilité des contenus et sa finalité. Choisir le Responsive Web Design, 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é.

Pourquoi choisir le Responsive Web Design ?

Réaliser des économies d'échelle dès la conception puis lors des opérations de maintenance et de mises à jour.

À partir d’un code HTML créé pour le RWD et d’un design basé sur les feuilles de style CSS, une interface peut rapidement être mise à jour en une fois pour tous les supports.

Bénéficier d’une plus large diffusion.

En effet, si une interface est visible sur plusieurs ou tous les supports disponibles, elle sera plus visitée. Aujourd’hui près d’un Français sur deux (47,5%) se connecte chaque mois à l’internet mobile. Cela représente 25,8 millions de mobinautes au 3ème trimestre 2013 soit 3,5 millions de plus qu’il y a un an (Source médiamétrie. novembre 2013).

Influencer positivement les critères de classement utilisés par les moteurs de recherche.
Une interface en Responsive Design permet pour un même contenu d’avoir une adresse URL unique accessible sur l’ensemble des supports. Le référencement naturel est ainsi optimisé.
 
Quelle méthodologie ?

Cette nouvelle approche du Web implique cependant une réflexion et un travail conjoint entre les concepteurs de contenus en amont et au moins 4 métiers différents en aval : ergonomes, webdesigners, intégrateurs et référenceurs.
Mobile First ?

Le RWD implique une anticipation tout au long de la conception. Le Mobile First est une méthode évolutive de conception qui consiste à construire une interface en commençant par la version mobile. Ainsi, l’interface est conçue pour ne proposer que l’essentiel. Dans un contexte de projet, le Mobile First est rarement appliqué car il est restrictif pour les créateurs de contenus et peine à s’inscrire dans de longs cycles de validations.

Cependant, lors des phases de création sur la version « bureau », qui est la plus riche, les différents concepteurs doivent garder en tête les contraintes imposées par les plus petits mobiles, dont la taille d’écran, la résolution et le débit de connexion sont les plus faibles. 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.

Ergonomie

«Penser en blocs de contenus, mais aussi tactile, parcours de navigation.»

Dans le cadre d’une création ou d’une refonte de l’interface en Responsive Design, l’ergonome doit adapter ses méthodes de travail et sa façon de concevoir les interfaces. Il est impératif de penser par « blocs de contenus ». Dans cette configuration, ils pourront se réorganiser automatiquement, selon les contraintes du terminal utilisé.

Au vu des tailles d’écrans de plus en plus larges, il est très commun de voir des interfaces construites sur 3 à 4 colonnes. Les constructions basées sur un système de colonnes paires sont à privilégier puisqu’elles sont plus maniables et adaptables.

Penser tactile. Concevoir une interface en RWD, c’est aussi anticiper sa transposition sur des supports tactiles. Sur tablette ou sur Smartphone, voir maintenant sur les PC. Il faut donc prêter attention à deux aspects, la zone des interactions et la taille des éléments cliquables. Pour améliorer l’expérience sur les versions tactiles, il est préférable de regrouper les informations, toujours sous forme de blocs.

Penser au clavier. Sur les interfaces tactiles, le clavier s’affiche sur l’écran, utilisant en moyenne 50% de la surface d’affichage. Toutes les interfaces ne sont pas concernées mais il n’en reste pas moins un point d’attention majeur.

Web Design

« Anticiper, retenir l’attention du visiteur en suscitant des émotions dès la conception graphique ».
À l'instar de la phase de création ergonomique, la phase de conception commence par la version bureau. Pour le Designer, cette méthode lui permet de travailler la version la plus dense et de valider ainsi le maximum d’éléments de l’interface.

Le Responsive Web Design doit garantir une identité cohérente quel que soit le support. Le choix graphique doit aller à l’essentiel et aucun artifice ne doit venir détourner la fonction de chaque élément. L’objectif est de réduire au maximum « le bruit visuel ». Un style graphique minimaliste, comme le flat design, semble clairement le mieux adapté à une démarche de création en RWD.

Le Webdesigner doit également penser à optimiser son graphisme en anticipant l’adaptation en feuille de style CSS. À partir de la conception en bloc de contenu héritée de la phase ergonomique, le design peut se créer de manière fixe, c’est-à-dire que les éléments restent les mêmes, seuls leurs emplacements changent. Il faut donc toujours avoir à l’esprit la vision globale des représentations de l’interface.

Homogénéité. Garder une homogénéité graphique sur l’ensemble des supports est primordiale pour que l’expérience de l’internaute reste efficace et simple.

Intégration

« Raisonner en familles de terminaux, déterminées par les points de rupture tout en évitant le piège des résolutions ».

Le Responsive Web Design impose à l’intégrateur de nombreuses et nouvelles spécificités : des contraintes de performance, des tests supplémentaires sur les projets centrés sur l’accessibilité, la gestion de toutes les tailles d’écrans et des types d’interfaces. Une phase de conception défaillante en amont peut avoir de lourdes conséquences sur les temps de développements.

Une interface unique pour de multiples appareils. Par définition, il n’est plus question de séparer 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. Ce sont donc les choix ergonomiques et éditoriaux qui dictent si un élément doit être affiché en fonction de la largeur de l’écran. Le RWD en intégration est essentiellement basé sur une technique CSS : les Media Queries. Elles 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 défis les plus difficiles à appréhender 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.

Référencement

«Anticiper la diversité des usages entre bureau, maison et mobilité. Il faut penser à la nature des requêtes qui seront réalisées via l’interface, penser géolocalisation et expérience utilisateur ».
 Comme pour tout type d’interface web ou mobile, il est important de prendre en compte le référencement dès la phase de conception. Cela est d’autant plus vrai pour les interfaces en Responsive Design qui doivent bénéficier d’une architecture ainsi que d’une navigation optimisées afin de répondre aux attentes des « interfaceurs » sur l’ensemble des supports.

Lors de la mise en ligne des interfaces développées en Responsive Design, la première interrogation des référenceurs a été de savoir comment les moteurs de recherche allaient réagir et comment ces interfaces allaient se positionner au sein des résultats de recherche. Les premiers retours ont été très encourageants et les référenceurs y ont vu pour certains une solution “miracle” à toutes les problématiques du référencement naturel.

Une interface en Responsive Design implique la prise en compte à la fois des attentes des internautes mais également de celles des mobinautes. Les études montrent qu’en situation de mobilité avec un petit format d’écran, les requêtes effectuées sur mobiles sont plus courtes que celles sur ordinateurs. Les requêtes géolocalisées vont également être plus fréquemment recherchées, idem pour certaines thématiques telles que “hôtel-restaurant”. Des échanges sont alors mis en place entre l’équipe de conception, l’équipe de réalisation et le référenceur afin d’optimiser la structure d’une interface. Par exemple, le type de recherches effectuées par les internautes et mobinautes ciblés aura une influence sur l’arborescence mise en place, comme pour le nommage des rubriques, des fichiers…
 
Des avantages et bénéfices multiples !

Au final, le Responsive Web Design semble bien constituer le nouveau Graal des stratégies Web, tout au moins le nouveau passage obligé pour être présent sur la toile de manière optimale et toucher tous les publics.

Cette approche, nécessairement pluridisciplinaire, est pourtant loin d’être évidente. Elle met à contribution de nombreuses expertises croisées. L’ergonome doit penser son interface sous forme de blocs et le designer doit utiliser au mieux les feuilles de style CSS. De son coté l’intégrateur doit relever le défi du chargement des pages tout en gérant les différents types d’affichage et enfin, le référenceur doit porter une attention particulière aux différents parcours de navigation en fonction des profils utilisateurs et des terminaux à leur disposition.

Mais le Responsive Design n’en est encore qu’à ses débuts, beaucoup de chemin reste encore à 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.

Liens utiles :

http://gridcalculator.dk  / http://guideguide.me (Sites d’aide pour les grilles de conception)
screensiz.es (Base de données et site de statistiques autour des écrans mobile, tablette et bureau)