Strona responsywna - jak ją sprawdzić i co naprawić

Strona responsywna to jeden serwis, który sam dopasowuje układ do szerokości ekranu: na telefonie, tablecie i monitorze. Sprawdzisz to w pół minuty, zwężając okno przeglądarki do szerokości dłoni. Jeśli pojawi się poziomy suwak, a tekst trzeba powiększać palcami, strona nie jest responsywna i Google ocenia ją właśnie w tej wersji.

Ten tekst pokazuje, jak zrobić test samodzielnie, co psuje się najczęściej i ile kosztuje doprowadzenie strony do porządku. Bez procentów ruchu mobilnego, bo ta liczba różni się branżą i lepiej odczytać ją we własnej analityce niż z cudzego artykułu.

Test w pół minuty, bez żadnego narzędzia

Otwórz swoją stronę na komputerze i zwężaj okno przeglądarki, aż będzie wąskie jak telefon. Patrz na cztery rzeczy.

• Poziomy suwak na dole. Nie powinno go być. Jeśli jest, coś ma sztywną szerokość i wystaje poza ekran.
• Wielkość liter. Tekst ma być czytelny bez powiększania. Jeśli trzeba rozsuwać palcami, jest za mały.
• Odstępy między odnośnikami. Sąsiadujące pozycje menu i przyciski mają dać się trafić kciukiem, bez trafiania w sąsiada.
• Formularz. Kliknij pole. Jeśli na telefonie ekran sam się przybliża, pole ma zbyt małą czcionkę.

Dokładniejszą wersję tego testu daje tryb urządzeń mobilnych w przeglądarce: skrót Ctrl+Shift+M w Chrome, potem ustaw szerokość 360 pikseli. To rozsądna szerokość odniesienia dla telefonów, którymi ludzie realnie wchodzą na strony firmowe.

Jedna uwaga. Podgląd w przeglądarce nie pokazuje wszystkiego, bo nie symuluje dotyku ani wolnego łącza. Prawdziwy test to telefon w ręce, najlepiej nie Twój, tylko kogoś, kto tej strony nigdy nie widział.

Co psuje się najczęściej

Scena, którą widać w statystykach, a nie widać w raporcie o usterkach: ktoś szuka usługi, stojąc na przystanku, wchodzi na stronę z wyników wyszukiwania, trafia na cennik wystający poza ekran i po trzech sekundach wraca do Google. W analityce zobaczysz wejście bez żadnej akcji, nie informację o popsutym układzie. Dlatego takie błędy potrafią stać na stronie latami.

Najczęstszy winowajca to jeden element ze sztywną szerokością, podany w pikselach zamiast w procentach. Wystarczy jedna taka tabela, żeby cała strona dostała poziomy suwak i wyglądała na zepsutą.

Responsywna to nie to samo co osobna wersja mobilna

Spotyka się jeszcze rozwiązanie, w którym firma ma dwie strony: zwykłą i osobną pod adresem zaczynającym się od m. Wygląda to niewinnie, a kosztuje podwójnie.

Każdą zmianę wprowadza się dwa razy. Treść rozjeżdża się po kilku miesiącach, bo ktoś poprawił cennik tylko w jednym miejscu. Do tego dochodzą przekierowania i adresy kanoniczne, które muszą być ustawione bezbłędnie, inaczej wyszukiwarka widzi dwie wersje tego samego.

Przy responsywnym układzie jest jeden adres i jedna treść. Zmiana ceny to jedna edycja. Dlatego dziś to rozwiązanie domyślne, a nie jedna z opcji do rozważenia.

Google ocenia wersję mobilną, nie komputerową

Wyszukiwarka indeksuje stronę tak, jak widzi ją telefon. Wynika z tego rzecz, którą łatwo przeoczyć: treść ukryta na małym ekranie to treść, której wyszukiwarka może nie policzyć w pełni.

Typowy błąd wygląda tak. Ktoś chce, żeby na telefonie było „czyściej", więc ukrywa opis usługi, tabelę i sekcję pytań, zostawiając zdjęcie i przycisk. Na komputerze strona ma 1 200 słów, na telefonie 200. Pozycje spadają, a nikt nie łączy tego z wyglądem na telefonie, bo na monitorze wszystko jest na miejscu.

Ukrywanie treści w zwijanych blokach jest bezpieczne, bo tekst zostaje w kodzie. Usuwanie go z wersji mobilnej już nie.

