Co to jest responsywna strona internetowa i jak ją sprawdzić

Responsywna strona internetowa dopasowuje swój układ do szerokości ekranu, na którym się wyświetla. Ten sam adres i ta sama treść układają się inaczej na komputerze, a inaczej na telefonie, bez osobnej wersji mobilnej i bez powiększania palcami.

Ma to znaczenie, bo ponad połowa osób, które trafią na Twoją stronę, zobaczy ją właśnie na telefonie. Jeśli muszą powiększać tekst dwoma palcami albo trafiać w przycisk wielkości ziarnka grochu, wychodzą i klikają w kolejny wynik wyszukiwania. Twój.

Ten tekst mówi, jak sprawdzić własną stronę w minutę, co konkretnie tracisz przy niedostosowanej witrynie i co da się z tym zrobić.

Co znaczy, że strona jest responsywna

Różnica jest w ułożeniu tych samych elementów. Na komputerze menu rozkłada się w poziomie, a treść stoi w trzech kolumnach obok siebie. Na telefonie menu chowa się pod przyciskiem, a kolumny ustawiają się jedna pod drugą. Nie ma drugiego adresu ani drugiej treści do utrzymywania.

Nazwa wzięła się z angielskiego „responsive" — strona reaguje na warunki, w jakich się wyświetla. Podejście opisał Ethan Marcotte w 2010 roku w artykule dla „A List Apart" i przez dekadę stało się standardem, bo alternatywa była kiepska: osobna wersja mobilna pod adresem m.twojafirma.pl, którą trzeba utrzymywać podwójnie i która zawsze zostaje w tyle za główną.

Jak sprawdzić, czy Twoja strona jest responsywna

Trzy sposoby, od najszybszego.

Weź telefon i wejdź na swoją stronę. Bez powiększania spróbuj przeczytać ofertę, kliknąć w numer telefonu i wysłać wiadomość przez formularz. Jeśli którykolwiek z tych kroków wymaga przybliżania albo trafiania w mikroskopijny element, masz odpowiedź.

Zmniejsz okno przeglądarki na komputerze. Złap prawą krawędź i przeciągnij w lewo, aż okno będzie wąskie jak telefon. Strona responsywna przestawi układ płynnie, po drodze przekładając elementy jeden pod drugi. Niedostosowana albo utnie treść, albo pokaże poziomy pasek przewijania.

Sprawdź w PageSpeed Insights. Narzędzie Google pokazuje wynik osobno dla telefonu i komputera, razem z listą problemów. Zwróć uwagę nie tylko na ocenę wydajności, ale też na sekcję o czytelności i wielkości elementów dotykowych.

Co tracisz, gdy strona nie działa na telefonie

Klientów, którzy nie wracają. Użytkownik, który raz walczył z Twoją stroną na telefonie, nie próbuje drugi raz. Nie pisze też skargi — po prostu wchodzi do konkurencji.

Pozycję w wyszukiwarce. Google indeksuje dziś strony na podstawie ich wersji mobilnej. Nie „bierze pod uwagę" — po prostu patrzy na to, co widzi telefon, i to ocenia. Strona, która na komputerze wygląda świetnie, a na telefonie się rozjeżdża, jest dla wyszukiwarki stroną rozjeżdżającą się.

Pieniądze wydane na reklamę. Kampania kierująca ruch na stronę, z której ludzie uciekają po dwóch sekundach, to przepalony budżet. Im wyższy współczynnik odrzuceń, tym drożej płacisz za kliknięcie.

Zaufanie. Strona sprzed dekady mówi odwiedzającemu więcej o Twojej firmie, niż chciałbyś powiedzieć. Ludzie wyciągają z tego wnioski o tym, jak prowadzisz resztę spraw.

Mobile first, czyli dlaczego zaczynam od telefonu

Kiedy projektuję stronę, zaczynam od widoku najwęższego, nie najszerszego. Powód jest prosty: na ekranie telefonu mieści się mało, więc trzeba od razu rozstrzygnąć, co jest naprawdę ważne. Przy odwrotnej kolejności wychodzi projekt, w którym wszystko jest ważne, a potem przy zwężaniu trzeba coś wyrzucać na siłę.

Przy okazji to podejście wymusza porządek w treści. Jeśli oferta nie mieści się w kilku ekranach telefonu, zwykle znaczy, że jest napisana zbyt rozwlekle, a nie że brakuje miejsca.

Responsywność a pozycja w Google

Google zaczął premiować strony mobilne w kwietniu 2015 roku aktualizacją, którą branża nazwała mobilegeddonem. Od tamtej pory kierunek się nie zmienił, a po przejściu na indeksowanie mobile first kwestia przestała być przewagą i stała się warunkiem wejścia.

