Le design responsive a résolu le problème de mise en page. Les media queries et les grilles fluides garantissent que le contenu se redistribue sur différentes tailles d'écran sans défilement horizontal ni chevauchement d'éléments. Mais l'adaptation de la mise en page est l'expérience mobile minimale viable, pas l'objectif. Le véritable design mobile-first exige de repenser chaque aspect de l'expérience utilisateur en fonction des contraintes et des capacités des appareils mobiles.
L'architecture de l'information doit être reconçue, pas simplement redistribuée. Sur desktop, les utilisateurs peuvent balayer une page contenant des dizaines d'éléments visibles et trouver ce dont ils ont besoin grâce à la reconnaissance spatiale. Sur mobile, le viewport limite le contenu visible à une poignée d'éléments à la fois. Cela exige une approche fondamentalement différente de la hiérarchie du contenu. Nous concevons d'abord l'architecture de l'information mobile, en utilisant la divulgation progressive pour mettre en avant le contenu et les actions les plus critiques tout en gardant les informations secondaires accessibles mais sans concurrence pour l'attention. La mise en page desktop étend ensuite cette hiérarchie plutôt que d'essayer de comprimer une mise en page desktop dans un viewport mobile.
Les patterns d'interaction diffèrent profondément entre les interfaces tactiles et les interfaces à pointeur. Les zones tactiles nécessitent un minimum de 44 pixels, mais un excellent design mobile va plus loin. Les gestes de balayage, le pull-to-refresh et la navigation par bottom-sheet exploitent l'ergonomie naturelle de l'utilisation du téléphone à une main. Nous plaçons les actions principales dans la zone du pouce, l'arc de la partie inférieure de l'écran que les utilisateurs peuvent atteindre sans repositionner leur prise. Les patterns de navigation comme les onglets en bas et les boutons d'action flottants gardent les contrôles critiques à portée de main plutôt que cachés derrière un menu hamburger en haut de l'écran.
La performance est une décision de design, pas seulement une préoccupation d'ingénierie. Les utilisateurs mobiles opèrent fréquemment sur des réseaux limités et des processeurs moins puissants. Chaque choix de design a une implication de performance. Les images hero, les bibliothèques d'animation, les polices web et les scripts tiers se disputent la même bande passante et la même puissance de traitement limitées. Nous fixons des budgets de performance dès la phase de design : un poids de page maximum, un Largest Contentful Paint cible et un seuil de réactivité d'interaction. Les designers créent alors dans ces contraintes plutôt que de remettre des maquettes que l'ingénierie devra ensuite compromettre pour atteindre les objectifs de performance.