Podejście mobile-first a desktop-first

Responsywny design stron internetowych tworzy układy, które dostosowują się do każdego rozmiaru ekranu — od małych smartfonów po duże monitory komputerowe — za pomocą płynnych siatek, elastycznych obrazów i zapytań o media CSS.

W podejściu mobile-first podstawowe reguły CSS pisze się z myślą o małych ekranach, a następnie za pomocą zapytań o media min-width stopniowo dodaje się złożone rozwiązania dla większych ekranów.

W podejściu desktop-first podstawowe reguły CSS pisze się z myślą o dużych ekranach, a następnie za pomocą zapytań o media max-width wprowadza się nadpisania dla mniejszych ekranów.

Zalety podejścia mobile-first:

• Wymusza ustalenie priorytetów treści (co jest najważniejsze na małych ekranach)
• Stopniowe wzbogacanie — zaczyna się od prostych rozwiązań i dodaje złożoność
• Lepsza wydajność — urządzenie mobilne ładuje tylko podstawowe style, a nie ich nadpisania
• Odpowiada rzeczywistości, w której większość ruchu w internecie pochodzi z urządzeń mobilnych

Podejście mobile-first naturalnie współgra z kaskadą CSS. Style podstawowe są ładowane jako pierwsze, a nadpisania dla większych ekranów pojawiają się później w zapytaniach o media. Oznacza to mniej konfliktów związanych ze specyficznością CSS.

Przed napisaniem CSS należy zadać sobie pytanie: jakiej treści użytkownik mobilny potrzebuje? Na tej podstawie należy zbudować strukturę HTML i podstawowy CSS. Na większych ekranach wzbogaca się doświadczenie użytkownika, zamiast tworzyć je od nowa.

Progressive enhancement (mobile-first) oznacza rozpoczęcie od funkcjonalnego minimum i następnie nakładanie ulepszeń. Graceful degradation (desktop-first) polega na zbudowaniu pełnej wersji, a następnie dostosowaniu jej do mniejszych ekranów. Progressive enhancement jest zazwyczaj bardziej niezawodne.

Użytkownicy urządzeń mobilnych korzystają z palców, a nie z precyzyjnego kursora myszy. Projektowanie mobile-first naturalnie prowadzi do stosowania większych obszarów dotyku (minimum 44x44px) i odpowiednich odstępów między elementami interaktywnymi.

Nawigacja w podejściu mobile-first zazwyczaj zaczyna się od menu hamburgerowego lub wysuwanego panelu, a następnie na większych ekranach rozwija się do widocznego paska nawigacji:

Najpierw należy ustawić wygodne i czytelne rozmiary czcionek dla urządzeń mobilnych, a następnie zwiększyć je na większych ekranach:

Responsywny design może być:

• płynny: wykorzystuje jednostki względne i płynnie dostosowuje się do każdego rozmiaru
• adaptacyjny: przełącza się między stałymi układami w określonych punktach granicznych

Współczesna dobra praktyka łączy oba podejścia: układ jest płynny między punktami granicznymi, a w ich obrębie zmienia się jego struktura.

Projektowanie mobile-first definiuje style podstawowe dla urządzeń mobilnych i używa zapytań min-width, aby wzbogacać układ na większych ekranach. Zachęca do ustalania priorytetów treści, poprawia wydajność i odpowiada współczesnym wzorcom ruchu w internecie. Progressive enhancement rozpoczynające się od małych ekranów prowadzi do bardziej niezawodnych i łatwiejszych w utrzymaniu responsywnych projektów.