Il design responsive ha risolto il problema del layout. Le media query e le griglie fluide assicurano che il contenuto si redistribuisca tra le dimensioni dello schermo senza scroll orizzontale o elementi sovrapposti. Ma l'adattamento del layout è l'esperienza mobile minima, non l'obiettivo. Il vero design mobile-first richiede di ripensare ogni aspetto dell'esperienza utente per i vincoli e le capacità dei dispositivi mobili.
L'architettura dell'informazione deve essere riprogettata, non solo ridistribuita. Su desktop, gli utenti possono scansionare una pagina con decine di elementi visibili e trovare ciò di cui hanno bisogno attraverso il riconoscimento spaziale. Su mobile, il viewport limita il contenuto visibile a una manciata di elementi alla volta. Questo richiede un approccio fondamentalmente diverso alla gerarchia dei contenuti. Progettiamo prima l'architettura dell'informazione per il mobile, usando la divulgazione progressiva per far emergere i contenuti e le azioni più critiche mantenendo le informazioni secondarie accessibili ma non in competizione per l'attenzione. Il layout desktop poi espande questa gerarchia piuttosto che cercare di comprimere un layout desktop in un viewport mobile.
I pattern di interazione differiscono profondamente tra interfacce touch e pointer. I target di tocco necessitano di un minimo di 44 pixel, ma un grande design mobile va oltre. Le gesture di swipe, il pull-to-refresh e la navigazione bottom-sheet sfruttano l'ergonomia naturale dell'uso del telefono con una mano. Posizioniamo le azioni primarie nella zona del pollice, l'arco della parte inferiore dello schermo che gli utenti possono raggiungere senza riposizionare la presa. Pattern di navigazione come le tab inferiori e i pulsanti di azione flottanti mantengono i controlli critici a portata di mano piuttosto che nascosti dietro un menu hamburger nella parte superiore dello schermo.
Le prestazioni sono una decisione di design, non solo una preoccupazione ingegneristica. Gli utenti mobili operano frequentemente su reti limitate e processori meno potenti. Ogni scelta di design ha un'implicazione sulle prestazioni. Le immagini hero, le librerie di animazione, i web font e gli script di terze parti competono tutti per la stessa larghezza di banda e potenza di elaborazione limitate. Stabiliamo budget prestazionali nella fase di design: un peso massimo della pagina, un obiettivo per il Largest Contentful Paint e una soglia di reattività dell'interazione. I designer creano quindi entro questi vincoli piuttosto che consegnare design che l'ingegneria deve poi compromettere per raggiungere gli obiettivi prestazionali.