Responsywne strony internetowe — dlaczego wersja mobilna decyduje

Zdanie „strona musi być responsywna” brzmi dziś jak truizm — każdy szablon ma to w opisie. A mimo to co drugi audyt kończy się tą samą uwagą: na komputerze wszystko gra, na telefonie strona wymaga przesuwania w bok, przycisk chowa się pod banerem cookies, a formularz da się wypełnić tylko z powiększeniem.

Responsywność to nie przełącznik. To seria decyzji, które trzeba podjąć świadomie — albo ktoś podejmie je za Ciebie.

Dlaczego to nie jest już „dodatek dla mobilnych”

Dwie rzeczy zmieniły ten temat na dobre.

Po pierwsze, większość ruchu na stronach firmowych pochodzi dziś z telefonów — w wielu branżach usługowych to 60–75% wejść. Wersja mobilna nie jest wariantem strony, tylko wersją podstawową, którą zobaczy większość Twoich klientów.

Po drugie, Google indeksuje strony w trybie mobile-first. To znaczy, że robot ogląda Twoją witrynę tak, jak widać ją na telefonie — i na tej podstawie ocenia. Jeśli wersja mobilna ma uciętą treść albo ukryte sekcje, Google widzi wersję uboższą.

Responsywna to nie to samo co zmniejszona

Najczęstszy błąd polega na potraktowaniu telefonu jak węższego monitora. Kolumny układają się jedna pod drugą, czcionka maleje i formalnie „działa”. Tylko że na telefonie zmienia się nie tylko szerokość — zmienia się sytuacja użytkownika.

  • Palec zamiast kursora. Odnośnik wielkości dwunastu pikseli, który na myszy trafia się bezbłędnie, na telefonie wymaga trzech prób. Minimalne pole dotyku to około 44 piksele.
  • Inny kontekst. Ktoś szuka telefonu do warsztatu, stojąc przy zepsutym aucie. Numer i godziny otwarcia muszą być pierwsze, nie w stopce.
  • Gorsze łącze. Ta sama strona w LTE na skraju zasięgu ładuje się kilka razy dłużej niż po światłowodzie w biurze.
  • Mniej cierpliwości. Na telefonie decyzja o zamknięciu karty zapada szybciej.

Co sprawdzić na własnej stronie — dziesięć minut z telefonem w ręku

  1. Czy da się przeczytać treść bez powiększania?
  2. Czy cokolwiek wymaga przesuwania w poziomie? Nic nie powinno.
  3. Czy numer telefonu jest klikalny i dzwoni po dotknięciu?
  4. Czy menu otwiera się jednym dotknięciem i da się z niego wyjść?
  5. Czy formularz da się wypełnić kciukiem, a klawiatura nie zasłania pola?
  6. Czy treść nie skacze podczas ładowania?
  7. Czy baner cookies da się zamknąć bez celowania w krzyżyk wielkości ziarnka?
  8. Czy najważniejsza informacja jest widoczna bez przewijania?

Każde „nie” na tej liście to konkretna liczba osób, które nie zadzwonią.

Związek z szybkością i pozycjami

Responsywność i wydajność to w praktyce jeden temat. Google mierzy Core Web Vitals na prawdziwych urządzeniach mobilnych, a wskaźnik CLS — czyli „skakanie” treści — najboleśniej widać właśnie na wąskim ekranie. Obrazek bez zarezerwowanego miejsca przesuwa na komputerze niewiele, na telefonie — cały ekran.

Dlatego przy poprawianiu wersji mobilnej zwykle poprawia się przy okazji wynik szybkości. I odwrotnie — optymalizacja szybkości najmocniej odczuwalna jest właśnie na telefonach.

Jak podchodzę do tego przy projektowaniu

Zaczynam od wąskiego ekranu, nie od szerokiego. Brzmi wstecznie, ale ma prosty powód: na telefonie mieszczą się tylko rzeczy naprawdę istotne. Gdy układ działa w tych warunkach, rozszerzenie go na monitor jest łatwe. W drugą stronę zwykle kończy się chowaniem połowy treści pod przyciskiem „pokaż więcej”.

Testuję też na prawdziwych urządzeniach, nie tylko w trybie mobilnym przeglądarki. Symulator nie odda działania klawiatury, przewijania ani tego, jak zachowuje się pasek adresu przy przewijaniu w górę.

Gdy strona nie nadaje się do poprawek

Często da się poprawić istniejącą wersję mobilną punktowo — powiększyć pola dotyku, poprawić menu, uporządkować odstępy. Ale jeśli strona powstała przed 2018 rokiem albo stoi na motywie, który traktuje telefon jako dodatek, łatanie bywa droższe niż zbudowanie strony od nowa.

Nie zgaduję tego z góry — prześlij adres, a napiszę, która droga jest w Twoim przypadku tańsza.

Powiązane wpisy