Designul responsive a rezolvat problema layout-ului. Media queries și gridurile fluide asigură că conținutul se redistribuie pe dimensiunile ecranului fără scroll orizontal sau elemente suprapuse. Dar adaptarea layout-ului este experiența mobilă minimă viabilă, nu obiectivul. Adevăratul design mobile-first necesită regândirea fiecărui aspect al experienței utilizatorului pentru constrângerile și capabilitățile dispozitivelor mobile.
Arhitectura informației trebuie reproiectată, nu doar redistribuită. Pe desktop, utilizatorii pot scana o pagină cu zeci de elemente vizibile și pot găsi ce au nevoie prin recunoaștere spațială. Pe mobil, viewport-ul constrânge conținutul vizibil la o mână de elemente la un moment dat. Aceasta necesită o abordare fundamental diferită a ierarhiei conținutului. Proiectăm mai întâi arhitectura informației pentru mobil, folosind dezvăluirea progresivă pentru a evidenția conținutul și acțiunile cele mai critice, menținând în același timp informațiile secundare accesibile dar fără a concura pentru atenție. Layout-ul desktop apoi extinde această ierarhie în loc să încerce să comprime un layout desktop într-un viewport mobil.
Tiparele de interacțiune diferă profund între interfețele tactile și cele cu pointer. Țintele de atingere au nevoie de minimum 44 de pixeli, dar designul mobil excelent merge mai departe. Gesturile de swipe, pull-to-refresh și navigarea prin bottom-sheet exploatează ergonomia naturală a utilizării telefonului cu o singură mână. Plasăm acțiunile primare în zona degetului mare, arcul părții inferioare a ecranului pe care utilizatorii îl pot atinge fără a-și repoziționa prinderea. Tiparele de navigare precum tab-urile de jos și butoanele de acțiune flotante mențin controalele critice la îndemână în loc să fie ascunse în spatele unui meniu hamburger din partea de sus a ecranului.
Performanța este o decizie de design, nu doar o preocupare de inginerie. Utilizatorii mobili operează frecvent pe rețele constrânse și procesoare mai puțin puternice. Fiecare decizie de design are o implicație de performanță. Imaginile hero, bibliotecile de animații, fonturile web și scripturile terțe concurează toate pentru aceeași lățime de bandă și putere de procesare limitate. Stabilim bugete de performanță în etapa de design: o greutate maximă a paginii, un obiectiv pentru Largest Contentful Paint și un prag de responsivitate a interacțiunii. Designerii creează apoi în cadrul acestor constrângeri în loc să predea design-uri pe care ingineria trebuie să le compromită ulterior pentru a îndeplini obiectivele de performanță.