Webdesign : responsive ou adaptive ?

Responsive : UN contenu élastique

L’expression « Responsive Web Design » inventée par Ethan Marcotte, désigne une méthode de composition à base de grilles fluides, d’images flexibles et de media queries — exposée dans cet article : Responsive Web Design (ALA, May 25, 2010) et surtout dans ce livre de référence : Responsive Web Design, (A Book Apart, 2011), traduit en français chez Eyrolles, sous le même titre : Responsive Web Design.

Une page « responsive » ou « fluide » s’ajuste à la largeur d’écran, indépendamment du terminal de consultation. Il s’agit seulement d’afficher au mieux la page, son contenu, dans la largeur de la fenêtre utilisée pour la consulter. Cela se fait essentiellement via CSS, sans toucher au contenu ni au HTML, qui restent constants. C’est ainsi qu’un même site web peut être consulté sur grand écran de bureau ou sur petit écran de smartphone.

« Webdesign réactif » est la traduction approximative de « Responsive Webdesign » mais il serait plus exact de parler de gabarit flexible, souple, fluide ou même élastique — et non « adaptive », pour ne pas confondre.

Adaptative : DES contenus adaptés

L’expression « Adaptive Web Design » inventée par Aaron Gustafson, désigne bien plus que le seul usage de gabarits fluides. Il s’agit de concevoir des interfaces adaptées aux capacités de l’utilisateur. En pratique, c’est la même chose que le « progressive enhancement » ou « amélioration progressive », une méthode de conception des sites web s’appuyant sur du balisage sémantique, CSS externes, JavaScript et technologies d’assistance — exposée dans ce livre : Adaptive Web Design.

Une page « adaptive » tient compte des ressources techniques, du terminal, du navigateur, utilisé avec ou sans JS, etc. pour servir un contenu adapté, c’est-à-dire DES contenus différents, en fonction du contexte technique de consultation de l’internaute, afin d’offrir la meilleure expérience possible à l’auditoire le plus large possible. Caricaturalement il s’agit de réaliser plusieurs versions d’un site web : l’une pour les smartphones, une autre pour les ordinateurs de bureau… Ce qui beaucoup plus laborieux à développer mais aussi plus risqué car potentiellement déroutant pour les internautes qui ne retrouveront pas les mêmes contenus selon l’outil de consultation utilisé.