WordPress responsive : adapter son site au mobile

Comment rendre un site WordPress vraiment adapté aux mobiles : tests actuels, réglages de la version mobile, choix du thème et corrections des problèmes fréquents. Avec les exigences de Google depuis l'indexation mobile first.

Un site WordPress responsive adapte automatiquement sa mise en page à la largeur de l’écran (smartphone, tablette, ordinateur) grâce à la balise viewport et aux media queries CSS de son thème. Pour l’obtenir, il faut un thème responsive à jour, puis vérifier les images, le menu, les tableaux, les plugins, les pop-ups et la vitesse sur mobile. C’est indispensable : depuis juillet 2024, Google indexe tous les sites à partir de leur version mobile.

Ce guide explique ce que recouvre vraiment le « responsive » sur WordPress, comment tester votre site maintenant que l’ancien test mobile de Google a disparu, comment afficher et modifier la version mobile dans l’administration, quel thème choisir et comment corriger les problèmes les plus fréquents, avec le code CSS utile quand il le faut.

Qu’est-ce qu’un site WordPress responsive ?
Pourquoi un site WordPress doit-il être responsive ?
Comment tester si votre site WordPress est responsive ?
Comment afficher et modifier la version mobile dans WordPress ?
Quel thème WordPress choisir pour un site responsive ?
Comment corriger les problèmes d’affichage mobile les plus fréquents ?
Les plugins peuvent-ils casser le responsive ?
Pop-ups et bannières : que tolère Google sur mobile ?
Comment gérer les images et les médias sur mobile ?
Comment rendre un site WordPress rapide sur mobile ?
Quelles erreurs éviter ?
Questions fréquentes
Sources

Qu’est-ce qu’un site WordPress responsive ?

Responsive design (conception adaptative) : une seule version du site, servie à la même adresse pour tous les appareils, dont la mise en page se réorganise selon la largeur de l’écran. Les colonnes s’empilent, le menu se replie, les images se redimensionnent, sans que le contenu change.

Techniquement, deux éléments font le travail. La balise viewport, placée dans l’en-tête de chaque page, demande au navigateur mobile d’utiliser la largeur réelle de l’écran au lieu de simuler un écran d’ordinateur. Les media queries CSS appliquent ensuite des règles différentes selon la largeur disponible. Sur WordPress, c’est le thème qui fournit ces deux éléments : si le thème n’est pas responsive, aucun réglage de l’administration ne le rendra vraiment adapté aux mobiles.

<meta name="viewport" content="width=device-width, initial-scale=1">

/* Exemple de media query : deux colonnes sur grand écran, une sur mobile */
.colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 781px) {
  .colonnes { grid-template-columns: 1fr; }
}

Il existe deux autres approches, plus anciennes : une version mobile séparée (souvent sur un sous-domaine du type m.monsite.fr) et un thème différent servi aux mobiles par un plugin. Google les accepte encore, mais recommande explicitement le responsive, parce que c’est le plus simple à mettre en place et à maintenir : une seule adresse, un seul contenu, un seul thème.

Depuis l’arrivée de l’éditeur de blocs Gutenberg (WordPress 5.0), les blocs natifs (colonnes, images, galeries, boutons) sont eux aussi conçus pour s’adapter aux petits écrans. Cela ne dispense pas de vérifier le rendu : un bloc responsive placé dans un thème mal conçu peut toujours déborder.

Pourquoi un site WordPress doit-il être responsive ?

Pour deux raisons : vos visiteurs et Google.

Vos visiteurs. Selon StatCounter, en août 2026 en France, 44,6 % des pages vues sur le web venaient d’un smartphone, 53 % d’un ordinateur et 2,4 % d’une tablette. Ces chiffres varient énormément selon le secteur : un restaurant, un artisan ou une boutique de mode voient souvent une majorité de visites mobiles, un logiciel B2B beaucoup moins. Regardez la répartition réelle dans vos statistiques, mais retenez qu’une grosse partie de vos visiteurs, voire la majorité, découvre votre site sur un petit écran. S’il est illisible, ils repartent.

Google. En 2015, Google a commencé à favoriser les pages adaptées aux mobiles dans ses résultats sur mobile. Puis il a basculé progressivement vers l’indexation mobile d’abord (mobile-first indexing) : Google explore et évalue votre site avec son robot pour smartphone. Cette bascule est terminée depuis le 5 juillet 2024 pour tous les sites. Conséquence directe : ce qui n’existe pas ou ne s’affiche pas sur la version mobile n’existe pas pour Google. Les signaux Core Web Vitals, mesurés en grande partie sur mobile, sont aussi utilisés par ses systèmes de classement.

