Décryptage : Responsive Web Design, une tendance de fond ?

Le Responsive web design ou web design adaptatif est la tendance du moment en ergonomie multi-écrans. Et les sites web fondés sur ce principe commencent à se multiplier. Décryptage d’une approche que les entreprises ne peuvent plus ignorer.

Alors que certaines marques ont choisi de réaliser des versions dédiées mobiles en développant leur application iPhone, Androïd ou bien iPad, d’autres se lancent dans l’aventure du responsive web design. Pourquoi ?

Avec la révolution des usages Internet, les utilisateurs sont de plus en nombreux à se connecter depuis leur mobile et le nombre de tablettes explose. La nécessité pour une entreprise d’être présente sur tous les écrans s’intensifie. Une présence multi-écrans (ordinateur, mobile, tablettes et télévision connectée) c’est l’assurance pour une  marque de maximiser son audience, d’augmenter ses ventes et d’offrir à ses clients/prospects une continuité dans leur expérience de consommation.
Si l’on ajoute à ce contexte que des acteurs comme Vente-Privée ou EBay ont réalisé en 2011 un chiffre d’affaires via mobile de respectivement 100 millions et 5 milliards d'euros. Et que l’on sait déjà que le taux de conversion est 2 fois supérieur sur tablettes (cf. étude Affiliate window 2011)… Les enjeux business semblent colossaux.
Mais la multiplication des points d’accès aux contenus et services connectés a eu pour conséquence de diversifier  les formats d’affichage. Quand l’avènement du tactile modifiait aussi la donne en terme de conception des interfaces.

Dès lors comment assurer à une marque une omniprésence sur tous les écrans sans multiplier les développements dédiés ? Le responsive web design entend répondre à cette problématique en posant comme principe de base que le contenu doit s’adapter à l’appareil depuis lequel il s’affiche et non l’inverse.
Ethan Marcotte est le premier à en avoir exposé les principes dans son livre sorti en mai 2010. Des principes qui se résument en deux mots : adaptabilité et réactivité. 
Les principes  du responsive web design  reposent sur trois éléments fondamentaux :

  • des grilles fluides : l’interface construite sous forme de grilles permet de jouer sur un nombre plus ou moins élevé de colonnes dans lesquelles « coulent » les contenus ;
  • des images flexibles : la taille, la disposition s’ajustent en fonction de l’écran ;
  • des requêtes de média qui permettent de détecter quel est le support utilisé (ou plutôt la taille de son écran) et de s’adapter en conséquence.

Ci-dessous, trois sites développés selon l’approche responsive web design avec un affichage adapté pour ordinateur, tablette et mobile.

The Boston Globe

Barack Obama.com

Nikestore US

Le responsive web design semble être l’approche idéale pour tout responsable Internet. Déjà de grands acteurs du web comme Facebook ou Amazon mettent en œuvre ces approches.

Mais attention l’exercice ne s’avère n’est pas si facile à réaliser et il vaut mieux en connaitre les écueils pour les contourner 

  • Les temps d’affichage peuvent être rallongés notamment du fait du redimensionnement des images ou du chargement d’éléments inutiles pour l’appareil concerné ;
  • Des problèmes d’interprétation des requêtes media existent encore aujourd’hui avec certains navigateurs moins récents comme IE6 ou Firefox 2 ;
  • La phase de conception s’avère plus ardue ; il faut en effet penser tous les scenarii d’affichage des contenus en amont.

Afin de contourner ces écueils et profiter au mieux des dernières technologies comme le HTML5,  Luke Wroblewski propose de concentrer la conception d’interfaces responsive en commençant par le mobile. Cette approche qui a le mérite de concentrer les efforts sur les contenus et fonctionnalités clés, repose sur des enrichissements progressifs des contenus suivant les versions d’affichage.
Elle complète l’approche responsive en adressant l’enjeu de l’explosion des usages mobiles.
Alors entre l’explosion des usages et la confirmation des bénéfices business, les entreprises et notamment les e-commerçants doivent s’emparer de ces sujets. Mais quand on connait les délais moyens de développement et de refonte des grands sites e-commerce (de 1 à 2 ans), il apparait incontournable de se pencher sur ces sujets dès maintenant.