[Traduction] Adaptive VS Responsive Design : quelle est la différence ?

[Traduction] Adaptive VS Responsive : quelle est la différence ?

La différence entre le “Responsive Webdesign” et ce qu’on appelle “Adaptive Design” ou “Design Adaptatif” n’est pas forcément facile à saisir.  Viljami Salminen dans son article  Adaptive vs. Responsive, what’s the difference? donne une explication assez claire, dont je vous propose la traduction aujourd’hui avec son autorisation.


Il semble y avoir confusion entre ces deux termes et leur signification. Je vous propose donc mon avis sur le sujet ainsi que quelques liens annexes pour continuer vos lectures. Je ne suis en général pas un grand fan des débats à propos de la façon dont on devrait nommer telle ou telle chose, mais j’ai voulu cette fois clarifier la situation puisque cette question revient assez souvent.

Le Responsive Webdesign est une partie d’un plus grand concept que l’on appelle Adaptive Design (Design Adaptatif ou Design Adaptif). Lorsque l’on parle de Responsive Webdesign, on fait uniquement référence à la mise en page (Ethan Marcotte – NDT auteur du livre Responsive Webdesign – des grilles fluides, des images flexibles et des media-queries).

Le Design Adaptatif quant à lui va bien au delà d’une simple fluidité dans la mise en page. En pratique ce terme signifie la même chose qu’Amélioration Progressive, à savoir pour faire simple, essayer d’apporter la meilleur expérience utilisateur à la plus large audience possible (NDT par audience il faut entendre différents appareils et situations de navigation). De plus le terme “Adaptive Design” ne devrait pas être confondu avec le terme “mise en page adaptative” (Adaptive layout) qui n’a strictement rien à voir.

 

Enfin le terme Adaptive layout, ou Mise en page Adaptative désigne un type de mise en page obtenu en combinant plusieurs largeurs fixes. Pour ma part je pense que la mise en page adaptative (lorsque qu’elle est bien faite et que les largeurs fixes sont combinées à des largeurs fluides) est une forme de design responsive, et non une alternative à ce dernier. Zeldman partageait une idée similaire dans un article de 2011.

adaptivetrad1Ataptative Responsive

Liens / Ressources :

Mise à  jour V1 : si mon article semble rendre les choses plus compliquées qu’elles ne le sont, voici la version raccourcie : le Responsive Webdesign est une partie du Design Adaptatif. Responsive Webdesign = uniquement les mises en page fluide, alors que Design Adaptatif = mise en page fluide + amélioration progressive.


Notons que j’ai choisi de traduire “adaptive” par “adaptatif”, mais vous risquez de trouver également le terme “adaptif”.

J’ajoute deux petites démos pour bien comprendre la MISE EN PAGE adaptative VS responsive : 

  • adaptative : largeurs de blocs fixes (en pixels), quand on redimensionne on a des “sauts” abruptes entre deux breakpoints -> Démo mise en page adaptative 
  • responsive : largeurs de blocs fluides (en %), pas de “sauts” quand on redimensionne tout est fluide  -> Démo mise en page responsive
Besoin d'un design de site, d'interface ou d'application mobile ? De conseils en ergonomie ou en expérience utilisateur ? Envie de travailler ensemble ? N'hésitez pas à consulter mes réalisations et à me contacter directement.

