Un appareil d'entrée de gamme, aujourd'hui, c'est 2 ou 3 Go de mémoire, un processeur modeste, un écran petit et lumineux, et un forfait data qui se compte en mégaoctets. C'est avec un téléphone de ce genre qu'une bonne partie de vos visiteurs arrive sur votre site, souvent en marchant, souvent à une main.
Votre site peut être parfaitement correct sur votre ordinateur et mauvais sur cet appareil-là. Pas seulement moins beau : inutilisable. Ce qui suit liste ce qui casse en premier, puis comment le vérifier sur un vrai téléphone plutôt que dans une fenêtre de simulation.
En une phrase
Un site utilisable sur un téléphone modeste n'est pas un site au rabais. C'est un site qui a été testé dans les conditions de ses visiteurs, pas dans celles de son concepteur.
Ce qui change sur un téléphone d'entrée de gamme
Cinq contraintes rendent ces appareils différents, et chacune déplace les priorités. La mémoire d'abord : un navigateur qui garde plusieurs onglets ouverts dispose de peu de place, et une page trop lourde peut être fermée en plein chargement. Le processeur ensuite : les animations, les scripts et les grandes images coûtent un temps visible, là où votre ordinateur ne montrait rien.
Le réseau, troisième contrainte, est instable plus que lent : une connexion qui monte et descend, un partage de données depuis un autre téléphone, une coupure au milieu d'un téléchargement. Quatrième contrainte, le forfait : chaque mégaoctet consommé a un prix pour le visiteur, et un site lourd se paie en crédit. Cinquième contrainte, l'écran et la main : une seule main, un pouce, une cible à atteindre.
Ce classement a une conséquence simple. Sur un téléphone modeste, le poids de la page passe avant les effets visuels, et la lisibilité passe avant la décoration. Si votre site est lent à cause d'un hébergement faible ou de scripts empilés, le problème est encore plus visible ici : Site trop lent : les cinq causes réelles décrit ces causes et l'ordre dans lequel les traiter.
Les polices lourdes
Sur une connexion lente, un fichier de police se télécharge avant que le texte s'affiche dans la bonne typographie. Le visiteur voit d'abord un texte dans une police système, parfois une zone vide, puis la mise en page bouge au moment où la police arrive. Sur un petit écran, ce déplacement se remarque tout de suite.
Ce qui se corrige : limiter le site à deux graisses, utiliser le format woff2, héberger les fichiers sur votre serveur plutôt que de les demander à un service distant, et déclarer un affichage de secours pour que le texte soit lisible immédiatement. Chaque graisse supprimée est un fichier en moins à télécharger sur une connexion comptée.
Un point de lisibilité compte autant que le poids. Sur un écran de téléphone, exposé au soleil ou dans un taxi, les graisses très fines et les gris clairs deviennent difficiles à lire. Un texte un peu plus épais, plus sombre, se lit mieux — et ne coûte rien en performance.
Les animations qui font ramer
Les animations coûteuses se reconnaissent à leur effet : l'image de fond qui glisse au défilement, le bandeau qui défile tout seul, les blocs qui apparaissent en cascade, la vidéo qui démarre sans qu'on l'ait demandée, les images animées au format ancien. Sur un processeur modeste, ces effets consomment la ressource disponible pendant que le visiteur essaie de faire défiler la page.
Le symptôme est facile à décrire : le doigt glisse, la page ne suit pas, puis rattrape d'un coup. Le téléphone chauffe, la batterie descend, et le navigateur finit parfois par fermer l'onglet.
Ce qui se corrige : garder les animations qui informent — l'ouverture d'un menu, la confirmation après un clic — et retirer celles qui décorent. Respecter aussi le réglage du téléphone qui demande moins de mouvement, une préférence que le navigateur transmet à votre site et que beaucoup ignorent. Enfin, préférer les transitions légères, sur l'opacité ou la position, à celles qui obligent le navigateur à recalculer toute la mise en page à chaque image.
Un ralentissement volontaire du processeur dans les outils du navigateur aide à repérer les animations les plus lourdes. C'est une simulation commode, pas une preuve : l'épreuve reste le téléphone.
Les formulaires mal adaptés
Un formulaire est l'endroit où le visiteur est le plus près de vous contacter, et c'est souvent là qu'il abandonne. Sur un téléphone, quatre défauts suffisent à le faire partir. Le mauvais clavier d'abord : un champ téléphone qui ouvre le clavier des lettres, un champ e-mail qui refuse la touche arobase parce qu'il est mal typé. Le texte trop petit ensuite : un champ dont la police descend sous 16 pixels déclenche un zoom automatique sur certains téléphones, et le visiteur se retrouve avec une page agrandie qu'il doit réduire à la main.
Le troisième défaut est le nombre de champs. Chaque champ demandé est une occasion de renoncer, et beaucoup de formulaires réclament le nom, le prénom, l'e-mail, la ville et l'objet pour une simple demande de prix. Gardez ce qui vous sert à rappeler la personne : un nom, un numéro, un message. Le quatrième défaut est le silence : quand une erreur survient, elle se signale parfois par une seule bordure rouge. Sur un petit écran, au soleil, cela ne se voit pas. Écrivez en toutes lettres ce qui manque.
Deux détails pratiques font gagner du temps au visiteur. Les étiquettes restent visibles au-dessus de chaque champ, parce qu'un texte d'exemple disparaît dès la première lettre tapée et laisse le champ anonyme. Et les champs autorisent le collage, ainsi que les espaces dans un numéro de téléphone : bloquer l'un ou l'autre oblige à tout retaper.
Le test tient en une minute : remplissez votre propre formulaire sur votre téléphone, à une main, et chronométrez. S'il vous faut trois minutes, vos visiteurs n'iront pas au bout.
Les images surdimensionnées
Une image de plusieurs mégaoctets coûte deux fois sur un téléphone modeste : en données consommées et en mémoire occupée. Elle arrive lentement, puis son affichage peut faire saccader la page, parce que le processeur doit la décoder d'un coup.
Les règles utiles sont détaillées dans Images de site : le format qui divise le poids par dix : redimensionner à la largeur d'affichage réelle, convertir au format adapté, déclarer les dimensions pour que la mise en page ne bouge pas, et différer le chargement de ce qui est hors écran. Il reste un point propre au mobile : l'image du premier écran, celle qui porte votre message, doit être la plus légère du site et ne jamais être différée, sinon le visiteur voit un cadre vide pendant que la page finit de se construire.
Une précaution supplémentaire concerne les images déclarées avec leurs dimensions : si elles n'arrivent pas — connexion coupée, forfait épuisé, mode économie de données —, la page reste lisible à leur place. C'est une différence que vos visiteurs remarquent sans savoir la nommer.
Les menus inutilisables au pouce
Le menu est le premier endroit où un site échoue sur téléphone, et les défauts se répètent. Le bouton qui ouvre le menu est trop petit, ou il ne répond qu'au centre exact de l'icône. Le menu ouvert couvre tout l'écran sans bouton de fermeture visible, et le visiteur cherche une sortie. Les sous-menus n'apparaissent qu'au survol de la souris : sur un écran tactile, il n'y a pas de survol, donc les pages intérieures deviennent inaccessibles.
Les liens trop serrés créent un autre problème : le doigt vise un élément et touche son voisin, ce qui ouvre la mauvaise page. La recommandation d'accessibilité la plus courante donne une cible d'au moins 44 pixels de côté, avec un peu d'espace entre les cibles. Ce n'est pas une question d'esthétique : c'est la taille du doigt.
Trois gestes corrigent l'essentiel. Limitez le menu principal à cinq ou six entrées, et rangez le reste ailleurs. Rendez le numéro de téléphone et le bouton de messagerie cliquables partout où ils apparaissent, y compris dans le pied de page. Vérifiez que le bouton de contact n'est pas recouvert par un bandeau d'information ou par une fenêtre qui s'ouvre au chargement : c'est le cas le plus fréquent, et le plus coûteux.
Le test se fait à une main, debout : ouvrez le menu, parcourez-le, appelez depuis la page. Si vous devez poser le téléphone ou utiliser deux mains, vos visiteurs non plus ne le feront pas.
Tester sur un vrai appareil plutôt qu'en simulation
Les fenêtres de simulation des navigateurs reproduisent la taille de l'écran, pas la lenteur. Elles tournent sur votre machine, avec votre processeur, votre connexion et un cache déjà vide de tout. Un site qui paraît rapide dans cet affichage peut être inutilisable sur un appareil réel.
La méthode tient en six étapes. Prenez le téléphone le plus modeste disponible autour de vous, celui dont personne ne veut plus. Utilisez une carte SIM ordinaire, avec un forfait normal, jamais le wifi du bureau. Ouvrez votre site en navigation privée, et comptez les secondes jusqu'à ce que le texte soit lisible. Faites défiler la page entière, sans vous arrêter, jusqu'au pied de page. Remplissez le formulaire et appelez depuis le site. Recommencez le lendemain, à une heure de forte affluence, quand le réseau est chargé.
Ajoutez trois conditions qui changent tout : une main, la position debout, et la luminosité de l'écran à moitié. C'est ainsi que vos visiteurs consultent votre site, pas assis dans un bureau avec le téléphone posé à plat.
Une dernière épreuve vaut tous les tests automatiques. Demandez à deux personnes qui ne connaissent pas votre site d'accomplir une tâche précise : trouver votre numéro, ou demander un prix. Regardez sans aider, et notez les trois premières hésitations. Ces trois points sont vos priorités, et ils ne figurent presque jamais dans les rapports d'outils.
Notez ce que vous observez, avec la date et le nom de l'appareil. Une phrase suffit : page d'accueil lisible en six secondes, menu ouvert sans problème, formulaire rempli en une minute. Six mois plus tard, cette note vous dira si le site a progressé ou régressé, et elle évitera les discussions d'impression.
Rien, dans cette liste, ne demande une refonte complète. Alléger une police, retirer une animation, corriger un champ de formulaire, rendre un numéro cliquable : ce sont des corrections d'une heure ou d'une journée, et ce sont celles que vos visiteurs remarquent tout de suite.
Un site qui tient sur un téléphone modeste
La page site web présente ce qui est vérifié avant la mise en ligne : affichage sur petit écran, poids des pages, formulaires, et mesures relevées à la livraison.
Voir la page site web Écrire sur WhatsAppFAQ — site mobile et appareils modestes
Faut-il une version mobile séparée de mon site ?
Non. Un site unique qui s'adapte à la taille de l'écran évite d'entretenir deux versions, avec les oublis que cela suppose : un prix corrigé d'un côté et pas de l'autre, une page ajoutée seulement sur l'ordinateur. Les moteurs de recherche explorent d'ailleurs vos pages en priorité avec un agent mobile. Une seule version responsive, testée sur un appareil modeste, couvre le besoin.
Comment savoir quels téléphones utilisent mes visiteurs ?
Les outils de mesure d'audience donnent un rapport par appareil, par système et parfois par modèle. Ces chiffres restent partiels, parce qu'une partie des visiteurs est bloquée par le bandeau de consentement. Le test le plus fiable ne demande aucune donnée : prenez l'appareil le plus faible disponible autour de vous et utilisez votre site avec. Si cela tient sur celui-là, cela tiendra sur les autres.
Mon site est fluide sur mon téléphone, pourquoi pas sur le leur ?
Parce que les conditions ne sont pas les mêmes. Votre appareil est récent, il est souvent en wifi, son cache contient déjà vos images, et peu d'applications tournent en arrière-plan. Le leur a une mémoire occupée, une connexion partagée, un système plus ancien et une page qu'il découvre pour la première fois. C'est la première visite qui compte, pas la troisième.
Faut-il supprimer toutes les animations du site ?
Non. Une animation qui informe a sa place : l'ouverture d'un menu, la confirmation qu'un message est parti, l'indication qu'un chargement est en cours. Ce qui se retire, ce sont les animations décoratives qui tournent en continu et consomment le processeur pendant que le visiteur essaie de lire ou de faire défiler. La règle est simple : si l'animation n'apporte aucune information, elle coûte sans rien rendre.
Le mode économie de données change-t-il quelque chose pour mon site ?
Oui. Activé sur un téléphone, ce mode limite l'usage des données en arrière-plan et peut compresser les images reçues. Un site lourd reste pénalisé, parce que le poids à télécharger ne change pas, mais les éléments qui se chargent sans que le visiteur l'ait demandé passent souvent à la trappe. C'est une raison de plus de ne rien lancer automatiquement et de laisser le visiteur décider de ce qu'il ouvre.
Combien de temps une page doit-elle mettre à s'afficher ?
Google publie un repère de 2,5 secondes pour l'affichage du contenu principal sur mobile. Sur un téléphone modeste et un réseau réel, ce repère se tient si la page est légère et si l'image principale n'est pas différée. Le repère le plus utile reste le vôtre : mesurez la même page, sur le même appareil, à des moments différents, et comparez. C'est l'évolution de ce chiffre qui dit si votre site progresse.