Le responsive web design (ou site adaptatif) est une façon de concevoir un site pour qu’une même page adapte sa mise en page à l’écran sur lequel on la consulte, du petit smartphone au grand écran de bureau. Au lieu de maintenir un site mobile et un site desktop séparés, un site responsive utilise des grilles fluides, des images flexibles et des media queries CSS pour réorganiser le même contenu selon la taille de l’écran. C’est aujourd’hui la manière standard de construire un site, et celle que recommande Google.
D’où vient le responsive web design ?
Le terme a été proposé par le designer Ethan Marcotte dans un article intitulé « Responsive Web Design », publié dans A List Apart en mai 2010. L’iPhone avait alors trois ans, et beaucoup d’entreprises développaient un site mobile séparé, souvent sur un sous-domaine « m. », à côté de leur site principal. Marcotte proposait un seul site qui réagit à l’appareil, reposant sur trois ingrédients :
- Une grille fluide : des largeurs exprimées en unités relatives (pourcentages) plutôt qu’en pixels fixes.
- Des images flexibles : des images qui se redimensionnent dans leur conteneur.
- Des media queries : des règles CSS qui ne s’appliquent que si l’écran remplit une condition, par exemple une largeur minimale.
Ces trois idées décrivent toujours le fonctionnement d’un site responsive, même si les outils CSS ont beaucoup progressé depuis.
Les principes de base
Le contenu se réorganise, il ne disparaît pas
Une page responsive affiche le même contenu sur tous les appareils, simplement réarrangé. Trois colonnes sur desktop deviennent une seule colonne sur mobile, un menu horizontal devient un bouton, un grand tableau défile dans son propre bloc. Masquer du contenu important sur mobile est une erreur fréquente, d’autant que Google indexe la version mobile des pages.
La mise en page est fluide entre les breakpoints
La mise en page s’étire et se resserre avec l’écran, et ne change de structure qu’à quelques largeurs appelées points de rupture, ou breakpoints. Bien les choisir est un sujet à part entière : voir les breakpoints responsive.
Mobile first
La plupart des sites responsive sont désormais conçus en mobile first : le CSS de base correspond à la mise en page mobile, et les media queries ajoutent de la complexité pour les écrans plus larges. On obtient en général un CSS plus simple et des pages mobiles plus rapides. Pour aller plus loin : le design mobile first.
Le tactile et la densité d’écran font partie du responsive
Le responsive ne se limite pas à la largeur. Un smartphone s’utilise au doigt, possède un écran haute densité et passe du mode portrait au mode paysage. Un site responsive propose des zones tactiles assez grandes pour le pouce, des images nettes sur les écrans haute densité et une mise en page qui résiste à la rotation.
Responsive design ou adaptive design ?
| Responsive design | Adaptive design | |
|---|---|---|
| Mise en page | Une mise en page fluide qui change aux breakpoints | Plusieurs mises en page fixes, une par type d’appareil |
| Entre deux tailles | S’étire progressivement | Saute à la mise en page fixe la plus proche |
| Détection de l’appareil | Inutile, le CSS réagit au viewport | Souvent par le user agent côté serveur |
| Maintenance | Un seul code | Plusieurs gabarits à synchroniser |
| Usage actuel | La quasi-totalité des sites | Quelques grands sites et applications aux besoins mobiles très différents |
En français, « site adaptatif » sert souvent à désigner un site responsive. La distinction utile porte sur le fond : mise en page fluide ou fixe, adaptation par le CSS ou par le serveur.
Comment on fait du responsive aujourd’hui
Le CSS moderne rend le responsive bien plus simple qu’en 2010 :
- La balise meta viewport indique au navigateur mobile d’utiliser la largeur de l’appareil. Sans elle, rien d’autre ne fonctionne. Voir la balise meta viewport.
- Flexbox et CSS Grid créent des mises en page qui passent à la ligne d’elles-mêmes.
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))produit une grille de cartes qui passe d’une à quatre colonnes sans aucune media query. - Les media queries modifient la mise en page à des largeurs choisies, et réagissent aussi à l’orientation, au mode sombre, à la réduction des animations et au type de saisie. Syntaxe et exemples : le guide des media queries CSS.
- Les container queries permettent à un composant de réagir à la largeur de son conteneur plutôt qu’à celle de l’écran : une même carte s’affiche correctement dans une barre latérale et dans la colonne principale.
- La typographie fluide avec
clamp()fait varier la taille des titres progressivement avec l’écran. - Les images responsive avec
srcsetetsizeslaissent le navigateur télécharger un fichier adapté à l’écran.
Des frameworks comme Tailwind CSS et Bootstrap regroupent ces techniques avec des breakpoints prédéfinis.
Exemples de patterns responsive
- Column drop : les colonnes passent l’une sous l’autre à mesure que l’écran se rétrécit.
- Navigation off-canvas : sur petit écran, le menu glisse depuis le côté quand on touche un bouton.
- Contenu prioritaire : sur mobile, l’action principale (recherche, « Réserver ») remonte en haut de page.
- Tableaux responsive : le tableau défile horizontalement dans son conteneur, ou chaque ligne devient une carte.
- Direction artistique : un autre cadrage de l’image sur mobile grâce à l’élément
<picture>.
Comment tester un site responsive
Testez à plusieurs largeurs, pas seulement « mobile » et « desktop ». Faites varier le viewport responsive dans Chrome DevTools pour repérer où la mise en page casse, puis vérifiez des appareils précis avec leur vrai user agent et leur densité de pixels. Un affichage mobile en un clic comme Mobile View Extension est pratique à cette étape : il montre la même page sur des modèles d’appareils sans ouvrir DevTools. Terminez sur de vrais téléphones. La méthode complète est détaillée dans comment tester un site responsive.
Questions fréquentes
Quel est l’objectif principal du responsive design ?
Offrir à chaque visiteur une page lisible et utilisable, avec le même contenu, quelle que soit la taille de son écran, à partir d’un seul code.
Responsive et mobile friendly, est-ce la même chose ?
Le responsive est une façon de rendre un site adapté au mobile, et la plus courante. Mais un site peut être responsive sans être agréable sur mobile, par exemple si ses boutons sont trop petits ou s’il charge lentement sur téléphone. Voir comment rendre un site responsive.
Qui a inventé le responsive web design ?
Ethan Marcotte a introduit le terme et l’approche en 2010, dans un article de A List Apart.