Luke Wroblewski nadał tej praktyce nazwę w 2009 roku, ale logika już wtedy nagliła. Telefony stały się głównym sposobem dostępu do internetu, a projektowanie układów desktopowych najpierw zmusiło projektantów do upchnięcia złożoności na małych ekranach. Zasada „mobile first” odwraca tę kolejność. Zacznij od najmniejszego ekranu, zdecyduj, co jest najważniejsze, a następnie rozszerz ją na układy tabletów i komputerów stacjonarnych.

To ograniczenie jest produktywne. Wąski obszar widoku wymusza selekcję. Nawigacja zwija się do menu. Treść mieści się w jednej kolumnie. Każda funkcja musi być odpowiednio zagospodarowana. Projektanci szkicują przyjazne dla kciuka elementy dotykowe, biorą pod uwagę obsługę jedną ręką i planują wolne połączenia. Gdy projekt rozrasta się na większy ekran, dodatkowa przestrzeń jest wykorzystywana na przestrzeń do oddychania i panele pomocnicze, zamiast być zaśmiecana nowymi elementami.

Podstawowe praktyki

• Rozpocznij tworzenie modeli szkieletowych na szerokości telefonu.
• Bezwzględnie ustalaj priorytety treści.
• Zaprojektuj obiekty dotykowe o rozmiarze co najmniej 44 pikseli.
• Na koniec przesuń palcem w górę i przejdź na tablet i komputer stacjonarny.

Responsywny design i mobile-first często idą w parze. Mobile-first nadaje priorytet. Responsywność obsługuje adaptację w punktach przerwania.