Le mobile-first est un ordre de décision, pas une taille d'écran

La plupart des sites « adaptés au mobile » sont des sites bureau qui rétrécissent. La différence se voit sur l'indicateur qui compte.

Le mobile-first est largement revendiqué et rarement pratiqué. L'indice est simple : si la mise en page bureau a été conçue d'abord puis adaptée, l'expérience mobile est un compromis, et chaque compromis est retombé sur la majorité de vos visiteurs.

Ce qui change quand on commence réellement petit

• La priorisation du contenu devient obligatoire. Sur un écran étroit, tout est une file verticale : il faut décider ce qui vient en premier — décision que les mises en page bureau permettent d'esquiver en juxtaposant.
• La navigation devient honnête. Si elle ne tient pas dans un menu que les gens ouvriront vraiment, vous avez trop d'entrées de premier niveau.
• Les formulaires raccourcissent, car chaque champ est une interaction au clavier sur un petit écran, avec un pouce.
• Les images sont budgétées, car le visiteur peut être sur un réseau lent et payer sa data.

Les contraintes physiques qu'on oublie

1. La portée du pouce. Les coins supérieurs d'un grand téléphone sont réellement difficiles à atteindre d'une main ; les actions principales appartiennent à la moitié basse.
2. La taille des zones tactiles. En dessous d'environ 44 pixels, c'est une machine à fausses manipulations, et une fausse manipulation dans un formulaire est un abandon.
3. Le survol n'existe pas. Toute information révélée au survol est invisible pour l'essentiel de votre audience.
4. Le soleil et le mouvement. Un texte gris clair sur gris est lisible dans un bureau sombre et illisible sur un quai de gare.

Les réflexes bureau qui cassent le mobile

Des en-têtes fixes mangeant un tiers d'un écran court. Des fenêtres modales impossibles à fermer au pouce. Des tableaux qui exigent un défilement horizontal dans une page qui défile déjà horizontalement. Des vidéos d'accueil en lecture automatique sur une connexion facturée. Chacun est une décision bureau raisonnable et un échec mobile, et chacun est invisible pour une équipe qui relit son travail sur de grands écrans. C'est le raisonnement derrière notre travail de développement d'applications mobiles, validation des stores comprise.

• 44px zone tactile minimale
• moitié basse où placer les actions principales
• 0 information révélée uniquement au survol

Sur le même thème: Web & Produit.

Vous voulez la même chose pour votre entreprise ? Voir ce que nous faisons.