Responsive Web Design

Cet article est une ébauche concernant Internet et l’informatique. Vous pouvez partager vos connaissances en l’améliorant (comment ?) selon les recommandations des projets correspondants.

Des informations de cet article ou section devraient être mieux reliées aux sources mentionnées dans la bibliographie ou en liens externes. Améliorez sa vérifiabilité en les associant par des références.

Dessin illustrant le principe du responsive design

Dessin illustrant le concept d'adaptive design

La notion de Responsive Web Design (conception de sites web adaptatifs selon l'OQLF) regroupe différents principes et technologies qui forment une approche de conception de sites Web 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.).
Le Responsive Web Design est souvent abrégé par RWD dans les articles traitant du sujet.

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 d'un site Web adaptatif

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 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 mises 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 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

Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue !

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 à 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ème 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.

Voir aussi

Bibliographie

• Ethan Marcotte, Responsive Web Design, 25 mai 2010 
• Ethan Marcotte, Fluid images, 7 juin 2011 
• Denise Jacobs, 21 top tools for responsive web design, 23 août 2011 
• Luke Wroblewski, Mobile First, 3 novembre 2009