Checklist de test de site mobile : 30 vérifications avant la mise en ligne

Un test de site mobile vérifie qu’un site est lisible, utilisable et rapide sur téléphone avant que de vrais visiteurs ne tombent sur les problèmes. La checklist ci-dessous compte 30 vérifications réparties en sept groupes. La plupart prennent quelques secondes dans une vue mobile sur ordinateur ; quelques-unes demandent un vrai téléphone. Parcourez-la avant chaque lancement ou refonte, et gardez la version courte pour les mises en production régulières.

Avant de commencer : préparez vos appareils de test

Il vous faut trois types de vues :

1. Une vue mobile rapide sur ordinateur pour vérifier la mise en page sur de nombreuses pages : le mode appareil des DevTools de Chrome ou une extension comme Mobile View Extension. Les différences sont expliquées dans extension de simulateur mobile ou DevTools.
2. De vrais moteurs mobiles (et les navigateurs desktop de la checklist de test cross-browser) : Safari iOS via le Simulator de Xcode ou un vrai iPhone, et Chrome sur Android. Voir tester sur iPhone et tester sur Android.
3. Au moins un vrai téléphone de milieu de gamme pour le tactile, le clavier et la vitesse.

Testez au minimum ces largeurs (leur signification est expliquée dans qu’est-ce que la taille du viewport) : 360 px, 390–402 px et 430–440 px en portrait, plus une taille en paysage et une taille tablette.

1. Mise en page et lisibilité

1. Aucune page ne défile horizontalement. Si une page défile sur le côté, trouvez l’élément plus large que l’écran ; largeurs fixes, URL longues et tableaux larges sont les coupables habituels.
2. Le texte courant fait au moins 16 px et les lignes ne dépassent pas l’écran.
3. Les titres passent à la ligne proprement, sans mot isolé sur une ligne.
4. Les images s’adaptent à l’écran et gardent leurs proportions.
5. L’ordre du contenu reste logique quand les colonnes s’empilent. Le contenu le plus important n’est pas relégué sous une longue barre latérale.
6. En paysage, rien n’est caché derrière l’encoche ou l’indicateur d’accueil (vérifiez env(safe-area-inset-*) si vous utilisez des mises en page bord à bord).
7. La page a une balise meta viewport correcte. Sans elle, les téléphones affichent une page desktop dézoomée. Voir la balise meta viewport expliquée.

2. Navigation

8. Le menu s’ouvre et se ferme d’un seul appui, et se ferme quand on choisit un lien.
9. Chaque entrée du menu, y compris les sous-menus, est accessible sans survol.
10. Le logo ou un lien vers l’accueil est présent sur chaque page.
11. En paysage, les en-têtes fixes n’occupent qu’une petite partie de la hauteur de l’écran.
12. Le bouton retour (et le geste retour d’Android) ramène à l’endroit attendu, y compris dans les applications monopages.

3. Tactile et interaction

13. Les zones tactiles sont assez grandes et espacées. Les WCAG 2.2 fixent un minimum de 24 × 24 pixels CSS ; les recommandations d’Apple et de Google conseillent environ 44–48 px.
14. Les carrousels et sliders fonctionnent au swipe et ont des commandes visibles.
15. Les pop-ups et bandeaux cookies se ferment facilement et ne couvrent pas tout l’écran à l’arrivée.
16. Les liens dans le texte se distinguent sans survol.

4. Formulaires

17. Chaque champ affiche le bon clavier : type="email", type="tel", inputmode="numeric".
18. Les champs utilisent un texte d’au moins 16 px, pour que Safari sur iOS ne zoome pas au focus.
19. Le clavier à l’écran ne cache ni le champ en cours de saisie ni le bouton d’envoi.
20. La saisie automatique fonctionne pour le nom, l’e-mail, l’adresse et le paiement (attributs autocomplete).
21. Les messages d’erreur apparaissent à côté du champ et sont visibles sans défiler.

5. Médias et ressources

22. Les images sont servies à des tailles adaptées à l’écran (srcset et sizes), et non en fichiers desktop réduits.
23. Les vidéos ne se lancent pas automatiquement avec le son et se lisent dans la page sur iPhone quand c’est voulu (playsinline).
24. Les icônes et logos sont nets sur les écrans haute densité (SVG ou images 2x/3x).

6. Vitesse

25. Le contenu principal s’affiche vite sur une connexion bridée. Consultez les données terrain dans PageSpeed Insights et lancez un test de labo ; le guide du test de vitesse mobile explique les deux.
26. La mise en page ne saute pas pendant le chargement (Cumulative Layout Shift).
27. La page répond vite au premier appui (Interaction to Next Paint).

7. SEO et accessibilité sur mobile

28. La page mobile a le même contenu principal, les mêmes titres, données structurées et balises meta que la version desktop. Google indexe la version mobile.
29. Le texte peut être agrandi à 200 % sans casser la mise en page, et la page est utilisable avec le lecteur d’écran sur au moins un téléphone.
30. Un audit Lighthouse en mode mobile ne montre aucun problème critique d’accessibilité ou de SEO. Étapes : audit Lighthouse mobile dans Chrome.

La version courte pour chaque mise en production

Personne ne fait 30 vérifications à chaque déploiement. Pour les mises en production courantes :

• ouvrez les pages modifiées en vue mobile à 360 px et 430 px ;
• vérifiez l’absence de défilement horizontal et de menus cassés ;
• envoyez un formulaire depuis un vrai téléphone ;
• jetez un œil au rapport de vitesse de la principale page d’atterrissage.

Cela prend une dizaine de minutes et attrape la plupart des régressions.

Les erreurs fréquentes dans les tests mobiles

• Tester uniquement en redimensionnant la fenêtre. On change la largeur, mais pas le user agent, le ratio de pixels ni le type de saisie, et certains sites servent une autre page aux vrais téléphones. Détails : comment voir la version mobile d’un site sur ordinateur.
• Tester uniquement sur un smartphone haut de gamme récent. La plupart des visiteurs ont des appareils plus lents que ceux des développeurs.
• Ignorer le paysage et les tablettes. C’est autour de 768–1024 px que beaucoup de mises en page cèdent ; voir comment afficher un site comme sur iPad.
• Tester uniquement les pages hors connexion. Les espaces clients et le tunnel de commande reçoivent souvent le moins d’attention sur mobile.

Questions fréquentes

Comment tester mon site sur mobile sans téléphone ?

Utilisez une vue mobile dans Chrome sur ordinateur pour la mise en page, le Simulator de Xcode pour Safari iPhone sur Mac, et l’émulateur d’Android Studio pour Android. Gardez un vrai téléphone pour la vérification finale des parcours clés.

Quel est le problème le plus fréquent des sites mobiles ?

Un contenu plus large que l’écran, qui provoque un défilement horizontal. Il vient en général d’un élément à largeur fixe, d’un tableau large ou d’une image sans max-width: 100%.

Existe-t-il un test mobile officiel de Google ?

Google a retiré son test d’optimisation mobile en décembre 2023 et renvoie désormais vers Lighthouse. Des alternatives sont listées dans les alternatives au test d’optimisation mobile de Google.