Strona mobilna: jak projektować mobile first w praktyce

Strona mobilna to dziś podstawowa wersja strony, a nie jej pomniejszona kopia. Dla wielu firm większość odwiedzających przychodzi z telefonów, a Google ocenia strony przede wszystkim w wersji mobilnej. Projektowanie mobile first oznacza, że najpierw układasz stronę na mały ekran, a dopiero potem rozbudowujesz ją na komputer. Poniżej pokazujemy, jak to wygląda w praktyce i co sprawdzić na własnej stronie.

Czym jest mobile first i dlaczego to coś więcej niż responsywność

Strona responsywna dopasowuje się do szerokości ekranu. Problem w tym, że wiele takich stron projektowano na duży monitor, a wersja na telefon powstawała na końcu: kolumny spadają jedna pod drugą, menu chowa się pod ikoną, a najważniejszy przycisk ląduje gdzieś na czwartym ekranie.

Mobile first odwraca kolejność. Na małym ekranie mieści się mało, więc trzeba zdecydować, co jest najważniejsze. To dyscyplinuje cały projekt: krótsze nagłówki, jasna hierarchia, mniej ozdobników. Wersja na komputer dostaje potem więcej przestrzeni, ale opiera się na tej samej logice.

Zacznij od treści, a nie od układu

Projekt mobilny zaczyna się od listy treści w kolejności ważności dla klienta. Typowa strona usługi na telefonie wygląda tak:

1. Nagłówek: co robisz, dla kogo, gdzie.
2. Główne działanie: przycisk „Zadzwoń” lub „Poproś o wycenę”.
3. Krótkie argumenty: dlaczego Ty, w trzech, czterech punktach.
4. Dowody: opinie, realizacje, liczby.
5. Szczegóły oferty i ceny.
6. Najczęstsze pytania.
7. Formularz lub ponowne wezwanie do działania.

Jeśli coś nie mieści się na tej liście, zastanów się, czy w ogóle jest potrzebne. Na komputerze łatwo ukryć zbędne treści w szerokim układzie. Na telefonie każda sekcja to kolejne przewinięcie.

Wygoda kciuka: przyciski, odstępy, nawigacja

Telefon obsługuje się zwykle jedną ręką. To zmienia zasady projektowania.

• Wielkość elementów klikalnych. Wytyczne dostępności WCAG 2.2 przyjmują minimum 24 na 24 piksele, a w praktyce warto celować w około 44–48 pikseli wysokości dla przycisków i pozycji menu.
• Odstępy. Dwa linki tuż obok siebie to prosta droga do pomyłek. Między elementami klikalnymi zostaw wyraźną przestrzeń.
• Najważniejsze działanie w zasięgu kciuka. Przycisk przyklejony do dołu ekranu („Zadzwoń”, „Zarezerwuj”) jest łatwiej dostępny niż ikona w prawym górnym rogu.
• Proste menu. Kilka pozycji, duże, czytelne, z wyraźnym przyciskiem zamknięcia. Rozbudowane menu z wieloma poziomami lepiej zastąpić linkami w treści.
• Klikalny telefon i adres. Numer musi otwierać połączenie, a adres mapę.

Czytelność na małym ekranie

• Tekst co najmniej 16 pikseli dla treści. W polach formularza mniejsza czcionka sprawia, że część telefonów automatycznie powiększa stronę, co wybija z rytmu.
• Krótkie akapity, dwa, trzy zdania. Ściana tekstu na telefonie wygląda dwa razy gorzej niż na monitorze.
• Kontrast, bo telefon często używany jest na słońcu.
• Tabele, które na wąskim ekranie przewijają się w poziomie w obrębie tabeli albo zamieniają się w karty. Tabela rozpychająca całą stronę to częsty błąd.
• Nagłówki sekcji, które pozwalają szybko przewinąć do potrzebnej części.

Zdjęcia, filmy i grafiki na wąskim ekranie

Obraz, który na monitorze wygląda efektownie, na telefonie bywa nieczytelny albo niepotrzebnie ciężki. Kilka zasad, które stosujemy:

• Kadruj pod telefon. Szerokie zdjęcie z ludźmi po bokach w pionowym ekranie zamienia się w wąski pasek z kawałkiem tła. Warto przygotować osobny kadr albo ustawić punkt, który ma zostać widoczny.
• Dobieraj rozmiar pliku do ekranu. Telefon nie potrzebuje zdjęcia o szerokości monitora. Nowoczesne formaty, takie jak WebP czy AVIF, i kilka wersji rozmiaru pozwalają przeglądarce pobrać tylko tyle, ile trzeba.
• Unikaj tekstu wpisanego w grafikę. Na małym ekranie robi się mikroskopijny, nie da się go powiększyć ani przetłumaczyć, a czytniki ekranu i wyszukiwarki zwykle go nie odczytają.
• Filmy w tle wyłączaj na telefonie albo zastępuj je zdjęciem. Zjadają transfer i baterię, a rzadko wnoszą treść.
• Infografiki i schematy dziel na mniejsze części albo zamieniaj w listę kroków.

