Qu'est-ce que le responsive design
Un site responsive utilise des règles CSS (les media queries) pour adapter sa mise en page à la largeur de l'écran qui l'affiche. Sur un grand écran, on peut avoir une grille de trois colonnes. Sur mobile, ces trois colonnes s'empilent en une seule. Le contenu reste le même, seule la présentation change.
C'est la méthode recommandée par Google depuis 2012, et aujourd'hui la norme sur la quasi-totalité des sites bien construits. Les alternatives historiques (site dédié mobile sur un sous-domaine (m.monsite.com) ou affichage dynamique selon le User-Agent) sont des approches plus complexes à maintenir et moins efficaces pour le SEO.
Le lien avec le Mobile-First Indexing
En 2019, Google a officiellement basculé vers le Mobile-First Indexing : c'est la version mobile d'un site qui sert de référence pour l'indexation et le classement, pas la version desktop. Concrètement, si votre version mobile est incomplète, plus lente ou appauvrie par rapport à la version desktop, c'est cette version dégradée que Google utilise pour évaluer votre site.
Ce que ça change en pratique
Avant le Mobile-First Indexing, vous pouviez avoir un site desktop excellent et une version mobile médiocre sans trop en souffrir en SEO. Ce n'est plus le cas. La version mobile est maintenant la version principale aux yeux de Google.
Pourquoi c'est essentiel pour le SEO
| Aspect | Site responsive | Site non adapté mobile |
|---|---|---|
| Indexation Google | Version mobile utilisée comme référence, cohérente avec le desktop | Google indexe une version dégradée ou tronquée |
| Core Web Vitals | Mesurés sur mobile en priorité, optimisables via CSS/media queries | LCP et CLS souvent mauvais sur mobile non optimisé |
| Expérience utilisateur | Navigation fluide, texte lisible, boutons cliquables | Zoom forcé, liens trop proches, texte illisible |
| Taux de rebond | Stable, visiteurs restent | Élevé, visiteurs repartent immédiatement |
| URL unique | Une seule URL pour desktop et mobile | Deux URLs distinctes = risque de duplicate content |
Ce que Google vérifie
L'outil Google "Test d'optimisation mobile" (disponible dans la Search Console ou via search.google.com/test/mobile-friendly) analyse plusieurs points :
- Viewport configuré : la balise
<meta name="viewport">doit être présente dans le<head> - Texte lisible sans zoom : taille de police minimum 12-14px
- Éléments interactifs suffisamment espacés : les boutons et liens doivent être cliquables sans grossissement
- Pas de contenu plus large que l'écran : pas de défilement horizontal involontaire
- Pas de Flash : non supporté sur la plupart des mobiles
Responsive vs autres approches
Il existe trois façons de gérer la version mobile d'un site :
- Responsive design (recommandé) : une seule URL, une seule codebase, adaptation via CSS. Le plus simple à maintenir et le meilleur pour le SEO.
- Site dédié mobile (m.monsite.com) : deux sites séparés, deux URLs, risque de contenu dupliqué, redirection conditionnelle complexe. À éviter sur les nouveaux projets.
- Affichage dynamique (Dynamic Serving) : même URL, mais HTML différent selon le User-Agent. Requiert une gestion rigoureuse de la balise Vary et peut poser des problèmes de crawl.
Vérifier si son site est responsive
Le plus simple : ouvrir le site sur un smartphone, ou utiliser les DevTools du navigateur (F12 sur Chrome, puis icône mobile) pour simuler différentes résolutions. La Search Console signale aussi les problèmes d'ergonomie mobile dans son rapport "Ergonomie mobile".