Dans la plupart des projets que nous suivons, la part de trafic mobile dépasse largement les trois quarts. Pourtant, la maquette est encore souvent validée sur un grand écran, en réunion, par des gens qui ne verront jamais le site comme leurs clients le verront. Voici ce que « mobile first » veut dire concrètement, au-delà du slogan.
La réalité de l'usage local
Le mobile est devenu le point d'entrée par défaut. L'essentiel du trafic web se fait aujourd'hui par téléphone, souvent sur des appareils de milieu de gamme, en déplacement, avec une qualité de réseau qui varie fortement selon l'endroit et le moment - une zone blanche, un métro, un TER suffisent à dégrader l'expérience.
Trois conséquences directes :
- Le poids de la page est un coût réel pour votre visiteur. Un site de 8 Mo ne se contente pas d'être lent : il consomme le forfait de la personne.
- La puissance de l'appareil est limitée. Un site surchargé de scripts sera fluide sur votre ordinateur et saccadé sur le téléphone de votre client.
- Le réseau est instable. Un site qui dépend de dix requêtes externes échoue dès que l'une d'elles traîne.
Concevoir en partant du petit écran
« Mobile first » n'est pas une technique d'intégration, c'est une méthode de conception. On dessine d'abord la version la plus contrainte, puis on enrichit pour les écrans plus larges. L'inverse - dessiner en grand puis « adapter » - produit systématiquement des pages mobiles bricolées.
L'intérêt est autant stratégique que technique : sur un petit écran, vous ne pouvez pas tout mettre au même niveau. Vous êtes forcé de hiérarchiser réellement, de choisir un message principal et une action principale. Cette discipline améliore aussi la version bureau.
Si votre message ne tient pas sur un écran de téléphone, ce n'est pas un problème d'écran. C'est un problème de message.
Les règles concrètes à appliquer
Des cibles tactiles confortables
Environ 44 pixels de côté minimum pour tout élément cliquable, avec un espacement suffisant entre deux cibles voisines. Un pouce n'est pas un curseur de souris : il est large et imprécis.
Le pouce commande
Les actions importantes doivent se situer dans la zone naturellement accessible d'une main - plutôt en bas et au centre. Un bouton de validation collé en haut à droite oblige à changer de prise.
Une typographie lisible
16 pixels minimum pour le texte courant. En dessous, non seulement la lecture devient pénible, mais certains navigateurs déclenchent un zoom automatique sur les champs de formulaire, ce qui désoriente complètement.
Des formulaires adaptés
Utilisez les bons types de champs : type="tel" pour un numéro affiche un pavé numérique, type="email" affiche le clavier adéquat. Ajoutez les attributs d'auto-complétion. Ce sont trois minutes de travail qui changent l'expérience du tout au tout.
Pas de survol comme seul moyen d'accès
Un menu qui ne s'ouvre qu'au passage de la souris est inaccessible au doigt. Toute information cachée derrière un survol doit avoir une alternative tactile.
La performance fait partie du design
Un très beau site lent est un mauvais site. Sur mobile, la performance n'est pas un sujet technique séparé : elle conditionne directement la perception de qualité.
- Images : dimensionnées à la taille réelle d'affichage, compressées, servies en WebP ou AVIF, avec
loading="lazy"pour ce qui n'est pas visible d'emblée. - Polices : deux familles maximum, deux graisses chacune, avec
font-display: swappour que le texte s'affiche immédiatement. - Scripts : chaque bibliothèque externe doit se justifier. Un carrousel de 90 Ko pour trois images n'en vaut jamais la peine.
- Dimensions réservées : indiquez la largeur et la hauteur des images pour éviter que la page ne saute pendant le chargement - c'est l'un des défauts les plus agaçants pour un visiteur.
Le test honnête
Testez votre site sur un téléphone d'entrée de gamme, en 3G bridée, hors de votre bureau. Pas sur votre dernier modèle en wifi. C'est la seule manière de savoir ce que vivent vos visiteurs.
Comment vérifier avant la mise en ligne
Une courte liste de contrôle avant de publier, qui attrape l'essentiel des problèmes :
- La page tient-elle sans défilement horizontal sur 360 pixels de large ?
- L'action principale est-elle atteignable d'une seule main ?
- Le contenu principal apparaît-il en moins de trois secondes en 3G ?
- Les textes restent-ils lisibles en plein soleil, contraste vérifié ?
- Le menu s'ouvre-t-il et se ferme-t-il sans piéger le défilement ?
- Le numéro de téléphone est-il cliquable pour appeler directement ?
Ces six vérifications prennent dix minutes et évitent la majorité des mauvaises surprises. Pour aller plus loin sur les aspects mesurables, voyez notre article sur les Core Web Vitals.