Un site responsive (on dit aussi « adaptatif ») est un site dont la mise en page s'ajuste automatiquement à la taille de l'écran : ordinateur, tablette ou smartphone. Le contenu et l'adresse restent les mêmes, seule la présentation change. C'est la méthode que Google recommande, d'autant qu'il indexe désormais tous les sites à partir de leur version mobile.
- Une seule adresse et un seul code HTML pour tous les écrans ; la feuille de style adapte l'affichage.
- Depuis juillet 2024, Google explore et indexe les sites avec son robot pour smartphone.
- Un site responsive doit aussi être rapide et lisible : texte suffisant, boutons faciles à toucher.
Comment fonctionne le responsive design
Le principe repose sur trois éléments :
- Une grille fluide, dont les colonnes se mesurent en proportions plutôt qu'en pixels fixes.
- Des images flexibles, qui ne dépassent jamais la largeur de l'écran.
- Des « media queries » en CSS, qui appliquent des règles différentes selon la largeur disponible : trois colonnes sur ordinateur, une seule sur téléphone.
Une ligne est indispensable dans l'en-tête de chaque page pour que le téléphone n'affiche pas une version de bureau réduite :
<meta name="viewport" content="width=device-width, initial-scale=1">Les thèmes récents des principaux CMS sont responsive par défaut. Les vieux sites, en revanche, ne le sont pas toujours.
Responsive, site mobile séparé ou affichage dynamique
| Méthode | Principe | Avis |
|---|---|---|
| Responsive | Même adresse, même HTML, CSS adaptatif. | Recommandée par Google, la plus simple à maintenir. |
| Affichage dynamique | Même adresse, HTML différent selon l'appareil. | Possible, mais source d'erreurs. |
| Site mobile séparé (m.exemple.fr) | Deux adresses, deux versions. | Déconseillée : doublons, redirections et oublis fréquents. |
Pourquoi c'est important pour Google
Google utilise la version mobile d'un site pour l'indexer et le classer : c'est l'indexation « mobile first ». La transition s'est achevée en juillet 2024 ; depuis, un site inaccessible sur mobile risque de ne plus être indexé. Avec un site responsive, la version mobile et la version ordinateur ont le même contenu, ce qui évite les mauvaises surprises.
Le responsive ne suffit pas toujours. Google tient compte de l'expérience sur la page, notamment des Core Web Vitals : vitesse d'affichage du contenu principal, réactivité aux actions et stabilité de la mise en page. Un site adaptatif mais très lent sur téléphone reste pénalisé dans l'esprit des visiteurs, et souvent dans les résultats. Notre guide votre site est-il adapté au mobile ? détaille les vérifications.
Les erreurs mobiles les plus fréquentes
- Du texte trop petit qui oblige à zoomer.
- Des boutons et liens trop proches les uns des autres.
- Un tableau ou une image qui dépasse et crée un défilement horizontal.
- Une fenêtre surgissante qui masque tout le contenu dès l'arrivée.
- Du contenu retiré de la version mobile « pour alléger » : Google ne le voit alors plus du tout.
- Des images très lourdes, non adaptées aux petits écrans.
Un électricien constate que la plupart de ses visites viennent du téléphone, mais que son numéro n'apparaît qu'en bas de page, en petit. En le plaçant en haut, sous forme de bouton cliquable, il facilite les appels sans rien changer au reste du site.
Et pour les IA ?
Les robots des assistants IA ne regardent pas la mise en page : ils lisent le code. Un bon responsive est donc neutre pour eux, à une condition. Le contenu doit être présent dans le HTML, et non chargé uniquement par JavaScript ou masqué selon l'appareil, car plusieurs robots d'IA ne rendent pas toujours le JavaScript. Une structure claire, avec de vrais titres et des tableaux en HTML, profite à la fois au lecteur sur mobile et aux IA ; voir écrire pour les IA.
Questions fréquentes
Comment savoir si mon site est responsive ?
Ouvrez-le sur votre téléphone, puis réduisez la fenêtre de votre navigateur sur ordinateur. Si la mise en page se réorganise sans défilement horizontal, c'est bon signe. Les outils de développement du navigateur proposent aussi une simulation d'appareils.
Un site non responsive peut-il encore se positionner ?
Oui, s'il reste lisible et accessible sur mobile, mais il part avec un handicap. S'il est inaccessible sur téléphone, il risque de ne plus être indexé du tout.
Faut-il une application mobile en plus du site ?
Pour le référencement, non. Une application ne remplace pas un site responsive, qui reste la porte d'entrée depuis Google et depuis les IA.