Pour les aspects purement référencement, nous avons un article dédié au référencement mobile. Ici, on se concentre sur ce qu’il faut faire dans WordPress.

Comment tester si votre site WordPress est responsive ?

Pendant des années, le réflexe était l’outil « Test d’optimisation mobile » de Google, qui affichait un verdict simple, compatible ou non. Google l’a retiré le 1er décembre 2023, avec le rapport « Ergonomie mobile » de la Search Console et l’API associée. Si vous tombez sur un tutoriel qui vous y envoie, il est périmé.

WordPress Responsive : Comment adapter votre site ?

Voici comment tester aujourd’hui, du plus rapide au plus fiable :

Le mode appareil de Chrome. Sur votre site, faites clic droit, « Inspecter », puis cliquez sur l’icône représentant un téléphone et une tablette (ou Ctrl+Maj+M, Cmd+Maj+M sur Mac). Choisissez plusieurs modèles et faites varier la largeur à la main : les problèmes apparaissent souvent entre deux tailles « standard ».
Lighthouse et PageSpeed Insights. C’est l’outil que Google conseille à la place de l’ancien test. PageSpeed Insights (pagespeed.web.dev) affiche à la fois des mesures de laboratoire et, si votre site a assez de trafic, les données réelles des utilisateurs de Chrome. Lighthouse signale aussi des problèmes d’affichage mobile (balise viewport absente, textes trop petits, contenu plus large que l’écran).
La Search Console. Le rapport « Signaux Web essentiels » classe vos URL en bonnes, à améliorer ou lentes, séparément pour mobile et ordinateur. Vous y voyez l’effet réel sur vos visiteurs, page par page.
De vrais téléphones. Aucun simulateur ne remplace un test sur un iPhone et un Android, en 4G, avec le doigt. C’est là qu’on voit le bouton trop petit, le menu qui ne se ferme pas ou le formulaire où le clavier cache le champ.

Testez au minimum la page d’accueil, une page de service ou de produit, un article, la page contact et le tunnel de commande si vous vendez en ligne : ce sont les gabarits qui comptent.

Comment afficher et modifier la version mobile dans WordPress ?

Tout dépend du type de thème que vous utilisez.

Avec un thème classique : l’outil de personnalisation

Allez dans « Apparence », puis « Personnaliser ». En bas du panneau de gauche, trois icônes (ordinateur, tablette, mobile) basculent l’aperçu entre les différentes tailles d’écran. Vous modifiez les réglages proposés par votre thème (logo, menu, couleurs, widgets) et voyez immédiatement le résultat sur mobile avant de publier.

Avec un thème à blocs : l’éditeur de site

Les thèmes à blocs (comme les thèmes par défaut récents de WordPress) n’utilisent plus l’outil de personnalisation mais l’éditeur de site (« Apparence », puis « Éditeur »). Dans l’éditeur, comme dans celui des pages et articles, un sélecteur d’aperçu en haut de l’écran permet de passer en vue ordinateur, tablette ou mobile. Vous voyez le rendu, mais les réglages natifs par appareil restent limités : pour masquer un bloc sur mobile ou changer un espacement uniquement sur petit écran, il faut souvent du CSS ou une extension.

Avec un constructeur de pages

Les constructeurs comme Elementor ou Divi ont leur propre mode responsive : on passe en vue tablette ou mobile dans l’éditeur, et on peut régler taille de texte, marges, alignement ou visibilité séparément pour chaque appareil. C’est pratique, mais c’est aussi la source de nombreux problèmes : des réglages « desktop » figés en pixels qui n’ont jamais été vérifiés sur mobile. Si vous hésitez entre ces outils, notre comparatif Gutenberg ou page builder vous aidera.

Dans tous les cas, l’aperçu de l’administration reste une simulation : validez toujours sur le site publié et sur un vrai téléphone.

Quel thème WordPress choisir pour un site responsive ?

Si votre thème a été installé récemment, il y a de fortes chances qu’il soit déjà responsive : c’est devenu la norme, et il est plus rare de trouver un thème qui ne l’est pas. Le problème vient plutôt des thèmes anciens, plus mis à jour, ou fortement modifiés au fil des années.

Commencez par le plus simple : mettez à jour WordPress, votre thème et vos extensions (sur une copie de test si le site est important). Une mise à jour corrige parfois à elle seule des défauts d’affichage mobile. Si ce n’est pas le cas, deux options : changer de thème ou faire développer le vôtre.

Choisir un thème existant adapté aux mobiles

Avant d’installer ou d’acheter un thème :

