Vayle
← Guides

Votre site est-il vraiment adapté aux mobiles ?

Votre site paraît correct sur votre portable. Voici comment vérifier ce qu'il fait sur un téléphone, ce qui casse en premier et quoi corriger.

Dark editorial card reading: is your website actually mobile friendly, with the figure 24 by 24 pixels as the minimum tap target size

Probablement moins que vous ne le croyez, et vous ne pouvez pas le savoir, parce que vous ne l'avez jamais regardé ailleurs que sur la machine qui a servi à le concevoir. Les gens qui décident de vous appeler tiennent un téléphone, sont debout quelque part, et ont un pouce de libre.

Voici comment le vérifier correctement en une dizaine de minutes, et quoi faire de ce que vous allez trouver.

Pourquoi un site correct sur un portable échoue-t-il sur un téléphone ?

Parce que « ça rentre » et « ça fonctionne » sont deux tests différents, et que la plupart des sites ne passent que le premier.

Presque tous les sites bâtis depuis dix ans sont responsives : la mise en page se réajuste à la largeur de l'écran. Cette partie va généralement bien. Ce qui casse, c'est tout ce qui reposait sur une souris, un grand écran ou une connexion rapide. Les menus qui exigent un survol. Les tableaux de prix qui avaient trois colonnes et sont devenus illisibles. Les formulaires qui semblaient courts sur un portable et paraissent interminables sur un téléphone. Les images taillées pour un en-tête d'ordinateur qu'un téléphone doit maintenant télécharger en entier sur un signal faible.

Rien de tout cela n'apparaît à l'approbation du design. Ça apparaît sous forme de visiteurs qui partent.

Comment vérifier sans rien acheter ?

Trois passages, dans cet ordre.

Premier passage : votre propre téléphone, sur données cellulaires, pas sur le Wi-Fi du bureau. Coupez le Wi-Fi. Chargez votre page d'accueil. Puis faites ce qu'un client ferait : trouvez vos heures, trouvez un prix, rendez-vous au formulaire de contact et envoyez-vous une demande test. Chronométrez. Si l'une de ces étapes exige plus de trois touchers, ou si vous devez zoomer pour lire quoi que ce soit, vous avez votre constat.

Deuxième passage : un téléphone qui n'est pas le vôtre. Idéalement celui d'une personne plus âgée, sur un autre réseau, qui n'a jamais vu le site. Tendez-le-lui sans rien dire. Regardez où elle hésite. Vous apprendrez plus en quatre-vingt-dix secondes que dans n'importe quel rapport.

Troisième passage : vos statistiques. Ne devinez pas la part de vos visiteurs sur mobile. Ouvrez Google Analytics, regardez la catégorie d'appareil, et comparez le taux de rebond et les conversions entre ordinateur et mobile. Si le trafic mobile est élevé et que les demandes mobiles ne le sont pas, vous venez de trouver où l'argent s'en va. C'est le même diagnostic que derrière du trafic qui ne devient jamais des demandes.

Qu'est-ce qui casse en premier ?

À peu près dans cet ordre de fréquence.

Des cibles tactiles trop petites ou trop rapprochées. Boutons, éléments de menu et liens dimensionnés pour un curseur. Les WCAG 2.2 fixent le minimum à 24 sur 24 pixels CSS pour les cibles de pointage, au critère de succès 2.5.8 (W3C, Understanding SC 2.5.8 Target Size (Minimum)), et c'est un plancher, pas un objectif. Deux liens empilés à quelques pixels l'un de l'autre dans un pied de page, ça veut dire que quelqu'un touche constamment le mauvais et finit par abandonner.

Le numéro de téléphone qui n'est pas un lien. Si votre numéro est saisi en texte brut, ou pire, enfermé dans une image, le toucher ne fait rien. Sur un téléphone, il devrait composer. C'est une correction de cinq minutes que des gens laissent traîner des années.

Des formulaires qui demandent trop. Chaque champ est une raison d'abandonner sur un petit écran. Nom, coordonnée, une zone de message. Réglez le bon type de clavier pour chaque champ, pour qu'un champ courriel ouvre le clavier courriel et qu'un champ téléphone ouvre le pavé numérique. Et vérifiez que l'envoi se rend vraiment, parce que les formulaires qui échouent en silence sont la panne la plus coûteuse qu'un petit site puisse avoir.

