À retenir
- Une seule adresse URL pour tous les appareils.
- Repose principalement sur les Media Queries en CSS.
- Crucial pour l'expérience utilisateur et la visibilité sur les moteurs de recherche.
Un site web réactif est une interface qui s'adapte automatiquement à la taille de l'écran utilisé, que ce soit un smartphone, une tablette ou un ordinateur de bureau. Imaginez que le contenu du site soit comme du liquide : il change de forme pour remplir parfaitement son récipient (l'écran) sans que l'utilisateur n'ait besoin de zoomer ou de déplacer la page horizontalement.
Étymologie
Traduction de l'anglais Responsive Web Design (RWD). Le terme a été popularisé vers 2010 pour désigner des sites capables de « répondre » (réagir) aux contraintes techniques du matériel de consultation, notamment avec l'essor des terminaux mobiles.
Exemples d'usage
- Un menu de navigation horizontal sur ordinateur qui se transforme en icône « burger » (trois petites barres) sur un téléphone.
- Une grille de produits qui affiche quatre colonnes sur un grand écran, mais passe à une seule colonne verticale sur un écran étroit.
Cas d'usage
Ce concept est devenu la norme par défaut pour tout projet web moderne. Il intervient dans le développement front-end pour garantir que les sites de e-commerce, les blogs ou les applications web soient parfaitement utilisables partout, tout en optimisant le référencement naturel (SEO).
Bonnes pratiques
Il est recommandé d'utiliser des unités de mesure relatives (pourcentages, em, rem, vw) plutôt que des pixels fixes. La stratégie du « Mobile First » consiste à concevoir d'abord la version pour smartphone avant de l'enrichir pour les écrans plus larges.
Synonymes
Antonymes
Conseil
Pour tester votre travail, utilisez les outils de développement de votre navigateur (touche F12) : ils permettent de simuler la vue de n'importe quel modèle de smartphone directement sur votre ordinateur.
Questions fréquentes
Quelle est la différence entre réactif et adaptatif ?
Un site réactif est fluide et s'ajuste de façon continue à toutes les largeurs, tandis qu'un site adaptatif propose quelques mises en page fixes qui changent par paliers selon l'appareil.
Est-ce que cela remplace une application mobile ?
Souvent oui pour des besoins simples, car cela évite à l'utilisateur de devoir télécharger quoi que ce soit sur un store.