Site web réactif

Un site web réactif (RWD, de l’anglais responsive web design : conception de sites web réactifs) est un site web dont la conception vise, grâce à différents principes et techniques, à offrir une consultation confortable sur des écrans de tailles très différentes. L'utilisateur peut ainsi consulter le même site web à travers une large gamme d'appareils (moniteurs d'ordinateur, smartphone, tablettes, télévision…) 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 réactif est un exemple de plasticité des interfaces.

Le layout de l'application "Wikimedia Commons" s'adapte à la taille de l'écran

Dessin illustrant le principe du responsive design.

Dessin illustrant le concept d'adaptive design.

Principe

La notion de web réactif 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 familles de terminaux mais de concevoir une interface réactive. Ainsi, les sources d'information et les socles techniques ne sont pas dupliqués. Ce qui engendre des économies d'échelle dans la conception et la maintenance de sites.

Composants principaux

Un site web pensé sur le principe du RWD utilise la technologie CSS3 media queries, 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 disposent 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 EM 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^[Qui ?] considérant que la grille fluide n'est pas nécessaire pour avoir un produit complètement réactif.

Pour faciliter la création de modèles réactifs pour le web, et gagner ainsi du temps, il existe de nombreux framework en responsive CSS (Bootstrap, Foundation, Gumby, Skeleton…).

Conception et approches

Illustration de la technique de conception de sites Web réactifs.

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 réactif.

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 à la plus faible définition 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). Cette pensée a pour objectif d'améliorer l'expérience utilisateur (UX (User eXperience)).

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 les CMS Wordpress et Drupal sont élaborés afin d'intégrer cette option « 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 modèles en RWD pour la plupart des outils de gestion de contenu. Le CMS Joomla! propose également des modèles de conception 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.

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é réactif. Il est ainsi possible de concevoir des emails HTML réactifs, des applications HTML5 mobiles réactives ou bien des applications Facebook Responsive.