Ouvrez sa démo sur votre téléphone, pas seulement sur votre ordinateur, et faites varier la largeur de la fenêtre de votre navigateur.
Passez la démo dans PageSpeed Insights : un thème déjà lent en démonstration le sera encore plus avec votre contenu.
Vérifiez la date de dernière mise à jour et la compatibilité annoncée avec la version actuelle de WordPress.
Lisez les avis d’utilisateurs réels, notamment sur le support.
Testez-le avec votre propre contenu : un titre long, un tableau, un formulaire. Les démos sont conçues pour être belles, pas pour vos textes.

Si quelque chose ne va pas sur mobile, passez à un autre thème : le responsive est un critère trop important pour faire l’impasse, et le choix est immense. Pour peser le pour et le contre entre thème acheté et thème développé, voyez notre article thème WordPress personnalisé ou modèle acheté.

Créer ou adapter votre propre thème responsive

Si vous partez sur un développement, ne touchez jamais au site en ligne. Travaillez en local (avec MAMP, LocalWP ou un équivalent) ou sur un serveur de préproduction, où vous pouvez importer une copie de votre site et tout casser sans conséquence.

Un thème enfant basé sur un thème parent déjà responsive fait gagner beaucoup de temps et survit aux mises à jour du parent. Si vous partez d’une page blanche, pensez « mobile d’abord » : écrivez les styles pour le petit écran, puis ajoutez des media queries pour élargir. Posez-vous les bonnes questions élément par élément : comment les images doivent-elles se redimensionner, à quoi doit ressembler la navigation, quels blocs doivent s’empiler ou changer d’ordre ?

Si vous n’avez pas les compétences en interne, c’est typiquement le travail d’une agence WordPress : on reprend votre thème ou on en développe un sur une base propre, testée sur mobile dès la conception.

Comment corriger les problèmes d’affichage mobile les plus fréquents ?

Les mêmes défauts reviennent sur la plupart des sites WordPress que l’on audite. Voici les principaux et leur correction. Le CSS s’ajoute dans « Apparence », « Personnaliser », « CSS additionnel » (thème classique), dans les styles de l’éditeur de site (thème à blocs), ou mieux, dans un thème enfant.

La page défile horizontalement

Un élément est plus large que l’écran : une image, une vidéo intégrée, un tableau ou un bloc avec une largeur fixe en pixels. Repérez-le dans le mode appareil de Chrome (l’élément qui dépasse à droite), puis limitez sa largeur :

img, video, iframe { max-width: 100%; height: auto; }

/* Tableaux larges : défilement dans leur cadre plutôt que toute la page */
.wp-block-table { overflow-x: auto; }

Le texte est trop petit ou trop gros

Un texte courant sous 16 pixels devient pénible à lire sur téléphone ; à l’inverse, un grand titre réglé pour l’ordinateur peut occuper tout l’écran mobile et se couper mot par mot. Réglez les tailles de titres par appareil dans votre constructeur, ou utilisez des tailles fluides en CSS (fonction clamp()), que les thèmes à blocs récents gèrent déjà via leur fichier theme.json.

Les boutons et liens sont difficiles à toucher

Sur mobile, on clique avec le doigt. Les règles d’accessibilité WCAG 2.2 demandent des cibles d’au moins 24 × 24 pixels CSS (ou un espacement suffisant autour) au niveau AA ; en pratique, visez plus grand pour les boutons principaux et espacez les liens de menu. Pour aller plus loin, référez-vous au critère 2.5.8 des WCAG 2.2 cité en sources.

Le menu est inutilisable

Un menu à six entrées et sous-menus ne tient pas sur une ligne mobile. Le thème doit le replier dans un menu « hamburger » qui s’ouvre au toucher, avec des sous-menus accessibles sans survol (le survol n’existe pas au doigt). Dans un thème à blocs, le bloc Navigation propose ce comportement nativement. Vérifiez que le menu se ferme, que la page ne défile pas derrière et que le numéro de téléphone ou le bouton de contact reste visible.

Du contenu est masqué sur mobile

Beaucoup de constructeurs permettent de cacher un bloc sur mobile pour alléger la page. Attention : Google demande que la version mobile contienne le même contenu que la version ordinateur, puisque c’est elle qu’il indexe. Masquer un paragraphe de texte ou une section importante sur mobile peut vous faire perdre du trafic. Réorganisez, repliez dans un accordéon, mais ne supprimez pas le contenu utile.

Les plugins peuvent-ils casser le responsive ?

