DreamDesignersStrona głównaBlogKontakt
Blog  /  Design & WordPress

Design & WordPress

Mobile first bez ściemy: dlaczego Twoja strona przegrywa na telefonie

Responsywny układ strony na różnych ekranach

Ponad połowa ruchu w sieci to dziś telefony — w wielu branżach zdecydowana większość. Mimo to większość stron wciąż powstaje „od komputera”, a wersja mobilna jest doklejana na końcu. Efekt: klient na telefonie dostaje ściśniętą, klikalną z trudem wersję strony i wychodzi. Google zresztą ocenia stronę głównie po jej wersji mobilnej, więc słaby mobile to też słabsza pozycja w wyszukiwarce. Oto co realnie psuje telefon i jak to naprawić.

Projektuj pod kciuk, nie pod kursor

Na komputerze klika się precyzyjnym kursorem. Na telefonie — kciukiem, w ruchu, jedną ręką. Przyciski muszą być duże (wygodne minimum to około 44 px wysokości) i odsunięte od siebie, żeby nie klikać przypadkiem sąsiada. Najważniejsze działania umieszczaj w dolnej połowie ekranu, w zasięgu kciuka — nie w prawym górnym rogu, gdzie na dużym telefonie trudno dosięgnąć.

Tekst, którego nie trzeba przybliżać

Jeśli użytkownik musi rozsuwać palcami ekran, żeby przeczytać ofertę, przegrałeś. Tekst podstawowy to minimum 16 px, z odstępem między wierszami, który daje oddech. Rezygnuj z wielokolumnowych układów — na telefonie wszystko i tak ustawia się w jedną kolumnę, więc zaplanuj tę kolejność świadomie: najważniejsze na górze.

Obrazy, które nie zjadają transferu

Telefon często działa na słabszym łączu niż domowe wi-fi. Ten sam ciężki obraz, który na komputerze ładuje się niezauważalnie, na komórce w terenie potrafi wisieć sekundami. Serwuj lżejsze wersje grafik na mniejsze ekrany i włącz lazy loading, żeby telefon nie pobierał wszystkiego naraz.

Formularze bez frustracji

Wypełnianie formularza na telefonie to test cierpliwości. Skróć go do niezbędnego minimum pól, ustaw odpowiednie typy pól (żeby przy e-mailu wyskakiwała klawiatura z „@”, a przy numerze — cyfrowa) i nie wymagaj rzeczy, których naprawdę nie potrzebujesz. Każde dodatkowe pole to część klientów, która rezygnuje.

Test w 30 sekund: otwórz własną stronę na swoim telefonie i spróbuj wykonać główne działanie — kupić, zapisać się, napisać — jedną ręką, w tramwaju, na słabym zasięgu. To, co Cię wtedy zirytuje, irytuje też klientów. Podgląd mobilny w Elementorze nie zastąpi realnego telefonu.


Mobile first nie znaczy „gorsza wersja dla telefonu”. Znaczy: zaprojektuj najpierw najtrudniejszy, najmniejszy ekran, a wersja na komputer sama się rozłoży wygodnie. Odwrotna kolejność zawsze kończy się kompromisem tam, gdzie masz najwięcej ruchu.

Chcesz stronę, która sprzedaje też na telefonie?

Napisz do mnie →

← Wróć do kategorii Design & WordPress