Responsive Web Design, comment bien démarrer ?

Temps de lecture estimé : 9 minute(s)

*Attention, ce contenu a été publié il y a 3 années. Il n'est peut-être plus d'actualité.*

Depuis toujours, les concepteurs de sites Internet sont confrontés à la question de la portabilité de leurs créations sur des navigateurs qui interprètent plus ou moins convenablement les préconisations du World Wide Web Consortium (W3C). Concevoir un même site pour Internet Explorer puis pour Firefox était autrefois considéré comme une pratique incontournable. L’émergence d’une nouvelle génération de terminaux mobiles, portée par la croissance des usages correspondants, n’a fait qu’intensifier cette problématique. Pour preuve, Médiamétrie annonçait il y a quelques jours que 50,7 % des français se connectaient désormais chaque jour à Internet depuis leur smartphone(1). Il n’est donc plus possible de créer une version de site à destination de chaque terminal. C’est pourquoi de nouvelles solutions ont vu le jour, au premier rang desquelles le Responsive Web Design.

Responsive Web Design, comment bien démarrer ?

Qu’est-ce que le RWD ?

RWD est l’acronyme du terme Responsive Web Design . Du point de vue de l’utilisateur final (internaute s’il consulte le site web depuis son ordinateur, mobinaute s’il privilégie plutôt tablette ou smartphone) grâce à cette combinaison de méthodes et de techniques, l’interface d’un site Internet ou d’une application en ligne s’adapte automatiquement au navigateur du terminal qu’il utilise (smartphone, tablette tactile, laptop, desktop, etc.). C’est pourquoi on parle également d’ expérience adaptative .

Les trois composantes techniques qui font (presque) consensus
La grille flexible : les pages des sites RWD sont conçues à partir d’une structure qui s’adapte aux caractéristiques des navigateurs Internet ;
Les medias queries : ces règles CSS confèrent sa dimension flexible à la grille sur laquelle repose la structure du site ;
Les médias flexibles : pour achever la flexibilité de l’ensemble, il convient d’adapter les médias (images et vidéos) aux conditions d’affichage de chaque navigateur.

La guerre des frameworks aura-t-elle lieu ?
Pour faciliter le travail des développeurs front-end, des frameworks d’intégration ont vu le jour. Boostrap , la solution mise au point par les équipes de Twitter, est certainement le plus célèbre framework RWD et l’initiateur d’une nouvelle génération de solutions qui a convaincu des sociétés aussi célèbres que Vogue, Newsweek, Spotify, MongoDB, ou encore la NASA.

Aujourd’hui, on ne compte plus le nombre de frameworks RWD disponibles. Parmi les alternatives les plus populaires à Boostrap citons néanmoins Foundation, Skeleton, Boilerplate, HTML Kickstart, Sproutcore, Zebra, etc.

Exemple d'étude de breakpoints.
Exemple d’étude de breakpoints.

Pourquoi faut-il arrêter la dégradation élégante ?

Entre 2000 et 2005, les méthodes de conception de sites Internet ont tout d’abord été bousculées par la combinaison de trois facteurs majeurs.
Le concept de séparation entre le fond (en substance le contenu HTML) et la forme (la mise en page à l’aide de feuilles de styles dites CSS) a permis l’essor des solutions de gestion de contenus (encore appelées Content Management System ou CMS) et rendu possible la mise à jour des sites Internet par tout un chacun.

Dès lors, le volume de contenu éditorial a explosé sur le Web, également porté, il est vrai, par l’essor de la Blogosphère. La multiplication du nombre de navigateurs Internet et enfin l’émergence des smartphones ont achevé de rendre caduque cette méthode qui consistait à créer autant de versions d’un site que de navigateurs.

Face à ces nouveaux enjeux, de nouvelles approches ont émergé au premier rang desquelles la dégradation élégante. Cette méthode s’est naturellement imposée dans le cas de sites Internet non conçus initialement dans une perspective multiplateforme et que l’on souhaite rendre flexibles par la suite.

La multiplication du nombre de navigateurs Internet et l’émergence des smartphones a rendu caduque la dégradation élégante.
La multiplication du nombre de navigateurs Internet et l’émergence des smartphones a rendu caduque la dégradation élégante.

La dégradation élégante est sans nul doute l’une des premières expériences de web adaptatif – et mérite d’être saluée à cet égard. Son usage est pourtant encore trop répandu aujourd’hui, bien qu’en total décalage avec les attentes des utilisateurs actuels. Dans les faits, il s’agit bien souvent d’une méthode « corrective » privilégiée par des équipes créatives pas tout à fait à l’aise avec les changements qu’engendrent les nouveaux usages.

En effet, aujourd’hui plus d’un visiteur sur deux est en réalité un mobinaute, et cette tendance s’accentue dans le monde entier. Dans le domaine du e-commerce 30 % à 35 % des clients sont sur mobile. À la lumière de ces chiffres, il n’est tout simplement plus possible d’envisager la conception d’un site Internet à travers le prisme unique du sacro-saint ordinateur de bureau puis d’en tenter l’adaptation à d’autres terminaux.

Cette démarche est d’autant plus absurde qu’elle nécessite beaucoup de ressources pour déconstruire le site et l’adapter à chaque terminal.