Formularze i interakcje na telefonie

Formularz to miejsce, w którym strona mobilna najczęściej traci klientów. Jedna kolumna, widoczne etykiety, właściwa klawiatura dla e-maila i telefonu, minimum pól. Wszystkie zasady opisujemy w tekście o tym, jak zbudować formularz kontaktowy, który zbiera zapytania.

Uważaj też na elementy, które dobrze działają myszką, a źle palcem:

• menu rozwijane po najechaniu kursorem, które na telefonie nie mają odpowiednika,
• małe strzałki w karuzelach i suwakach,
• okna wyskakujące, które zasłaniają cały ekran i mają malutki krzyżyk,
• mapy i filmy osadzone tak, że przewijając stronę, przypadkiem przesuwa się mapę.

Szybkość: na telefonie liczy się podwójnie

Telefon często łączy się przez sieć komórkową, a jego procesor jest słabszy niż w komputerze. Strona, która ładuje się sprawnie w biurze, na telefonie w tramwaju może irytować.

Google mierzy to wskaźnikami Core Web Vitals. Dobre wartości to:

Wskaźnik	Co mierzy	Dobry wynik
LCP	czas wyświetlenia największego elementu	do 2,5 s
INP	szybkość reakcji na kliknięcie	do 200 ms
CLS	przesuwanie się układu podczas ładowania	do 0,1

Najczęstsze przyczyny słabych wyników to za duże zdjęcia, ciężkie czcionki, widżety zewnętrzne i za dużo skryptów. Przykład z naszej praktyki: strona biura rachunkowego SH TAX osiąga w Lighthouse mobile 100 punktów za SEO i dostępność oraz 94–97 za wydajność. Techniczne podstawy opisujemy też w checkliście SEO technicznego.

Jak testować stronę mobilną

Narzędzia w przeglądarce pokazują, jak strona wygląda na wąskim ekranie, ale nie zastąpią prawdziwego telefonu. Dobry test obejmuje:

• prawdziwe urządzenia: jeden nowszy telefon, jeden starszy i tańszy, z Androidem i z iOS,
• słabszy internet: przełącz telefon na wolniejszą sieć albo wyjdź poza zasięg Wi-Fi,
• ścieżkę klienta: wejście z Google na podstronę usługi, znalezienie ceny, wysłanie zapytania,
• obsługę jedną ręką, w pionie, a potem w poziomie,
• powiększenie tekstu w ustawieniach telefonu, bo wiele osób z niego korzysta.

Szybkie spojrzenie z zewnątrz da Ci nasz darmowy audyt strony.

Lista kontrolna strony mobilnej

• Na pierwszym ekranie telefonu widać, co oferujesz i jak się skontaktować.
• Główny przycisk jest w zasięgu kciuka.
• Telefon i adres są klikalne.
• Przyciski i linki mają wygodną wielkość i odstępy.
• Tekst ma co najmniej 16 pikseli i dobry kontrast.
• Tabele nie rozpychają strony w poziomie.
• Formularz ma jedną kolumnę i właściwe klawiatury.
• Okna wyskakujące nie zasłaniają treści na starcie.
• Core Web Vitals w wersji mobilnej są w zielonym zakresie.
• Ścieżka do zapytania działa na prawdziwym, starszym telefonie.

Czasem pytanie o wersję mobilną dotyczy czegoś więcej niż strony: panelu dla klientów, systemu zamówień, narzędzia dla zespołu. Wtedy pojawia się wybór między aplikacją webową a mobilną. Porównanie obu dróg, razem z PWA, opisujemy w tekście aplikacja webowa czy mobilna. Zasady mobile first obowiązują w obu przypadkach: panel, z którego klient korzysta w przerwie na kawę, musi być równie wygodny na telefonie jak strona z ofertą.

Podsumowanie

Strona mobilna to podstawowa wersja strony, od której warto zaczynać projekt. Mobile first wymusza dobre decyzje: jasną kolejność treści, wygodne przyciski, czytelny tekst i szybkie ładowanie. Testuj na prawdziwych telefonach, przy słabszym internecie, przechodząc całą ścieżkę klienta. Wtedy wersja na komputer też zwykle wychodzi lepiej.

Projektujemy strony od telefonu i dopiero potem rozbudowujemy je na większe ekrany. Zobacz, jak pracujemy przy projektowaniu UX/UI, jeśli Twoja strona na telefonie nie pracuje tak, jak powinna.