Webdesign : responsive ou adaptive ?

28 février 2012,
par Romy Têtue

Mots-clefs associés à cet article :

Le « responsive » ajuste l’affichage selon la largeur, tandis que l’« adaptative » sert des contenus différents. Ne confondez plus !

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

{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Vos commentaires

  • Le 30 mai 2013 à 20:44, par quote En réponse à : Webdesign : responsive ou adaptive ?

    Sur ce sujet, Nicolas Hoizey recommande vivement ce billet de Stéphanie Walter, qui va au delà du RWD et aborde l’Adaptive Web Design : The State Of Responsive Web Design, traduit chez AlsaCréations : Responsive Webdesign – présent et futur de l’adaptation mobile.

    Et Rudy Rigot complète avec la page 10 de son livre, Projet responsive web design, Eyrolles, 2013 :

    Le concept de responsive web design est très souvent injustement confondu avec celui d’adaptive web design ou design adaptatif ; c’est excusable, car tous deux partagent davantage que des sonorités voisines. Tout comme le responsive web design, l’adaptative web design est présenté par son propre livre, écrit par Aaron Gustafson (Jeffrey Zeldman en signe la préface). Alors que le responsive consite à gérer uniquement les différentes tailles d’écran, l’adaptative s’applique plutôt à une catégorie de sites dont le design (fonctionnel ou graphique) change en fonction des capacités du navigateur (Est-il capable d’exécuter du JavaScript ? Est-il capable de stocker de la donnée côté client ? Est-il capable de représenter des blocs avec des dégradés en CSS ? Etc.) ou du système d’exploitation.

  • Le 19 juin 2013 à 10:33, par quote En réponse à : Webdesign : responsive ou adaptive ?

    Lire aussi : Adaptive vs. Responsive, what’s the difference ?, by Viljami, 23 February 2012, ici traduit en français : Adaptive VS Responsive Design : quelle est la différence ? par Stéphanie Walter.

  • Le 8 octobre 2013 à 14:55, par eQRoeil En réponse à : Webdesign : responsive ou adaptive ?

    RWD employé pour les media-queries + grille fluide + scaling images me semble bien réducteur…

    And I think you’ve nailed what I think responsive web design really means : it’s not simply about ensuring that your content is able to scale/adapt to different viewports and resolutions, though that’s certainly a large part of it. Designing for a reference resolution, and then considering which elements are appropriate for another medium is another part of it—and to use your oversized image example, that may mean suppressing them altogether.

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Raccourcis : {{gras}} {italique} -liste [bla->url] <q> <quote> <code>.

Suivre les commentaires : RSS 2.0 | Atom