Un site web adaptatif (anglais RWD pour responsive web design, conception de sites web adaptatifs selon l'OQLF) est une notion de conception de sites web qui regroupe différents principes et technologies dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation. 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.
Principe
La notion de web adaptatif repense la manière de concevoir les parcours de navigation sur Internet, puisqu'il ne s'agit plus de concevoir autant de parcours qu'il y a de famille de terminaux mais 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'échelles 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 RWD utilise la technologie CSS3 media queries (en), une extension de la règle @media pour adapter la mise en page à l'environnement de consultation grâce à une grille fluide dans laquelle se casent les différents contenus de la page.
- Media queries permet à 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 EMs sont assez adaptées pour cela, beaucoup plus que les unités absolues comme les pixels ou les points.
- 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 conteneur.
Technique
Le concept de RWD, tel que décrit par Ethan Marcotte 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 produit.
Cette « sacro-sainte trinité », comme l'appelle Raphaël Goetter, est parfois critiquée, certains considérant que la grille fluide n'est pas nécessaire pour avoir un produit complètement adaptatif.
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 (Twitter 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 constituants 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 design 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 Grille Fluides et permettent (grâce aux Media Queries) de définir les éléments des pages qui s'afficheront en fonction des support à l’aide de simples cases à cocher.
Déclinaisons
Le Responsive Web Design peut s'appliquer à d'autres usages qu'un site internet. Tout ce qui utilise des technologies web peut être pensé adaptatif. Il est ainsi possible de concevoir des emails HTML adaptatifs, des applications HTML5 mobiles adaptatives ou bien des applications Facebook Responsive.