Oui. Beaucoup d’extensions n’ajoutent rien de visible, mais celles qui affichent quelque chose (formulaire, slider, widget d’avis, bouton de chat, calendrier de réservation, carte) injectent leur propre code et leurs propres styles. Un widget de barre latérale parfait sur ordinateur peut écraser tout l’écran d’un téléphone s’il ne se réduit pas.

Avant d’installer une extension visible, regardez sa démo sur mobile et les avis.
Après chaque activation, faites un contrôle rapide sur téléphone des pages concernées.
Vérifiez qu’elle permet de désactiver ou d’adapter l’élément sur petit écran.
Faites régulièrement l’inventaire : désactivez puis supprimez les extensions qui ne servent plus.

Il existe encore des extensions qui servent un thème mobile distinct à la place de votre thème (WPtouch en est l’exemple le plus connu, toujours maintenu). Cette approche date de l’époque où les thèmes n’étaient pas responsive. Aujourd’hui, elle crée deux designs à maintenir et risque des écarts de contenu entre mobile et ordinateur. On la réserve à un site ancien qu’on ne peut pas refaire tout de suite, en attendant une refonte.

Pop-ups et bannières : que tolère Google sur mobile ?

Les formulaires d’inscription intégrés à la page fonctionnent très bien sur mobile, à condition d’être simples. Les fenêtres pop-up qui recouvrent tout le contenu sont une autre histoire. Depuis janvier 2017, Google pénalise dans ses résultats mobiles les pages qui affichent des interstitiels intrusifs : une fenêtre qui masque le contenu principal dès l’arrivée ou pendant la lecture, qu’il faut fermer avant de lire, ou un encart qui repousse le contenu sous la ligne de flottaison. Son guide actuel sur l’expérience de page continue de demander d’éviter les interstitiels qui rendent le contenu moins accessible.

Ne sont pas visés, selon Google : les fenêtres liées à une obligation légale (bandeau cookies, vérification d’âge), les écrans de connexion pour un contenu réservé, et les bannières qui n’occupent qu’une part raisonnable de l’écran et se ferment facilement. Dans WordPress, la plupart des extensions de pop-up permettent de désactiver l’affichage sur mobile ou de le remplacer par une barre discrète : c’est le réglage à faire. Et vérifiez que le bandeau cookies lui-même reste lisible et que ses boutons sont faciles à toucher.

Comment gérer les images et les médias sur mobile ?

Les images sont en général les fichiers les plus lourds d’une page, et une grande image de fond superbe sur ordinateur peut perdre tout son sens une fois recadrée sur téléphone. Première règle : pensez à la façon dont chaque visuel va se redimensionner et se recadrer. Ensuite, profitez de ce que WordPress fait déjà pour vous :

Images responsives natives (depuis WordPress 4.4). WordPress génère plusieurs tailles de chaque image téléversée et ajoute les attributs srcset et sizes : le téléphone télécharge une version plus petite que l’ordinateur. Cela ne fonctionne bien que si vous insérez les images via la médiathèque, pas en collant une URL de fichier géant.
Chargement différé natif (depuis WordPress 5.5). WordPress ajoute loading="lazy" aux images, qui ne se chargent qu’à l’approche du défilement. Évitez en revanche de différer l’image principale en haut de page, qui doit s’afficher au plus vite.
Formats modernes. WordPress accepte le WebP depuis la version 5.8 et l’AVIF depuis la version 6.5 (si votre hébergement les prend en charge). D’après l’équipe de WordPress, le WebP pèse en moyenne environ 30 % de moins que le JPEG ou le PNG équivalent.
Vidéos. Hébergez-les sur YouTube ou Vimeo et intégrez-les avec le bloc Intégrer, qui propose l’option de redimensionnement pour les petits écrans, plutôt que de téléverser un fichier lourd dans la médiathèque.

Avant téléversement, redimensionnez vos photos à une largeur raisonnable (1 920 pixels suffisent pour une image pleine largeur) et compressez-les. Une extension d’optimisation peut automatiser la conversion en WebP pour les images déjà en ligne.

Comment rendre un site WordPress rapide sur mobile ?

Un site peut être parfaitement responsive et pourtant pénible sur mobile parce qu’il est lent : un téléphone a moins de puissance qu’un ordinateur et sa connexion est moins stable. Google mesure cette expérience avec les Core Web Vitals, qu’il utilise dans ses systèmes de classement :

Indicateur	Ce qu’il mesure	Seuil « bon »
LCP (Largest Contentful Paint)	Temps d’affichage du plus grand élément visible	2,5 secondes ou moins
INP (Interaction to Next Paint)	Réactivité aux clics et touchers ; il a remplacé le FID le 12 mars 2024	200 millisecondes ou moins
CLS (Cumulative Layout Shift)	Stabilité visuelle, les éléments qui bougent pendant le chargement	0,1 ou moins

