Pour qu’un site soit agréable sur mobile, il doit d’abord être « responsive », c’est-à-dire capable d’adapter sa mise en page à la taille de l’écran. Il faut ensuite des textes lisibles sans zoomer, des boutons faciles à toucher, un menu simple, des pages rapides et des formulaires courts. Si votre site s’affiche mal sur téléphone, commencez par identifier précisément ce qui gêne : selon le cas, quelques corrections suffisent, ou bien une refonte est nécessaire.
Pourquoi le mobile ne se néglige plus.
Pour beaucoup d’entreprises, une grande partie des visites se fait désormais depuis un téléphone, souvent dans des conditions peu confortables : en déplacement, d’une main, avec une connexion variable. Un visiteur gêné repart en quelques secondes vers un concurrent.
Google, de son côté, évalue les sites principalement à partir de leur version mobile. Un site pénible sur téléphone se prive donc à la fois de clients et de visibilité. Vos statistiques de visites vous indiquent la part de mobile sur votre propre site : c’est le premier chiffre à regarder.
Diagnostiquer les problèmes.
Le test en conditions réelles
Prenez votre téléphone, coupez le wifi, et essayez de faire ce qu’un client ferait : trouver un service, lire une page, appeler, remplir le formulaire de contact. Notez chaque moment de gêne. Faites le même test avec des personnes extérieures à l’entreprise, sur des téléphones différents, y compris des modèles anciens à petit écran.
Les outils gratuits
PageSpeed Insights, l’outil de Google, analyse la vitesse et signale les principaux problèmes techniques sur mobile. Les navigateurs d’ordinateur proposent aussi un mode d’affichage qui simule différents écrans de téléphone. La Search Console vous indique enfin comment Google perçoit les performances de vos pages.
Les problèmes les plus fréquents
- texte trop petit ou lignes trop longues ;
- boutons et liens trop rapprochés, difficiles à toucher ;
- images ou tableaux qui débordent de l’écran et obligent à faire défiler horizontalement ;
- menu qui s’ouvre mal ou cache des pages importantes ;
- fenêtres surgissantes qui masquent le contenu et se ferment difficilement ;
- pages lentes à cause d’images trop lourdes ou de scripts inutiles ;
- formulaires longs, avec des champs mal adaptés au clavier du téléphone.
Les corrections prioritaires.
La lisibilité
Un corps de texte suffisamment grand, un bon contraste entre le texte et le fond, des paragraphes courts et aérés. Évitez le texte sur des photos chargées et les polices fines difficiles à lire en plein soleil.
Les zones à toucher
Boutons assez grands pour être touchés du pouce, espacés les uns des autres. Le numéro de téléphone doit être cliquable pour lancer l’appel directement, et le bouton de contact visible sans avoir à chercher.
La navigation
Un menu court, avec les intitulés que vos clients comprennent. Sur mobile, mieux vaut quelques entrées claires qu’une longue liste de sous-menus. Prévoyez un accès rapide à l’appel et au contact, par exemple dans une barre fixe en bas de l’écran.
Les formulaires
Réduisez le nombre de champs au strict nécessaire. Utilisez le bon type de champ pour que le téléphone affiche le clavier numérique pour un numéro et le clavier e-mail pour une adresse. Affichez clairement les erreurs de saisie.
Les contenus
Placez l’essentiel en haut de page : ce que vous faites et comment vous contacter. Les tableaux complexes, les longues galeries et les vidéos lourdes doivent être repensés pour le petit écran plutôt que simplement réduits.
Le cas des sites WordPress
Sur WordPress, beaucoup de problèmes mobiles viennent du constructeur de pages ou du thème. Les constructeurs proposent souvent des réglages distincts pour l’ordinateur, la tablette et le téléphone : une marge ou une taille de texte réglée pour l’ordinateur peut être inadaptée sur mobile si personne n’a vérifié l’affichage. Passez en revue chaque page importante dans les trois modes. Méfiez-vous aussi des blocs masqués sur mobile : un contenu caché au téléphone est un contenu que Google et vos visiteurs ne voient pas.
La vitesse, enjeu central sur mobile.
Sur une connexion mobile moyenne, chaque élément lourd se paie en secondes d’attente. Les leviers les plus efficaces sont souvent simples :
- compresser les images et les servir à la bonne taille pour chaque écran ;
- différer le chargement des images situées plus bas dans la page ;
- supprimer les extensions, polices et scripts qui ne servent pas ;
- éviter les carrousels et animations lourds en haut de page ;
- choisir un hébergement de qualité et activer la mise en cache.
Ces optimisations relèvent du SEO technique. Elles profitent aussi à l’environnement : un site plus léger consomme moins de ressources, c’est le principe du site écoresponsable.
Corriger ou refaire ?
Des corrections suffisent si
Le site est déjà responsive et les problèmes sont ponctuels : taille de texte, boutons, images trop lourdes, menu à simplifier. Un professionnel peut les traiter en ajustant le thème et les contenus, sans tout reprendre.
Une refonte s’impose si
Le site n’a pas été conçu pour le mobile, repose sur une technologie ancienne ou un thème qui ne permet pas d’adaptation propre. Une refonte pensée d’abord pour le téléphone sera plus efficace et durable que des retouches.
Concevoir mobile d’abord. Lors d’une création ou d’une refonte, dessinez d’abord la version téléphone, puis élargissez vers l’ordinateur. Cette contrainte oblige à hiérarchiser l’information et profite à tous les écrans. C’est au cœur de notre travail d’ergonomie et de design.
En résumé.
Un site agréable sur mobile est responsive, lisible, facile à toucher, simple à parcourir et rapide. Testez-le en conditions réelles, corrigez en priorité la lisibilité, les boutons, le menu, les formulaires et le poids des pages. Si la base n’a pas été pensée pour le téléphone, une refonte conçue mobile d’abord sera le choix le plus rentable.
