Un même site consulté sur un téléphone, une tablette et un grand écran de bureau ne devrait jamais donner l’impression d’avoir été mal redimensionné : c’est tout l’enjeu de cette approche, popularisée au début des années 2010 avec la généralisation des smartphones.
Trois ingrédients combinés
Concrètement, cela repose sur des unités relatives ou fluides plutôt que des largeurs fixes en pixels, des images qui s’adaptent grâce à max-width: 100% ou à l’attribut srcset, et des points de rupture définis par des media queries pour réorganiser franchement la mise en page à certains seuils. WordPress applique nativement ce principe aux images insérées dans le contenu, en générant automatiquement l’attribut srcset depuis WordPress 4.4, sans configuration particulière du thème.
Exemple
.grille-articles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
}
À ne pas confondre avec
- La conception mobile d’abord, qui est une méthode particulière de mise en œuvre de cette approche, pas un synonyme : on peut concevoir de façon adaptative en partant du grand écran, même si c’est rarement recommandé aujourd’hui.
- Un site adaptatif par paliers fixes (« adaptive design »), qui bascule entre quelques gabarits prédéfinis plutôt que de fluidifier continuellement la mise en page.
Bon à savoir : les propriétés modernes clamp(), combinées à des unités comme vw, permettent aujourd’hui de faire varier une taille de texte en continu, réduisant le nombre de media queries nécessaires pour un rendu fluide.