Wersja mobilna jest więc punktem wyjścia do wszystkiego, co robi się później: bez niej pozycjonowanie stron zaczyna się od straty, a koszt nadrabiania rośnie z każdym miesiącem. Stawki rozpisaliśmy w cenniku pozycjonowania.

Trzy progi, które Google mierzy na telefonie

Telefon ma słabszy procesor i gorsze łącze niż komputer w biurze. Strona, która na monitorze ładuje się natychmiast, na telefonie w terenie potrafi pokazać pusty ekran przez kilka sekund. Dlatego pomiary z własnego laptopa mówią mało.

Największy pojedynczy zysk daje zwykle jedno zdjęcie: to z górnej sekcji. Zdjęcie o wadze 3 MB wgrane bez zmniejszenia potrafi samo odpowiadać za przekroczenie progu LCP.

Na jakich szerokościach sprawdzać

Szerokość 768 pikseli bywa pomijana i to właśnie tam wychodzi najwięcej usterek. Układ jest już za wąski na dwie kolumny, a jeszcze nie przełączył się na wersję telefonową.

Cztery poprawki, które zrobisz w godzinę

Jeśli szablon jest responsywny, a psują go pojedyncze elementy, większość da się naprawić własnym arkuszem stylów. W WordPressie wkleja się go w Wygląd, Dostosuj, Dodatkowy CSS.

/* tabela przewija sie sama, zamiast rozpychac strone */
table { display: block; overflow-x: auto; max-width: 100%; }

/* pola formularza nie powoduja przyblizenia na iPhonie */
input, select, textarea { font-size: 16px; }

/* dlugie adresy i kody lamia sie zamiast wystawac poza ekran */
p, li, td { overflow-wrap: break-word; }

/* przycisk da sie trafic kciukiem */
.btn, button { min-height: 44px; padding: 12px 20px; }

Piątą poprawkę robi się poza kodem: zdjęcie z górnej sekcji zmniejsz do szerokości około 1 600 pikseli i zapisz w formacie WebP. To zwykle największy pojedynczy zysk na czasie ładowania i nie wymaga dotykania układu.

Czego tym sposobem nie naprawisz: sztywnej szerokości wpisanej w sam szablon, sekcji zbudowanej na pozycjonowaniu bezwzględnym i menu, które nie ma wersji zwijanej. Tu kończą się poprawki, a zaczyna praca nad szablonem.

Ile kosztuje doprowadzenie strony do porządku

Są dwa scenariusze i dzieli je wyraźna granica.

Poprawki na istniejącej stronie. Jeśli szablon jest responsywny, a psują go pojedyncze elementy, to praca na godziny: tabele do przewijania, zdjęcia do przekadrowania, powiększone pola formularza, poprawione odstępy przycisków. Zwykle mieści się to w jednym dniu pracy i nie wymaga ruszania układu.

Strona zbudowana bez myślenia o telefonie. Tu poprawki są droższe od przebudowy, bo każda zmiana odsłania kolejną. Strona na gotowym szablonie zaczyna się u nas od 1 900 zł, projekt autorski od 3 000 zł. Zakres opisuje strona strony internetowe, a pełne zestawienie stoi w cenniku.

Przy przebudowie jest jeden warunek, od którego zależy, czy operacja się opłaci: mapa przekierowań ze starych adresów na nowe. Bez niej strona traci pozycje razem z ruchem. Opisaliśmy to osobno w tekście o przebudowie strony bez utraty pozycji.

Czego responsywność nie załatwi

Dopasowanie układu do ekranu to warunek wejścia, nie przewaga. Strona może być bez zarzutu na telefonie i dalej nie przynosić zapytań.

• Treść. Jeśli nie odpowiada na pytanie klienta, układ nie ma znaczenia.
• Numer telefonu. Na telefonie ma być klikalny i widoczny bez przewijania.
• Formularz. Siedem pól na małym ekranie to siedem powodów do rezygnacji.
• Szybkość serwera. Responsywny układ na wolnym hostingu dalej każe czekać.

Kolejność jest taka: najpierw strona ma się otworzyć i dać czytać, potem ma przekonywać. Pierwsze bez drugiego to ładnie złożona wizytówka, na którą nikt nie odpowiada.

Najczęstsze pytania

Sprawdzimy Twoją stronę na telefonie bezpłatnie