À retenir
- Une seule adresse URL et un seul code source pour tous les supports.
- Utilise principalement les Media Queries en langage CSS pour détecter la largeur de l'écran.
- Essentiel pour l'expérience utilisateur et le classement Google (Mobile-friendly).
Un site web adaptatif est un site conçu pour s'ajuster automatiquement à la taille de l'écran utilisé. Imaginez que le contenu du site soit comme de l'eau : il prend la forme du récipient (smartphone, tablette ou ordinateur) pour rester toujours lisible sans avoir à zoomer manuellement.
Étymologie
Traduction de l'anglais Responsive Web Design (RWD), le terme combine « site web » avec l'adjectif « adaptatif », soulignant la capacité technique du code à réagir à son environnement de consultation. Le concept a été popularisé par Ethan Marcotte en 2010.
Exemples d'usage
- Un journal en ligne dont les colonnes d'articles se superposent verticalement sur mobile au lieu d'être côte à côte.
- Un menu de navigation qui se transforme en icône « hamburger » (trois petites barres) sur un petit écran.
- Des images qui rétrécissent proportionnellement pour ne pas dépasser de la largeur du téléphone.
Cas d'usage
Ce concept est devenu la norme dans tout développement web moderne. Il intervient dès la phase de design (UI/UX) et se concrétise lors de l'intégration CSS pour garantir que le site soit utilisable partout, tout en favorisant un bon référencement sur les moteurs de recherche.
Bonnes pratiques
Il est recommandé d'utiliser la méthode Mobile First (concevoir pour le plus petit écran d'abord). Il faut privilégier les unités de mesure relatives (comme les pourcentages ou les em/rem) plutôt que des pixels fixes, et tester régulièrement le rendu sur différents appareils réels.
Synonymes
Antonymes
Conseil
Pour tester votre site, utilisez l'outil d'inspection de votre navigateur (touche F12) et cliquez sur l'icône de simulation de périphériques mobiles. Cela vous permet de voir instantanément comment votre mise en page réagit en modifiant la largeur de la fenêtre.
Questions fréquentes
Quelle est la différence entre adaptatif et réactif ?
En français, les deux termes sont souvent utilisés comme synonymes de 'responsive'. Techniquement, l'adaptatif peut parfois désigner des mises en page prédéfinies pour des tailles spécifiques, tandis que le réactif est fluide à chaque pixel près.
Est-ce que cela remplace une application mobile ?
Pas forcément, mais un site bien adaptatif permet souvent d'éviter le coût de développement d'une application dédiée si l'objectif est simplement de consulter du contenu.