Webdesign : responsive ou adaptive ?

28 février 2012,
par Romy Têtue

Mots-clefs associés à cet article :

Le « responsive » est une méthode d’affichage en fonction de la largeur, qui fait partie du « web design adaptative », qui relève de l’accessibilité. Ne confondez plus !

- L’expression « Responsive Web Design » inventée par Ethan Marcotte, désigne une méthode de travail à 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.

Bref, une page « responsive » ou « fluide » s’ajuste à la largeur d’écran, quelque soit la techno derrière, indépendamment du terminal de consultation. Il s’agit seulement d’afficher la page, son contenu, dans la largeur de la fenêtre utilisée pour la consulter.

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

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

Rudy Rigot

Bref, une page « adaptive » tient compte des ressources techniques, du terminal, du navigateur, avec ou sans JS, etc. pour servir un contenu adapté, afin d’offrir la meilleure expérience possible à l’auditoire le plus large possible.

- Tout cela recoupe les préoccupations d’accessibilité dont le but est, rappelons-le, de rendre les pages et leur contenus accessibles au plus grand nombre.

Vos commentaires

  • Le 30 mai 2013 à 20:44, par Romy Têtue 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 Romy Têtue 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.

    Ethan Marcotte 30 mai 2010

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
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom