responsive design VS adaptative design

Statique, liquide, adaptative ou responsive ?

Parce qu’un petit dessin vaut mieux qu’un long discours, le site liquidapsive.com fait le point de façon visuelle entre ces quatre types de web design.

La différence entre statique, liquide, adaptative et responsive ?

Statique, liquide, adaptative ou responsive sont des termes que vous avez déjà entendu au sujet d’un site internet, mais vous ne savez pas exactement à quoi ça correspond ? Ou alors vous connaissez la différence entre un site normal et un site responsive, mais vous n’avez jamais entendu parler de mise en page liquide ? Pour y voir plus clair entre ces différents concepts et parce qu’un petit dessin vaut mieux qu’un grand discours, le site liquidapsive.com fait le point de façon visuelle avec 4 exemples grandeur nature ! Le site affiche uniquement un template de site avec une en-tête, un pied de page, et 3 colonnes de contenu, dont une pour la navigation. Quelque chose de très classique, donc.
Dans le header, à droite, un menu déroulant propose d’afficher ce template sous forme statique, liquide, adaptative ou responsive. Pour comprendre rapidement les différences de comportement entre ces quatre types de design CSS, il suffit de choisir un item dans le menu déroulant, le template correspondant s’affiche et vous n’avez plus qu’à redimensionner la fenêtre de votre navigateur pour voir comment le site réagit.
En gros, les principales différences sont les suivantes :

1. Design statique

La mise en page statique existe depuis longtemps, c’est ce qu’il y a de plus traditionnel. Le site a une largeur définie à la conception, 960 pixels de large par exemple. Si la fenêtre du navigateur est plus large que le site, il y aura du blanc ou un arrière plan sur les côtés. Par contre, si la fenêtre du navigateur est moins large que le site, il y aura une barre de défilement horizontal qui apparaîtra en bas de la fenêtre pour pouvoir accéder à la partie qui déborde, ce qui n’est pas très ergonomique.

2. Design liquide

Dans une mise en page liquide (ou fluide), les largeurs des différents éléments, principalement les colonnes, sont exprimées en pourcentage, ce qui fait que le site s’adapte de façon automatique à la taille de l’écran ou de la fenêtre du navigateur. la largeur du site et des colonnes qui le composent sera toujours proportionnelle à la largeur de la fenêtre du navigateur. Ce design n’est pas très adapté aux très grandes tailles d’écrans ni aux très petites tailles.

3. Design adaptative

Un design adaptative utilise les Media Queries CSS3 pour prévoir plusieurs mises en page différentes pour différentes tailles d’écrans. Lorsque la fenêtre du navigateur est redimensionnée, à chaque franchissement d’une largeur d’écran définie par les Media Queries, la mise en page correspondante est utilisée pour afficher le site.

 4. Design responsive

Un design responsive (ou RWD pour responsive web design), tout comme un design adaptative, prévoit plusieurs mises en page différentes pour différentes tailles d’écrans, toujours à l’aide des Media Queries CSS3, mais chacune de ces mises en page est fluide (ou liquide). cela permet de toujours utiliser de façon optimale la largeur d’affichage disponible, quelle que soit la taille de l’écran ou de la fenêtre du navigateur.

Tout le monde n’est pas entièrement d’accord sur ces définitions, notamment entre adaptative et responsive, si vous voulez d’autres définitions, vous en trouverez sur le web. Par exemple chez chez Alsacreations ou chez Stéphanie Walter (à qui j’ai piqué le visuel d’illustration de cet article – sous licence Creative commons attribution – Partage dans les mêmes conditions 3.0 France – CC BY-SA 3.0 FR).

responsive design VS adaptative design

Pour comprendre rapidement la différence entre statique, liquide, adaptative et responsive : liquidapsive.com

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *