Un site web adaptatif (anglais RWD pour responsive web design, conception de sites web adaptatifs selon l’OQLF1) est un site web dont la conception vise, grâce à différents principes et techniques, à offrir une expérience de consultation confortable même pour des supports différents. L’utilisateur peut ainsi consulter le même site web à travers une large gamme d’appareils (moniteurs d’ordinateur, smartphones, tablettes, TV, etc.) avec le même confort visuel et sans avoir recours au défilement horizontal ou au zoom avant/arrière sur les appareils tactiles notamment, manipulations qui peuvent parfois dégrader l’expérience utilisateur, tant en lecture qu’en navigation. Un site web adaptatif est un exemple de plasticité des interfaces.
Principe
La notion de web adaptatif repense la manière de concevoir les parcours de navigation sur Internet, de concevoir une seule interface auto-adaptable. Ainsi, les sources d’information et les socles techniques ne sont pas dupliqués. Cela engendre des économies d’échelle dans la conception et la maintenance de sites internet bénéficiant de ce mode de conception.
Composants principaux
Un site web pensé sur le principe du RWD2 utilise la technologie CSS3 media queries3,4, une extension de la règle @media5 pour adapter la mise en page à l’environnement de consultation grâce à une grille fluide dans laquelle se disposent les différents contenus de la page6.
- Media queriespermet à la page d’utiliser des règles CSS différentes en fonction des caractéristiques du terminal de consultation. Le plus communément il s’agit des règles appliquées en fonction de la largeur du terminal. Ces différentes largeurs sont appelées « points de rupture » et correspondent à un besoin de modifier la mise en page à partir d’un certain seuil critique pour la facilitation de la navigation et de la lecture du contenu.
- Le concept de grille fluide consiste en un dimensionnement relatif des différents blocs de la page. Les unités relatives comme les pourcentages ou les EMsont assez adaptées pour cela, beaucoup plus que les unités absolues comme les pixels ou les points6.
- Les images ayant un besoin de flexibilité sont également redimensionnées en unité relative, afin de prévenir un éventuel débordement du contenu en dehors de son élément
Technique
Le concept de RWD, tel que décrit par Ethan Marcotte7, s’appuie sur les trois éléments techniques cités précédemment.
Si les media queries sont souvent mis en avant comme l’élément technique principal du Responsive Web Design, pour Marcotte E., ils ne servent qu’à apporter quelques modifications dans l’interface quand l’utilisation de grilles fluides ne permet pas de résoudre tous les problèmes liés à l’adaptabilité du produit8.
Pour faciliter la création de modèles adaptatifs pour le web, et gagner ainsi du temps, il existe de nombreux framework en responsive CSS (Bootstrap, Foundation, Gumby, Skeleton…).
Conception et approches
Le concept de RWD est apporté avec la multiplication des terminaux de consultation de sites web. Il convient d’avoir à l’esprit deux approches différentes du Design de site web adaptatif.
Responsive degradation
En partant de la version ordinateur de bureau du site web, certains éléments constituant la page web sont progressivement remis en forme à mesure que la largeur d’écran diminue, quand ils ne sont pas tout simplement enlevés. Il s’agit d’adapter le design en fonction de la résolution décroissante de l’écran. Le cas le plus fréquent et le plus parlant est le passage d’un site disposant de plusieurs colonnes en version bureau, à une seule en version mobile.
Cette méthode est parfois remise en cause dans la communauté des web designers, puisque dans la réalité, un Smartphone chargera la version bureau du site web et la version mobile, et donc téléchargera des données de style non nécessaires et des images qui peuvent être lourdes depuis un réseau cellulaire.
Mobile first (le mobile en premier)
La notion de mobile first peut être considérée comme un mode de pensée dans lequel on privilégierait la construction d’une interface ergonomique pour terminaux mobiles avant d’établir l’ergonomie pour un terminal « desktop » (de bureau). Ce qui est, dans l’histoire d’Internet, l’affichage traditionnel. Cette pensée a pour objectif d’améliorer l’expérience utilisateur (UX).
L’élaboration d’une interface ergonomique sous la contrainte d’un faible espace d’affichage force à épurer au maximum les éléments visibles par l’utilisateur final. Une tendance que l’on retrouve de plus en plus dans l’ergonomie des interfaces web.
Cette pensée est de plus en plus privilégiée par des outils destinés à la création de site web. Par exemple le CMS Drupal élabore la version 8 de son CMS en essayant d’intégrer cette pensée « Mobile First ». L’augmentation constante des ventes de « Smart Connected Devices » (PC, smartphone et tablette) a augmenté l’intérêt de réalisation de templates en RWD pour la plupart des outils de gestion de contenu. WordPress et Joomla! proposent également des designs intégrant la dimension responsive.
Pour aller plus loin, de nouveaux systèmes de gestion de contenu intègrent le responsive web design dans leur conception. Certains CMS comme Rubedo intègrent nativement des systèmes de mise en page à l’aide de Grilles Fluides et permettent (grâce aux Media Queries) de définir les éléments des pages qui s’afficheront en fonction des supports à l’aide de simples cases à cocher.
Comment installer Bootstrap