Vous venez (ENFIN !) de finir votre site. Il est beau. Vous êtes fièr·e et vous avez raison.
Vous l’ouvrez sur votre téléphone pour montrer votre oeuvres à vos collègues et là… le drame.
C’est pas du tout ce qui était prévu : le menu a disparu dans les limbes. Les images débordent de l’écran. Les boutons sont minuscules. Les textes se chevauchent. C’est illisible.
Bienvenue dans l’enfer du « site pas responsive ». 😱
Le truc, c’est qu’en 2025, 65% de vos visiteurs sont sur leur téléphone. Si votre site est moche sur mobile, ils repartent en 3 secondes. Et Google vous relègue tout au fond des résultats de recherche.
Alors avant de publier votre site (ou si vous voulez vérifier l’existant), pensez à tester l’affichage mobile de votre site.
Dans cet article, je vous montre 7 outils gratuits pour tester votre site sur mobile en ligne. Sans installer de logiciel. En 2 minutes chrono.
Bonus : Je vous explique aussi comment créer un site automatiquement responsive avec Divi (= plus besoin de tester 50 fois).
Dans cet article :
- ✅ Pourquoi tester l’affichage mobile est presque une OBLIGATION en 2025 ;
- ✅ 7 outils gratuits pour tester votre site (comparatif détaillé) ;
- ✅ Comment tester rapidement sur plusieurs tailles d’écran ;
- ✅ Les erreurs responsive les plus courantes (+ comment les corriger) ;
- ✅ La solution Divi : un site responsive automatiquement.
Prêt·e à vérifier votre site ? C’est parti ! 👇
** Note : Dans cet article, nous allons parler de logiciels.
Et il contient des liens affiliés vers des produits que j’utilise dans le cadre de mon travail : Divi **
Pourquoi tester l’affichage mobile de votre site ? (spoiler : c’est pas optionnel)
Je sais, tester son site sur 15 tailles d’écran différentes, c’est long (déjà, regarder votre propre site sur votre écran d’ordinateur, vous avez mieux à faire).
Voilà 4 raisons qui vont vous motiver :
1. Google vous pénalise si votre site n’est pas mobile-friendly
Depuis 2021, Google utilise le « mobile-first indexing ».
En français : les robots de Google regardent D’ABORD la version mobile de votre site pour décider si vous méritez d’être bien classé.
E si votre site est moche sur mobile ? Google vous dégrade sans pitié. Vos concurrents passent devant vous. Vous perdez du trafic.
2. 65% de vos visiteurs sont sur mobile (et ça augmente)
En 2025, les gens naviguent sur internet comme ça :
- 65% sur mobile (smartphone) ;
- 25% sur ordinateur (grand écran ou portable);
- 10% sur tablette ;
Si votre site n’est pas optimisé mobile, vous perdez 2 visiteurs sur 3.
Le calcul est simple (mais plus parlant) : si 1 000 personnes arrivent sur votre site, 650 le voient sur téléphone. Si c’est illisible, ils repartent. Vous perdez 650 clients potentiels.
3. Un site pas responsive = 53% de taux de rebond en plus
Étude Google (oui, encore) : 53% des visiteurs quittent un site qui met plus de 3 secondes à charger sur mobile.
Et devinez quoi ? Un site pas optimisé mobile est généralement plus lent (en plus d’être… pas très esthétique disons).
Résultat : Les gens cliquent, ils arrivent sur votre site qui met un temps infini à charger un contenu désordonné. Ils n’attendent même pas la suite.
4. Vos concurrents, eux, ont un site mobile nickel
Scénario catastrophe :
- Votre cliente potentielle cherche « décoratrice d’intérieur [votre ville] » sur son iPhone ;
- Elle trouve votre site + celui de votre concurrent ;
- Votre site : illisible sur mobile. Son site : impeccable.
- Devinez qui elle appelle ?
Dans ce match imaginaire, cous ne perdez pas parce que vous êtes moins compétente. Vous perdez parce que votre site ne vous fait pas honneur dans ce cas précis.
Vous l’aurez compris : tester l’affichage mobile n’est pas une option. C’est une étape par laquelle vous devez passer de temps en temps si vous voulez être trouvée, et surtout choisie.
Maintenant, voyons comment faire ça concrètement. 👇
7 outils gratuits pour tester votre site mobile en ligne (2025)
Voici une petite sélection d’outils testés et approuvés. Tous gratuits. Aucune installation requise.
🥇 Outil #1 : le PageSpeed Insights de Google (l’officiel)
URL : https://pagespeed.web.dev/?hl=fr
Pas le plus sexy, mais sans doute le plus utile pour avoir de vraies données chiffrées :
- ✅ C’est l’outil OFFICIEL de Google ;
- ✅ Il vous dit exactement ce que Google voit et prend en compte ;
- ✅ Détecte les problèmes qui impactent votre SEO ;
- ✅ Vous fait un rapport en français (avec tout plein de chiffres et de courbes) ;
Comment l’utiliser :
- Collez l’URL de votre site ;
- Cliquez sur le bouton « Analyser » ;
- Attendez 30 secondes (c’est complet mais c’est un peu long) ;
- Google vous dit si votre site est « mobile-friendly » ou pas avec un système de notes et de couleurs (vert/orange /rouge);
L’avantage : Si votre site a des problèmes, Google vous explique quoi corriger (texte trop petit, boutons trop proches, etc.). Vous obtenez 4 notes : performances, accessibilité, SEO et bonnes pratiques. (ici c’est « performances qui nous intéresse).
C’est un peu technique mais si vous voulez comprendre toutes les données, consultez la doc.
Mon avis : ⭐⭐⭐⭐⭐ Commencez toujours par celui-là. Si Google dit OK, vous êtes tranquille.
🥈 Outil #2 : Chrome DevTools
Inclus dans : Navigateur Google Chrome (gratuit)
Pourquoi c’est pratique :
- ✅ Vous avez Chrome ? Alors vous l’avez déjà ;
- ✅ Teste en temps réel pendant que vous modifiez votre site ;
- ✅ Simule TOUS les téléphones (iPhone 14, Samsung Galaxy, etc.) ;
- ✅ Vous voyez exactement ce que vos visiteurs voient, mais depuis votre navigateur habituel.
Comment faire :
- Ouvrez votre site dans Chrome ;
- Quand c’est fait, appuyez sur F12, ou faites un clic-droit (n’importe où) et choisissez « Inspecter » ;
- Une fenêtre de code va s’ouvrir ;
- Cherchez l’icône en forme de « téléphone/tablette » en haut à gauche ;
- La fenêtre se redimmesnionne pour prendre la forme d’un smartphone ;
- Si vous voulez, choisissez un modèle de téléphone dans le menu déroulant.
- Cliquez sur l’icône en forme de flèches pour passer en mode paysage ;
- Cliquez sur les 3 points et choisissez « capture screenshot » pour faire une capture d’écran.
Le truc pratique: Vous pouvez tester en mode portrait ET paysage. Et même simuler une connexion 3G lente.
Mon avis : ⭐⭐⭐⭐⭐ Vous l’avez toujours sous la main, donc n’hésitez pas à appuyer généreusement sur F12 ! Un peu technique (on peut faire BIEN PLUS que ça avec l’inspecteur) mais ultra complet.
🥉 Outil #3 : AmIResponsive (le plus visuel)
URL : https://ui.dev/amiresponsive/
Pourquoi c’est pratique :
- ✅ Affiche votre site sur plusieurs écrans EN MÊME TEMPS ;
- ✅ iPhone, iPad, ordinateur portable… tout est visible d’un coup ;
- ✅ Interface super simple ;
Comment l’utiliser :
- Scroller jusqu’à la barre de recherche (sous les écrans) ;
- Collez l’URL de votre site ;
- Cliquez sur « Go » ;
- Remontez en haut de la page pour voir toutes les versions
Le truc pratique : Tous les formats s’affichent sur un fond noir élégant. Ça fait plaisir à voir.
Mon avis : ⭐⭐⭐⭐ Très visuel mais pas hyper précis. Bon pour un check rapide.
Outil #4 : Responsive Design Checker
URL : responsivedesignchecker.com
Pourquoi c’est bien :
- ✅ Teste sur 30+ tailles d’écran différentes ;
- ✅ Pas énormément de modèles récents mais vous pouvez entrer la taille de votre choix manuellement (en pixels) ;
- ✅ Gratuit et sans inscription.
Mon avis : ⭐⭐⭐ Complet mais interface un peu vintage.
Outil #5 : Testsigma
URL : https://testsigma.com/website-responsive-checker
Pourquoi c’est stylé :
- ✅ Affiche votre site sur plusieurs appareils : MacBook, iPhone, téléphone Samsung, etc.)
- ✅ Simple à utiliser : entrer l’adresse, cliquez sur « Check » et observez le résultat ;
- ✅ Possibilité d’afficher les smartphones en mode paysage ;
- ✅ Design épuré : affiche un appareil à la fois et vous faites défiler avec les flèches ;
- ✅ Parfait pour prendre un screenshot à montrer
Mon avis : ⭐⭐⭐⭐ Plus pour l’esthétique que pour tester en profondeur.
Outil #6 : BrowserStack (le pro)
URL : browserstack.com/responsive
Pourquoi c’est puissant :
- ✅ Teste sur plus de 30 000 appareils et navigateurs différents ;
- ✅ Outils avancés pour les développeurs ;
- ✅ Version gratuite limitée.
Mon avis : ⭐⭐⭐⭐ Version gratuite limitée mais si vous avez le budget, c’est un produit hyper complet.
Outil #7 : LambdaTest
URL : lambdatest.com/mobile-view-website
Pourquoi c’est cool :
- ✅ Disponible sur le site ou sous forme de logiciel à télécharger sur votre ordinateur ;
- ✅ Teste en parallèle sur 2 appareils (ou plus) de votre choix) sur vrais devices
- ✅ Une cinquantaine d’appareils proposés (téléphones, tablettes, ordinateurs).
Mon avis : ⭐⭐⭐⭐ Bon compromis entre gratuit et pro.
Comparatif : quel outil choisir ?
Vous aimez les tableaux ? évidemment. Celui-ci va peut-être vous aider à choisir :
| Outil | Gratuit ? | Facilité | Précision | Meilleur pour… |
|---|---|---|---|---|
| Google Mobile-Friendly | ✅ Oui | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | Vérifier le SEO |
| Chrome DevTools | ✅ Oui | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | Développement |
| Testsigma | ✅ Oui | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | Check rapide visuel |
| Responsive Checker | ✅ Oui | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | Tester plein d’écrans |
| Am I Responsive | ✅ Oui | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | Jolis screenshots |
| BrowserStack | ⚠️ Limité | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | Comparer 2 téléphones |
| LambdaTest | ✅ Oui | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | Compromis gratuit/pro |
💡 Mon conseil
Pour 99% des sites :
- Commencez par Google Mobile-Friendly Test (validation SEO) ;
- Vérifiez visuellement avec Chrome DevTools (test rapide) ;
- Regardez sur de « vrais » appareils sur AmIResponsive.
Temps total : 5 minutes.
Pas besoin de tester sur les 7 outils. Ces 3-là suffisent amplement.
Autre solution : créer un site responsive automatiquement avec Divi
OK, vous avez à disposition 7 outils (et bien plus !) pour tester votre site mobile.
Mais le mieux, ce serait quand même de créer un site qui est déjà responsive dès le départ.
On se passerait bien de tester 50 fois, corriger, rafraichir la page, re-tester, re-corriger…
C’est exactement ce que font les constructeurs de pages comme Divi.
Comment Divi rend votre site automatiquement responsive
Avec Divi, vous construisez votre site une seule fois, et il s’adapte automatiquement à tous les écrans :
Les modules (textes, images, carrousels, etc.) sont conçus dès le départ pour s’adapter à différentes largeurs.
Et les templates sont entièrement responsive : ils sont prêts à l’emploi et on déjà été testés sous toutes les coutures par les designers.
Concrètement :
- Vos colonnes se mettent les unes en-dessous des autres automatiquement sur mobile ;
- Les images se redimensionnent ;
- Vos textes restent lisibles en adaptant la largeur du bloc et la taille de la police ;
- Vos boutons restent cliquables (pas trop petits).
Le mode « Responsive » de Divi
Divi fait déjà 95% du boulot automatiquement, surtout si vous êtes partie d’un template.
Mais si vous voulez peaufiner (cacher un élément sur mobile, changer la taille d’un titre…), vous pouvez :
- Cliquer sur l’icône « téléphone/tablette/desktop » en bas de l’éditeur Divi ;
- Basculer en vue mobile ;
- Ajuster ce que vous voulez ;
- Vos modifications s’appliquent SEULEMENT sur mobile (les deux autres formats ne bougent pas).
Résultat : Vous avez un contrôle total sur chaque version, sans toucher au code.
Et Divi 5 propose encore plus de tailles.
C’est ce qu’on appelle des breakpoints (oui ça vous rappelle un film mais en fait non). Ce sont des « points d’arrêt » qui marquent la limite entre « tablette » et « mobile » par exemple. C’est très pour les perfectionnistes qui veulent peaufiner sur une multitude de tailles d’écran.
→ Essayer Divi gratuitement pendant 30 jours
💡 Mon avis honnête
Si vous créez un site from scratch, un SaaS ou une app : Oui, vous devez tester sur 10 outils même si c’est (un petit peu) fastidieux.
Si vous utilisez un éditeur visuel comme Divi ou Elementor : n’hésitez pas à partir d’un template, puis testez une fois pour vérifier dès que vous avez fini une page.
À la fin, vous pourrez faire le tour depuis votre téléphone et/ou depuis un émulateur comme ceux ci-dessus pour être 100% sûr·e. Vous économisez des heures de galères techniques.
- Découvrir Divi (essai gratuit 30 jours) ;
- Divi vs Elementor : Lequel choisir pour son site pro ?
- Créer un site internet avec Divi et WordPress – Les 6 étapes
Les 5 erreurs responsive les plus courantes (+ comment les corriger)
Vous avez testé votre site et c’est la cata sur mobile ? Voici les 5 problèmes les plus courants :
❌ Erreur #1 : Le texte est trop petit (illisible)
Le problème : Vous avez réglé votre police sur 12px. Sur ordinateur, ça passe. Sur mobile, il faut une loupe.
La solution :
- Taille recommandée sur mobile : 16px pour le texte normal (attention elles ne font pas toutes la même taille) ;
- Titres : environ 24px ;
❌ Erreur #2 : Les boutons sont trop proches (on clique à côté)
Le problème : les boutons deviennent trop petits sur l’écran d’un téléphone (et vos visiteurs ne sont surement pas des enfants). On clique sur le mauvais (dommage si vos boutons « Acheter » et « Annuler » sont côte à côte).
Dans ce cas, Google vous signalera cette erreur via la Google Search Console (il va vous dire « éléments cliquables trop rapprochés »).
La solution :
- Espacez vos boutons d’au moins 16px (en tous sens) si vous le faites manuellement (plus si possible) ;
- Taille minimum d’un bouton cliquable : 44x44px ;
❌ Erreur #3 : Les images débordent de l’écran
Le problème : Vous avez mis une image de 2000px de large mais sur un iPhone (375px), ça déborde.
La solution :
- Avec un éditeur visuel récent comme Elementor ou Divi, ça ne devrait pas arriver. Essayez de réinitialiser tous les réglages du module image, en particulier la largeur et le débordement (overflow) ;
- Ou utilisez «
max-width» (= largeur maximale) + un pourcentage pour voir si ça résout le problème.
❌ Erreur #4 : Le menu hamburger ne fonctionne pas
Le problème : Sur mobile, votre menu se transforme en icône hamburger (☰)… mais quand on clique, rien ne se passe.
La solution :
- Allez regarder du coté des réglages de WordPress (Apparence -> Personnaliser -> Styles sur mobile) pour voir si ça fonctionne. Et si vous ne voyez pas, vérifiez juste qu’il n’est pas de la même couleur que le fond ;
- Désactivez les plugins un par un et rafraichissez la page ;
- Testez sur plusieurs navigateurs (Chrome, Safari, Firefox).
Avec Divi : Le menu hamburger fonctionne avec le module « Menu ». Vous le trouverez normalement dans le Thème Builder.
❌ Erreur #5 : Le site est lent sur mobile (plus de 3 secondes de chargement)
Le problème : Vos images sont peut-être trop lourdes. Avec une connexion 4G ou un mauvaise Wi-Fi, ça rame.
La solution :
- Compressez vos images (TinyPNG, Squoosh…) ;
- Utilisez le format WebP (plus léger que JPG) ;
- Activez le lazy loading (les images chargent au scroll) ;
- Installez une extension qui fait tout ça automatiquement pour toutes vos images, comme Imagify.
Questions fréquentes
Est-ce que je dois tester mon site sur TOUS les téléphones ?
Non. Sauf si vous travaillez dans Apple Store ou que vous collectionnez les téléphones.
Des centaines de modèles de smartphones sont en circulation en même temps. (iPhone 11, 12, 13, 14 et compagnie, en plusieurs versions, une farandole de Samsung Galaxy, Xiaomi, Huawei…)
Le mieux à faire : Tester sur les 3 tailles d’écran les plus courantes :
- Petit téléphone : iPhone SE (375px de large) ;
- Mobile standard : iPhone 14 / Samsung Galaxy (390-412px) ;
- Mobile XL : iPhone 14 Pro Max (430px).
Si votre site s’affiche bien sur ces 3 tailles, il s’affichera bien sur 95% des téléphones.
Avec Divi : Affichez votre site en version mobile, et faites défiler les points d’arrêt réglables (tout en haut de la page) pour essayer plusieurs tailles. ✅
Mon site passe le test Google mais il est quand même un peu moche sur mon iPhone, pourquoi ?
Parce que « mobile-friendly » ≠ « beau ».
Le test Google vérifie juste que :
- ✅ Le texte est lisible (pas trop petit) ;
- ✅ Les boutons sont cliquables (pas trop proches) ;
- ✅ Le contenu rentre dans l’écran (pas de scroll horizontal).
Mais Google ne juge pas le design, on fait encore ce qu’on veut, heureusement. Votre site peut être « mobile-friendly » et avoir une mise en page moche, ce n’est pas incompatible.
Je dois tester à chaque fois que je modifie mon site ?
Ça dépend de ce que vous modifiez.
OUI, testez si vous :
- Changez la structure de votre site (ajout de colonnes, nouvelles sections…) ;
- Installez un nouveau thème WordPress ;
- Modifiez le CSS à la main.
NON, pas besoin de tester si vous :
- Changez juste un texte ;
- Remplacez une image (même orientation) ;
- Modifiez une couleur.
C’est quoi la différence entre « responsive » et « mobile-friendly » ?
Bonne question ! En tant que francophones, on ne fait pas vraiment attention aux nuances.
« Mobile-friendly » = votre site s’affiche correctement sur mobile. Point. Il peut d’ailleurs avoir une version mobile séparée (comme les vieux sites en m.exemple.com).
« Responsive » = votre site s’ADAPTE automatiquement à TOUTES les tailles d’écran (mobile, tablette, desktop). C’est le même site, juste réorganisé selon l’écran.
En 2025, vous devriez plutôt être responsive. On ne fait plus de version mobile séparée.
Par contre, on fait du mobile first : on commence souvent par créer un site sur mobile (la plupart des visites se passeront comme ça) puis on agrémente en faisant une version plus fournie pour les grands écrans.
Mais si vous créez votre site vous-même, commencez par la version bureau, c’est quand même plus simple.
Combien de temps ça prend de corriger un site pas responsive ?
Ça dépend de l’ampleur de la tâche.
Si vous avez juste quelques petits ajustements : 1-2h (ce qui prend le plus de temps, ce sont les aller-retours : tester, corriger, rafraichir, recommencer) ;
Si tout est à refaire : 10-20h (voire plus, il est parfois plus rapide de refaire entièrement certaines pages).
🚀 Récap’ : comment tester l’affichage mobile de votre site en 5 minutes
Ok c’était intense. Voici le process en 3 lignes :
- Testez avec Google Mobile-Friendly Test (c’est lui le chef qui donne la validation SEO) → 2 min ;
- Vérifiez visuellement avec Chrome DevTools depuis Chrome en appuyant sur F12 → 1 min ;
- Puis regardez avec un outil multi-appareils comme AmIResponsive (vue d’ensemble) → 2 min.
Total : 5 minutes chrono.
Si tout est OK → vous êtes tranquille. ✅
Si vous avez des erreurs → corrigez et recommencez.
💡 Ou alors : dès le départ, créez un site responsive avec Divi
Franchement ? Personne n’a envie de tester 50 fois toutes les pages sur plein d’écrans (moi non plus).
Les constructeurs de page comme Divi et Elementor sont faits pour nous faciliter la tâche, pourquoi se priver.
Avec Divi :
- ✅ Votre site s’adapte automatiquement à tous les écrans ;
- ✅ Les templates ont été crées par des pros (et c’est eux qui ont fait tout ce travail) ;
- ✅ Vous voyez le résultat en direct sur la « vue mobile » ;
- ✅ Vous gardez le contrôle si vous voulez peaufiner la version mobile plus tard.
Budget : 89$/an (≈ 80€) pour créer autant de pages et de sites que vous voulez.
→ Essayer Divi gratuitement pendant 30 jours
Des questions ? Besoin d’aide pour tester votre site ?
