Adaptive VS Responsive Design

Le « designer » a pour but d'améliorer l’expérience d'utilisateur c’est à dire de faciliter la lecture, rendre simple et intuitive la navigation, s’assurer de la présentation des informations quel que soit le terminal. Pour cela, nous avons deux méthodes de conception de sites Web qui par leurs noms 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.

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.  Rappellons 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' où 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. La nuance est très importante. Le Responsive Web design est une partie d’un plus grand concept que l’on appelle Adaptive Design (Design Adaptatif). Lorsqu’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 adaptatives, nous avons deux axes principaux:

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

La grille fixe, comme son nom l' indique, 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. La grille fluide assure aussi une séparation de la page en colonnes; ces dernières ont une largeur établie en pourcentage. Avec ce 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 étriqués et donc peu lisibles. Et c'est là que l'utilisation des media-queries ou points de bascule soit 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, peut être comparé 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’une amélioration Progressive,tout en essayang d’apporter la meilleure expérience utilisateur aux différents terminaux de navigation.

IT WEB SOLUTION vous propose un design joli et moderne qui vous permet de séduire le visiteur.