Par Omar Thiam

Adaptive VS Responsive Design

La création d’interfaces s’adaptant aux différents terminaux (smartphones, tablettes, pc, ou ordinateur de bureau ) est devenu un incontournable pour la concéption de sites Web.

 Il y a une evolution sur la manière de « designer » pour le Web qui a pour but d'améliorer l’expérience d'utilisateur c’est à dire faciliter la lecture, rendre simple et intuitive la navigation, s’assurer que la présentation des informations sera toujours propre, agréable quel que soit le terminal. Pour cela, nous avons deux methodes de conception de sites Web qui par leur nom sèment une grande confusion: le “Responsive Web design” et l “Adaptive Web Design” ou “Design Adaptatif”.

La différence entre le “Responsive Web design” et ce qu’on appelle “Adaptive Web Design” ou “Design Adaptatif” n’est pas forcément facile à saisir. Il semble y avoir confusion entre ces deux termes et leur signification même au sein des specialistes du Web. Ainsi avec cet article, je vous donne mon avis sur ce sujet.

Confusion: Adaptive et responsive

Nous utilisons souvent le terme "Adaptive Design" ou Design adaptatif pour décrire l’ensemble des méthodes permettant d’adapter une interface au terminal. Je rappelle aussi que la notion de "Responsive Design ou plus précisément Responsive Web Design  fait partie du Design adaptatif et regroupe deux types de mise en page:

  • la mise en page responsive (ou responsive layout en anglais)
  • la mise en page adaptative  (ou adaptive layout en anglais)

Alors, c’est là qu' on comprend d' ou vient la confusion. On constate que le responsive design, faisant partie de la grande famille du design adaptatif englobe lui même les deux notions de responsive et d’adaptative design à ceci près, et la nuance est tres importante. Le Responsive Web design est une partie d’un plus grand concept que l’on appelle Adaptive Design (Design Adaptatif). Lorsque l’on parle de Responsive Web design, on fait uniquement référence à la mise en page (des grilles fluides, des images flexibles et des media-queries). Pour la conception des pages adaptative, nous avons deux axes principaux:

  1. les grilles fluides et fixes
  2. et les media-queries

La grille fixe, comme son nom l' indique, elle  permet de séparer la page en x colonnes. Au fur et à mesure que la largeur d’affichage diminue, les éléments placés sur les colonnes vont se placer les uns en dessous des autres. Alors que La grille fluide assure aussi une séparation de la page en colonnes mais ces dernières ont une largeur établie en pourcentage. Avec ce dernier type de grille, non seulement les éléments de contenus vont pouvoir se placer les uns en dessous des autres au fur et à mesure de la diminution de la largeur, mais aussi s’adapter en largeur car ils sont positionnés sur des colonnes dont la largeur est exprimée en pourcentage.

Malgré toutes ces techniques,  l’utilisation des grilles ne pourrait pas fonctionner correctement. L’utilisation d’une grille fluide permet d’adapter à elle seule la largeur de la page mais, sur les petits écrans, les éléments peuvent se retrouver vite étriquer et donc peu lisibles. Et c'est là que l'utilisation des media-queries ou points de bascule est importante car , ils permettent d’indiquer au navigateur quand un élément doit changer de place voire disparaître.

Il est important de rappeler qu' une page Web comme une succession d’éléments posée sur une grille et on peut la comparer facilement avec un architecte qui poserait des tracés sur du papier millimétré.

Le Design Adaptatif ou "Adaptive Web Design" 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 aux différents terminaux et situations de navigation.