Votre site est-il adapté au mobile ? Comment vérifier et corriger

Vérifiez-le en deux minutes

Ouvrez votre site sur votre propre cellulaire, comme le ferait un client : cherchez le nom de votre entreprise et touchez le résultat. Puis posez-vous quatre questions. La page remplit-elle l’écran, ou faut-il pincer pour zoomer ? Pouvez-vous lire le texte sans zoomer ? Faut-il défiler de côté pour tout voir ? Pouvez-vous toucher vos boutons et votre numéro de téléphone sans viser à côté ?

Si vous devez zoomer ou défiler horizontalement, votre site n’est pas adapté au mobile. Vous pouvez aussi tester depuis un ordinateur : dans Chrome, Edge ou Firefox, appuyez sur F12 et cherchez la petite icône de téléphone et de tablette (« barre d’outils des appareils »). Elle montre votre page à la taille d’un cellulaire. Pour une note rapide, sans rien installer, notre bulletin web gratuit vérifie les mêmes éléments de base et vous dit quoi corriger.

La ligne qui permet à une page de tenir sur un cellulaire

Chaque page contient une courte instruction, la balise meta viewport, qui indique au cellulaire la largeur à utiliser pour l’afficher. Elle ressemble à ceci :

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

Sans elle, le cellulaire fait comme si son écran était un moniteur d’ordinateur et réduit toute la page pour la faire tenir, d’où l’aspect minuscule des vieux sites. Inutile de comprendre le code : il suffit que la personne qui a conçu votre site puisse confirmer que cette ligne s’y trouve.

Une mise en page fluide, pas une largeur fixe

Un site adapté au mobile est fluide : les colonnes s’empilent sur un écran étroit et se placent côte à côte sur un écran large. Un site à l’ancienne a une largeur fixe, par exemple 960 pixels, et le cellulaire ne peut que le réduire ou vous laisser défiler de côté. Si votre site date de plusieurs années, il est probablement à largeur fixe.

Ce qu’il faut regarder sur un cellulaire

• Un texte lisible. Vous devriez lire les paragraphes à bout de bras sans zoomer. Si vous plissez les yeux, le texte est trop petit.
• Des boutons faciles à toucher. Les liens et les boutons doivent être assez grands pour un pouce et bien espacés, pour qu’un appui sur « Réserver » n’ouvre pas « Menu » par erreur. On parle de zones tactiles.
• Un numéro de téléphone cliquable. Le numéro doit être un lien tel:, pour qu’un seul appui lance l’appel. En simple texte, il faut le mémoriser ou le copier. C’est l’une des corrections les plus rapides et les plus utiles.
• Des formulaires avec le bon clavier. Un champ courriel devrait afficher le clavier avec l’arobase, et un champ téléphone le clavier numérique. Un formulaire court est rempli ; un long est abandonné.
• Des images pas trop lourdes. Une photo sortie directement d’un appareil peut être bien plus grande que ce dont un écran de cellulaire a besoin. Les images trop lourdes ralentissent la page pour tout le monde.

La vitesse sur un réseau mobile

Vos clients ne sont pas toujours sur un Wi-Fi rapide. Ils sont dans un stationnement, sur un traversier ou sur une route de campagne avec une seule barre. Une page instantanée à votre bureau peut y ramper. Les causes habituelles : des images trop lourdes, trop de modules complémentaires et des animations encombrantes. Moins d’éléments, plus légers, se chargent plus vite.

Pourquoi Google s’en soucie

Pour décider comment classer vos pages, Google regarde d’abord leur version mobile. C’est l’indexation mobile d’abord (mobile-first indexing). Si votre version pour cellulaire est à l’étroit, lente ou incomplète, c’est elle qui est jugée. Un site qui fonctionne bien sur cellulaire est aussi plus facile à trouver.

Vos options si le test échoue

1. Demandez à la personne qui l’a conçu. Envoyez-lui cette page et demandez si la ligne viewport est présente et s’il existe une mise à jour adaptée au mobile. Certains sites se corrigent en un après-midi.
2. Changez de gabarit ou de thème. Si votre site repose sur un outil courant de création de sites, un gabarit plus récent est souvent déjà conçu pour les cellulaires. Vérifiez que vos textes et vos photos survivent au changement.
3. Refaites-le. Si le site est très ancien, le rafistoler peut coûter presque autant que repartir à neuf, et une refonte vous donne une base saine.

DeMark, conçu au Nouveau-Brunswick et au service des entreprises partout au Canada, crée chaque site adapté au mobile par défaut : numéros cliquables, texte lisible et réservations qui fonctionnent sur un petit écran. Vous pouvez voir ce que donnerait le vôtre avec une ébauche de site gratuite, sans carte, avant de décider quoi que ce soit.

Commencez dès aujourd’hui par le test de deux minutes sur votre cellulaire. Si la page réussit, tout va bien. Sinon, vous savez maintenant exactement quoi demander.