Design fluide et design responsive

Design fluide et design responsive sont souvent confondus. Pourtant, si l’objectif est le même : adapter l’affichage aux dimensions de l’écran, les moyens sont différents.

Design fluide

Le design fluide existe depuis l’invention du web : on définit les dimensions des éléments structurels de la page (grille, colonnes…) proportionnellement à la largeur de l’écran.

Par exemple, une colonne de texte de largeur 75% et une colonne latérale de largeur 25%. Ainsi, le site s’adapte automatiquement aux dimensions de l’écran.

Avantage : on utilise toute la largeur de l’écran, quelle que soit sa taille.

Inconvénient : sur les écrans de tailles extrêmes, les colonnes peuvent devenir trop larges ou trop étroites et nuire à la lisibilité du texte, voire désorganiser la mise en page du site.

Design responsive

Le design « responsive » est apparu avec les appareils mobiles et la nécessité d’adapter l’affichage à des écrans très petits.

Difficile à traduire, le design « réactif » ou « adaptatif » consiste à réorganiser la mise en page en fonction de la largeur de l’écran écran. Par exemple, on placera la colonne latérale sous la colonne principale lorsque l’écran devient trop étroit.

Combiner les deux

L’idéal, quand la charte graphique le permet, est de combiner les deux approches : des colonnes fluides pour épouser parfaitement la largeur de l’écran, et un design « responsive » pour que les colonnes conservent une largeur raisonnable.

Design fluide et responsive

En pratique

Techniquement, on met en œuvre le design fluide avec des largeurs en % et le design « responsive » avec des « media queries ». Dans l’exemple suivant, les 2 colonnes s’empilent si la largeur de l’écran est inférieure ou égale à 800px.

#colonneA {
width:75%;
float:left;
}
#colonneB {
width:25%;
float:right;
}
@media screen and (max-width:800px) {
#colonneA {
width:100%;
float:none;
}
#colonneB {
width:100%;
float:none;
}
}