Sama responsywność nie wywinduje Cię na pierwsze miejsce — na pozycję pracują treść, linki i szybkość. Ale jej brak potrafi zablokować wszystko pozostałe. To trochę jak z lokalem: ładny wystrój nie przyciągnie klientów, jeśli drzwi się nie otwierają.

Warto wiedzieć, że Google ocenia poszczególne podstrony osobno. Jeśli jedna sekcja serwisu jest dostosowana, a druga nie, ta pierwsza nadal może rankować.

Pięć błędów, które widzę najczęściej

Poziome przewijanie. Jeden element szerszy niż ekran — tabela, obrazek ze sztywną szerokością, zbyt długi adres e-mail bez łamania — i cała strona jedzie na boki. To najczęstsza usterka, jaką znajduję przy przeglądach.

Przyciski za blisko siebie. Na myszce trafisz w link o wysokości 20 pikseli. Kciukiem nie. Elementy do klikania potrzebują około 44 pikseli i odstępu od sąsiadów.

Menu, które zasłania treść. Rozwijane menu zajmujące cały ekran bez widocznego przycisku zamknięcia to pułapka — użytkownik zostaje w nim uwięziony i wychodzi przyciskiem wstecz, czyli ze strony.

Zdjęcia w pełnym rozmiarze. Fotografia o szerokości 4000 pikseli wysłana na telefon zjada transfer i czas ładowania. Powinna dojechać w rozmiarze dopasowanym do ekranu, w nowoczesnym formacie.

Widok poziomy, o którym nikt nie pomyślał. Telefon obrócony na bok ma proporcje zbliżone do małego laptopa i często wypada w martwą strefę projektu. Sprawdzam to zawsze, bo poprawka po fakcie kosztuje więcej.

Co zrobić, jeśli strona nie przeszła testu

Zależy, co jest pod spodem. Czasem wystarczy poprawić warstwę wizualną i dodać brakujące reguły — to praca na kilka dni. Czasem strona stoi na szablonie sprzed dekady, doklejonym do systemu, którego nikt już nie aktualizuje, i wtedy taniej wychodzi zbudowanie jej od nowa niż łatanie.

Zaczynam zawsze od przeglądu, żeby powiedzieć, która droga jest tańsza w Twoim przypadku. Jeśli chcesz to sprawdzić, zobacz jak buduję strony internetowe albo napisz do mnie z adresem swojej witryny — odpiszę, co bym z nią zrobił.

Strona, która już działa poprawnie, wymaga potem tylko pilnowania: aktualizacji, kopii zapasowych i sprawdzania, czy kolejne zmiany czegoś nie popsuły. To wchodzi w stałą opiekę i kosztuje ułamek tego, co naprawa po awarii.

Częste pytania

Czym responsywna strona różni się od wersji mobilnej? Wersja mobilna to osobny serwis pod własnym adresem, zwykle m.twojafirma.pl, z własną treścią do utrzymywania. Responsywna strona ma jeden adres i jedną treść, która sama przestawia układ. Osobne wersje mobilne wyszły z użycia, bo zawsze zostawały w tyle za serwisem głównym.

Czy responsywność wystarczy, żeby strona przyciągała klientów? Nie. Responsywność sprawia, że stronę da się wygodnie czytać na telefonie, i jest warunkiem wejścia, a nie przewagą. Na zapytania pracują treść, szybkość ładowania i to, czy odwiedzający w pierwszym ekranie rozumie, co oferujesz. Bez responsywności żadna z tych rzeczy nie zdąży zadziałać.

Czy to samo dotyczy sklepów internetowych? W sklepie stawka jest wyższa, bo ścieżka do zakupu jest dłuższa niż do formularza kontaktowego. Koszyk, wybór wariantu produktu, dane do wysyłki i płatność muszą działać kciukiem na wąskim ekranie. To zwykle tam znajduję najwięcej usterek, bo te kroki testuje się rzadziej niż stronę główną.

Ile kosztuje przerobienie istniejącej strony na responsywną? Zależy od tego, co jest pod spodem, i dlatego zaczynam od przeglądu. Poprawki w warstwie wizualnej to praca na kilka dni. Szablon sprzed dekady doklejony do nieaktualizowanego systemu zwykle taniej wychodzi zbudować od nowa niż łatać.

Czy Google karze strony, które nie są responsywne? Nie ma osobnej kary. Jest coś trudniejszego do obejścia: Google ocenia stronę na podstawie tego, co widzi telefon. Strona rozjeżdżająca się na małym ekranie jest dla wyszukiwarki po prostu stroną rozjeżdżającą się, niezależnie od tego, jak wygląda na komputerze.