Le menu caché qui contient tout. Une icône hamburger, très bien. Une icône hamburger qui cache quatorze entrées dont trois comptent, non. Les deux ou trois actions pour lesquelles les gens sont venus devraient être visibles sans rien ouvrir.

Les en-têtes fixes qui mangent l'écran. Une barre fixe paraît soignée sur un portable et avale le tiers d'un écran de téléphone. Pire, elle peut se poser par-dessus le champ que vous venez de toucher, si bien que vous ne voyez plus ce que vous tapez.

Du texte cuit dans une image. Des bannières avec l'offre écrite dans le JPEG. Sur un écran étroit, ce texte rétrécit jusqu'à disparaître, et il ne peut être ni sélectionné, ni traduit, ni lu à voix haute.

Les tableaux. Listes de prix et tableaux de spécifications conçus pour un grand écran : ils débordent sur le côté ou s'écrasent en colonnes illisibles. Sur un téléphone, il faut généralement les empiler en cartes.

Est-ce que ça change quelque chose à votre visibilité sur Google ?

Oui, et plus directement que la plupart des propriétaires ne l'imaginent.

Google l'écrit noir sur blanc : le moteur « utilise la version mobile du contenu d'un site, explorée avec l'agent pour téléphone intelligent, pour l'indexation et le classement » (Google Search Central, Mobile-first indexing). La version évaluée est la version téléphone. Google prévient aussi que si le site mobile porte moins de contenu que la version ordinateur, vous devez vous attendre à perdre du trafic, parce qu'il y a moins de matière à traiter.

En pratique : si une partie de vos textes de service est masquée sur mobile pour garder une mise en page propre, ce texte n'est en réalité pas sur votre site. Mettez-le dans un accordéon ou un onglet plutôt que de le retirer. Tout cela soutient votre visibilité en recherche locale, où la personne qui cherche est de toute façon presque toujours sur un téléphone.

Et la vitesse sur un téléphone ?

Testez-la sur la connexion qu'ont vos clients, pas sur celle de votre bureau.

Les Core Web Vitals de Google considèrent un Largest Contentful Paint au-delà de 2,5 secondes comme un problème, et sur un téléphone cet élément le plus grand est presque toujours l'image d'en-tête. Une image taillée pour un ordinateur envoyée à un téléphone en est la cause la plus courante, et la correction relève du développeur : bonnes dimensions selon l'appareil, formats modernes, et rien qui se charge avant d'être nécessaire. La chaîne complète est détaillée dans pourquoi votre site web est lent.

Faut-il un site mobile séparé ?

Non. Cette approche est morte il y a des années et a laissé derrière elle beaucoup de sous-domaines m. à l'abandon. Un seul site, un seul contenu, une mise en page différente selon la largeur.

Les constructeurs de pages compliquent la chose. La plupart permettent d'ajuster la vue mobile séparément, ce qui est utile, et suppose que quelqu'un le fasse vraiment. Un gabarit jamais ajusté pour les téléphones, ce n'est pas la faute de l'outil. C'est un travail inachevé.

Corriger ou refaire ?

Corriger, dans la plupart des cas. Cibles tactiles, numéro composable, formulaire raccourci, menu dégraissé et images bien dimensionnées : ce sont des heures de travail sur un site existant, pas un projet.

Refaire quand la mise en page mobile est brisée parce que la construction est assez vieille pour que le responsive ait été ajouté après coup, quand le site est lent pour des raisons structurelles plutôt que d'images, ou quand vous vouliez refondre de toute façon. Si c'est votre cas, faites-le sans jeter le positionnement que vous avez déjà. Nos sites web vont de 1 200 $ à 8 000 $ selon la portée, et notre façon de les cadrer est sur conception web, avec les fourchettes complètes sur tarifs.

Dans tous les cas, faites le premier passage aujourd'hui. Téléphone en main, Wi-Fi coupé, essayez de vous embaucher vous-même.

Si vous préférez que quelqu'un d'autre s'en charge, envoyez-nous votre adresse pour une analyse gratuite. Nous parcourrons votre site sur un vrai téléphone et nous vous dirons ce qui casse, ce que ça vous coûte et quelle correction faire en premier, que vous travailliez avec nous ou non.

Voyez ce qui freine discrètement vos ventes

Envoyez-nous votre site et nous vous renverrons 3 à 5 correctifs priorisés en design, vitesse, conversion et accessibilité. Gratuit, sous 2 jours ouvrables.