L’amélioration progressive

La genèse d’un site Internet ou d’une application en ligne, qu’ils soient adaptatifs ou non, est nécessairement l’aboutissement d’un processus préalable de conception. Et c’est sans nul doute dans ce domaine que l’apport du RWD est le plus significatif.

L’amélioration progressive est une deuxième école qui a en effet révolutionné les méthodes de conception bien au-delà même du web adaptatif. Dans le cas présent, il s’agit de penser la conception du site web ou de l’application en ligne comme la stricte combinaison du contenu et des composants structurels du site Internet :

1 . Les informations primitives(2) ;
2 . L’architecture des gabarits de pages ;
3 . La navigation.

Contrairement à la dégradation élégante, c’est à partir des trois éléments précités que les templates sont conçus, pour un site mobile tout d’abord. On enrichit ensuite progressivement l’interface, en ajoutant des éléments supplémentaires (et/ou en révisant profondément celle-ci) afin de mieux tirer parti des caractéristiques des écrans aux résolutions supérieures.

Par-delà l’exploitation de l’espace supplémentaire disponible, on profite également des capteurs embarqués sur les terminaux mobiles. Dans le domaine de la cartographie interactive par exemple, on privilégiera l’affichage de points d’intérêts géographiques directement au sein de l’application embarquée par le terminal, plutôt que d’afficher une carte dans la page du site Internet correspondant.

Cette méthode est fort déstabilisante lorsqu’on essaie pour la première fois de la mettre en application. Néanmoins, dès lors qu’on s’y exerce avec rigueur, elle permet de se focaliser sur la qualité de l’expérience utilisateur en concentrant ses efforts sur la pertinence de l’information diffusée, de l’architecture et de la navigation.

De ce point de vue, l’amélioration progressive a plus de points communs avec une démarche éditoriale (pour ne pas dire documentaire) qu’avec un processus strictement technique.

Comment concevoir un (bon) site RWD ?

La définition du plus petit dénominateur commun
Bien souvent lorsqu’un site est conçu dans la précipitation, il n’est pas rare d’aboutir à des impasses. La home-page du site que vous consultez est parfaitement RWD, puis vous cliquez sur un lien et malheureusement la page suivante n’est plus du tout adaptée au mobile.

Il existe une méthode très simple pour remédier à ce genre d’écueil. Elle est même enseignée à l’école primaire ! Il s’agit d’appliquer le principe du plus petit commun dénominateur .

Avant de se consacrer à la réalisation des templates du site, consacrons nous tout d’abord à la conception de l’arborescence idoine(3) sous la forme d’une carte heuristique.

Ainsi structurée, cette représentation permet de distinguer aisément les familles de templates et la navigation associée.

Testons, testons et retestons !
Comme le RWD est une réelle vague de fond, les principaux navigateurs Internet du marché ont intégré le besoin des développeurs front-end et leur proposent désormais des fonctionnalités qui permettent de tester leurs créations sur plusieurs plateformes(4).

La vue adaptative de Firefox par exemple, disponible parmi les outils de développement embarqués, permet d’afficher une page HTML sur 8 écrans différents. On peut également tester les formats paysages ou portraits, voire simuler des événements tactiles.

De prime abord, ces fonctionnalités rendent de nombreux services et proposent un rapide aperçu de la qualité de l’intégration HTML/CSS. Soyez toutefois vigilant car même si les émulateurs progressent, à ce jour rien ne remplace une batterie de tests menés sur les principaux smartphones, phablettes et tablettes du marché.

L’avenir de l’adaptabilité et l’inévitable impasse du mobile-first

Penser RWD, c’est s’assurer que la consultation d’un site Internet ou d’une application en ligne est confortable, quel que soit le terminal utilisé.

Au fur et à mesure de nos expériences, nous nous apercevons que cette vision technocentriste cède le pas à une approche beaucoup plus complexe, davantage orientée utilisateur. La nature du terminal que ce dernier emploie n’est finalement qu’une petite inconnue composant la très complexe équation adaptative.

Pour être aboutie, cette dernière s’appuie sur bien d’autres ingrédients. Aujourd’hui, la plupart des internautes surfent sur plusieurs terminaux au cours d’une même journée. Il n’est pas rare d’entamer furtivement la consultation d’une information sur un smartphone, puis d’en finir la lecture sur une tablette, confortablement installé sur son canapé.

L’avenir de l’adaptabilité passe inévitablement par un ciblage toujours plus précis des usages des utilisateurs et des données qu’ils produisent. Penser mobile-first n’est donc pas une fin en soi. Il suffit d’observer l’essor des montres connectées et de l’IoT en général pour se convaincre de l’impasse vers laquelle le mobile-first s’engouffre.

Notes :
(1) L’année Internet 2015 : le multi-écrans se généralise et influence les pratiques des internautes
(2) Les informations primitives sont constituées des contenus éditoriaux et des services en lignes.
(3) Freeplane est une solution open-source particulièrement souple et pratique pour dessiner des cartes heuristiques.
(4) Dans le cas présent, une plateforme est la combinaison d’un système d’exploitation, d’un navigateur, d’une configuration d’écran et d’un terminal.