18 réflexions au sujet de « [Traduction] Adaptive VS Responsive Design : quelle est la différence ? »

  1. Bonjour, merci pour l’article. C’est utile de parfois savoir appeler un chat un chat. Qui plus est, dans le cadre d’une entreprise de moyenne/grosse dimension, ce genre d’article/schéma donne de l’eau à notre moulin pour la communication avec les équipes produit.

    Par contre, une petite coquille s’est glissée à la fin de ton article “adpatatif”.

      • Sympa ce petit article pour garder l’iceberg limpide et éviter les érosions. Merci.

        La faute signalée par Ludovic :
        Notons que j’ai choisi de traduire “adaptive” par “adpatatif”, mais vous risquez de trouver également le terme “adaptif”.

  2. Merci pour la traduction et pour ces explications (et pour l’image) Stéphanie, ils est toujours bon de rappeler les choses.
    Selon moi, il y a un souci avec l’amélioration progressive ou le design adaptatif, c’est qu’il y a une tendance aujourd’hui à les négliger, à croire que le web en 2013 ne se passe que sur mobile. Je visite trop de sites où la version desktop est complètement vide et où le design ne connait aucune “amélioration” par rapport à la version mobile.
    Je viens d’ailleurs d’en parler dans J’ai mal au webdesign.

    Rod

  3. Ping : [Traduction] Adaptive VS Responsive Design : qu...

  4. Ping : Des pixels et du code #67 - Stéphanie Walter : Webdesign - intégration webStéphanie Walter : Webdesign – intégration web | Strasbourg – Alsace.

  5. Je suis assez d’accord, certains confondent mobile first et mobile only. Le mobile first ne veut PAS dire faire la version mobile dans Photoshop avant, mais penser également le mobile en amont, et surtout lors de la phase d’intégration en ajoutant les fonctionnalités au lieu de les masquer en display:none. Du coup on peut très bien faire du mobile first, et commencer par le design desktop sur Photoshop (Illu, Fireworks, etc) sans pour autant sacrifier ce dernier. Certains feront toujours hélas d’un conseil l’extrême :/

  6. Ping : Créer un menu responsive avec la classe Walker

  7. Arf, merci pour cette précision sur le responsive design.
    Comme quoi, définir les termes, c’est important.
    Sympa le graphique de l’iceberg, super clair.

    Merci à toi Stéphanie.
    -Pit-

  8. Ping : Blog – Max. Deconinck» Blog Archive Adaptive Web Design » Blog - Max. Deconinck

  9. Ping : lire Adaptive Web Design | itlaia

  10. Ping : Engineering Inside | Production digitale offshore / HTML, Emailing, Wordpress, Prestashop, Flash » Adaptive Web Design

  11. Désolé mais je ne comprends pas…

    le résumé du texte c’est : “Responsive Webdesign = uniquement les mises en page fluide, alors que Design Adaptatif = mise en page fluide + amélioration progressive.”
    or dans tes deux exemples, la version responsive est fluide (ne saute pas), tandis que la version “adaptative” saute. Donc ce que je retiens en regardant les deux exemples c’est que la version responsive est une version améliorée de la version adaptative…. alors que tout l’article semble s’evertuer à dire le contraire…
    Pas clair du tout…

    • Je pense que tu as lu “trop” vite avant de passer aux exemples la partie “J’ajoute deux petites démos pour bien comprendre la MISE EN PAGE adaptative VS responsive” => Les deux exemples sont des exemples de MISE EN PAGE, de layout.

      Le RWD comme défini par Ethan Marcotte dans le livre éponyme est composée de 3 choses : grilles fluide + images fluides + media queries.
      L’Adaptive webdesign (ou design adaptatif) va au delà : amélioration basée sur les capacités de l’appareil, ce qui peut comporter des échanges avec le serveur et autres techniques pour adapter à l’appareil en allant au delà des simples media queries.
      Le RWD est donc une partie de l’adaptive (cf schémas).

      Il existe ensuite des MISES EN PAGE : la MISE EN PAGE adaptative (rien à voir avec adaptive webdesign) est basée sur une grille fixe (en px) et des media queries. La MISE EN PAGE responsive est basée sur une grille fluide (%) donc ça ne saute pas.

      Est-ce plus clair ainsi ?

    • Navrée mais traduire une vidéo entière de 45 minutes (dont il n’existe à ma connaissance aucun transcript) est un travail trop conséquent pour mes modestes compétences.

  12. J’ai participé à un grand débat ce matin à ce sujet. J’étais persuadé que le RWD c’était donc un système de grille (fluide ou non entre les différentes valeurs de media queries) et que le AWD n’était que l’affichage immuable adapté au device courant (par exemple affichage template mobile si on détecte un user agent mobile).

    On me renvoie sur ta traduction et là, patatra, je constate que finalement ce que je pensais a voir compris est l’inverse, et encore, pas tout à fait.

    En fouillant un peu plus en profondeur sur la toile je tombe sur un article relativement bien étoffé de références sur les racines et définition de ces termes. En plus de regonfler un peu ma fierté personnelle, je me dit que finalement les termes peuvent être arrangés et interprétés un peu à la sauce de chacun. Alors je pose la question, existe-t-il quelque part un document officiel qui défini clairement quoi est quoi ? (w3c ?)