Le responsive web design est une méthode de conception et d’intégration web qui permet à une même page, servie à la même adresse avec le même code, d’adapter sa mise en page à la taille de l’écran qui l’affiche.
Le mécanisme repose sur les feuilles de style. Le code HTML reste identique pour tous les appareils. Ce sont les règles de présentation qui changent selon les caractéristiques de l’écran, en particulier sa largeur. Les valeurs à partir desquelles la mise en page se réorganise sont appelées points de rupture : une grille de trois colonnes sur grand écran peut ainsi passer à une seule colonne sur un téléphone.
Trois composantes sont classiquement décrites : une grille fluide, dont les dimensions s’expriment en proportions plutôt qu’en pixels fixes ; des images flexibles, qui se redimensionnent dans leur conteneur ; des requêtes média, qui appliquent des règles de style selon les caractéristiques de l’appareil. La balise viewport indique en outre au navigateur mobile d’utiliser la largeur réelle de l’écran.
Le responsive web design se distingue du site mobile séparé, qui sert un code différent à une autre adresse, et de la diffusion dynamique, qui sert un code différent à la même adresse selon l’appareil détecté. Il diffère aussi de la démarche « mobile d’abord », qui désigne un ordre de conception et non une technique. Il se distingue enfin de la mise en page adaptative au sens strict, qui sert plusieurs versions du code préparées à l’avance pour des tailles d’écran données. Il concerne les équipes de conception, d’intégration et de référencement mobile lors de la création ou de la refonte d’un site.
L’expression vient de l’article « Responsive Web Design » d’Ethan Marcotte, publié par la revue en ligne A List Apart le 25 mai 2010. Il y décrit trois ingrédients : une grille fluide, des images flexibles et les requêtes média de CSS3. Ces requêtes sont normalisées par le W3C dans la recommandation « Media Queries Level 3 », dont la dernière version date de 2024.
Google Search Central recommande le responsive web design dans sa page « Mobile site and mobile-first indexing best practices ». Il le juge le plus simple à mettre en œuvre et à maintenir. La page précise qu’avec le responsive, le contenu et les métadonnées sont les mêmes sur mobile et sur ordinateur. Ses exigences de parité (même contenu, mêmes données structurées, titres et méta-descriptions équivalents) visent donc les deux autres configurations : la diffusion dynamique et les adresses séparées.
Côté accessibilité, les WCAG 2.1 comportent le critère 1.4.10 « Redistribution », de niveau AA (W3C, « Understanding Success Criterion 1.4.10: Reflow »). Il exige qu’un contenu à défilement vertical reste utilisable, sans perte d’information ni de fonctionnalité et sans défilement dans deux directions, à une largeur équivalente à 320 pixels CSS. Les contenus qui exigent une disposition en deux dimensions, comme certains tableaux, en sont exemptés. Une mise en page responsive bien construite répond en grande partie à cette exigence. Elle sert aussi les personnes qui agrandissent l’affichage.
Nous recommandons de comparer les résultats par type d’appareil plutôt qu’en moyenne : taux de réussite des tâches clés, taux de conversion et temps de chargement sur mobile. Un écart persistant entre mobile et ordinateur sur une même page peut signaler un problème de mise en page ou de poids. Comparez d’abord des tâches équivalentes pour écarter une différence d’intention entre les publics. Suivez aussi la part du trafic mobile : elle indique quelle version doit guider les arbitrages de conception.
Advalians assure l’assistance à maîtrise d’ouvrage de votre refonte, de l’évaluation des dispositifs existants au suivi des prestataires et du budget.
Advalians, cabinet de conseil indépendant en marketing et communication, vous aide à clarifier vos choix et à décider.
Un site responsive sert le même code à la même adresse et adapte seulement la présentation à l’écran. Un site mobile dédié sert un code différent, souvent à une autre adresse. Il doit donc être produit, mis à jour et référencé en parallèle du site principal.
Critère de choix : si les contenus et les tâches sont les mêmes sur tous les écrans, le responsive suffit et coûte moins à maintenir. Un site dédié ne se justifie que si l’usage mobile diffère profondément, et à condition de garantir un contenu équivalent sur les deux versions.
Placez-les là où la mise en page se dégrade, pas d’après des modèles de téléphones. Partez du plus petit écran, élargissez progressivement la fenêtre et notez la largeur à laquelle une ligne devient trop longue, une image trop petite ou une colonne trop étroite.
Trois ou quatre points suffisent le plus souvent pour un site éditorial ; une interface riche en tableaux peut en demander davantage. Documentez-les dans la charte de conception pour que tous les gabarits du site les respectent.
Testez sur des appareils réels, au moins un petit téléphone, un grand téléphone et une tablette, en plus des simulateurs du navigateur. Sur chacun, réalisez les tâches clés du site : trouver une information, remplir un formulaire, finaliser une commande.
Vérifiez aussi l’affichage à une largeur de 320 pixels CSS et avec un zoom élevé, sans défilement horizontal. Comparez enfin, dans vos statistiques de visite, le taux de conversion par type d’appareil sur les pages clés.
La plus coûteuse consiste à retirer de la version mobile des contenus présents sur ordinateur, par exemple en ne les chargeant pas sur petit écran. Les moteurs de recherche indexent en priorité la version mobile : ces contenus risquent alors de ne pas être pris en compte. Pour gagner de la place, préférez les replier dans des onglets ou des accordéons. Viennent ensuite les images trop lourdes simplement réduites à l’affichage, qui ralentissent les pages, et les zones tactiles trop petites ou trop proches.
Avant chaque mise en ligne, contrôlez la parité des contenus entre les versions, le poids des pages mobiles et la taille des boutons sur un vrai téléphone.
L’application se justifie quand l’usage est fréquent, personnel et dépend de fonctions de l’appareil : notifications, mode hors ligne, appareil photo, géolocalisation continue. Elle suppose un budget de développement et de maintenance distinct, et un effort pour la faire installer.
Pour un usage ponctuel, comme découvrir une offre, lire un contenu ou passer une commande occasionnelle, un site responsive reste le choix le plus sûr. Avant de décider, mesurez la part de visiteurs récurrents : elle indique si une application trouvera son public dans votre stratégie de marketing mobile.