Les leviers, par ordre d’impact habituel sur un site WordPress :

L’hébergement. Un serveur récent avec une version de PHP à jour, un cache serveur et idéalement un CDN fait plus que n’importe quelle extension.
Le cache de pages. Une extension de cache (ou le cache de votre hébergeur) sert des pages déjà construites au lieu de solliciter PHP et la base de données à chaque visite.
Les images, voir la section précédente.
Le ménage dans les extensions et scripts. Chaque extension qui charge ses fichiers sur toutes les pages alourdit le mobile. Supprimez celles qui ne servent plus, limitez les scripts tiers (chat, pixels publicitaires, widgets sociaux).
Le code du thème. Minification et regroupement des CSS et JavaScript, polices limitées à deux familles et quelques graisses, dimensions indiquées sur les images pour éviter les décalages (CLS).

Pour comprendre chaque indicateur en détail, lisez notre article sur les Core Web Vitals. Et comme la vitesse se dégrade avec le temps (nouvelles extensions, mises à jour, contenus plus lourds), elle se surveille : c’est l’un des rôles d’une maintenance WordPress régulière.

Quelles erreurs éviter ?

Ne tester que sur son propre téléphone. Votre modèle n’est pas celui de vos clients. Testez plusieurs largeurs et au moins un iPhone et un Android.
Valider dans l’aperçu de l’administration. C’est une simulation ; le site publié, avec son cache et ses scripts, peut se comporter autrement.
Supprimer du contenu sur mobile pour gagner de la place. Google indexe la version mobile : ce qui n’y est pas n’est pas indexé.
Figer des largeurs en pixels dans un constructeur de pages ou dans le CSS.
Accumuler les extensions pour corriger chaque problème au lieu de régler la cause dans le thème.
Oublier les formulaires. Champs trop nombreux, clavier inadapté (utilisez les types email et tel pour faire apparaître le bon clavier), bouton d’envoi hors de portée : c’est souvent là que se perdent les demandes de contact.
Modifier le site en production sans copie de sauvegarde ni environnement de test.

Un site WordPress responsive n’est pas une case à cocher une fois pour toutes : c’est un thème adapté, des contenus pensés pour le petit écran et une vérification à chaque évolution du site. Si votre site actuel accumule les défauts sur mobile, une remise à plat du thème coûte souvent moins cher, à terme, que des correctifs successifs. Nos sites vitrines WordPress sont conçus sur une base responsive testée sur mobile dès le départ, avec un budget qui dépend du projet : voir nos tarifs indicatifs.

Questions fréquentes

Comment savoir si mon thème WordPress est responsive ?

Ouvrez votre site sur un téléphone et dans le mode appareil de Chrome en faisant varier la largeur. Si la mise en page se réorganise (colonnes empilées, menu replié) sans défilement horizontal, le thème est responsive. Lighthouse signale aussi l’absence de balise viewport ou un contenu plus large que l’écran.

Le test d’optimisation mobile de Google existe-t-il encore ?

Non. Google l’a retiré le 1er décembre 2023, avec le rapport Ergonomie mobile de la Search Console. Il conseille d’utiliser Lighthouse, disponible dans Chrome et via PageSpeed Insights.

Peut-on avoir un contenu différent sur mobile et sur ordinateur ?

On peut adapter la présentation (ordre, accordéons, images recadrées), mais Google demande que le contenu soit le même, puisqu’il indexe la version mobile. Retirer du texte sur mobile revient à le retirer pour Google.

Faut-il une application mobile en plus d’un site responsive ?

Pour la plupart des entreprises, non : un site responsive rapide suffit. Une application se justifie quand les clients reviennent très souvent et ont besoin de fonctions propres au téléphone (notifications, usage hors connexion, accès à l’appareil photo).

Combien coûte la mise en responsive d’un site WordPress ?

Cela dépend de l’état du thème : quelques corrections CSS sur un thème récent, ou un changement de thème, voire une refonte, sur un site ancien. Chez Osmova, le budget d’une refonte ou d’un site vitrine WordPress dépend du projet (voir nos tarifs indicatifs) ; un diagnostic permet de trancher entre correctifs et refonte.

WordPress responsive : comment adapter un site WordPress pour mobile ?

Qu’est-ce qu’un site WordPress responsive ?

Pourquoi un site WordPress doit-il être responsive ?

Comment tester si votre site WordPress est responsive ?

Comment afficher et modifier la version mobile dans WordPress ?

Avec un thème classique : l’outil de personnalisation