Co to znaczy, że strona jest responsywna
Responsywna strona ma jedną treść i jeden adres URL, a zmienia się tylko sposób wyświetlania. Na szerokim monitorze oferta może stać w trzech kolumnach, na tablecie w dwóch, a na telefonie jedna pod drugą. Menu zwija się w ikonę, zdjęcia zmniejszają się razem z ekranem, a formularz układa pola jedno pod drugim.
Nie chodzi tylko o to, żeby strona „mieściła się” na telefonie. Liczy się też to, czy da się na niej coś zrobić: zadzwonić jednym dotknięciem, wypełnić formularz bez walki z klawiaturą i znaleźć cenę lub termin bez powiększania ekranu palcami. Dlatego responsywność wpływa na liczbę zapytań – więcej o tym piszemy w tekście o konwersji strony firmowej.
Jak działa responsywność strony
Za dopasowanie do ekranu odpowiada kilka elementów kodu. Nie musisz ich znać, żeby zamówić stronę, ale warto wiedzieć, o co pytać wykonawcę i co sprawdzić przy odbiorze.
| Element | Co robi | Co sprawdzić |
|---|---|---|
| Znacznik viewport w nagłówku strony | mówi przeglądarce telefonu, żeby wyświetliła stronę w szerokości ekranu, a nie jako pomniejszony widok komputerowy | czy na telefonie tekst ma normalną wielkość bez powiększania |
| Płynna siatka (CSS Grid, Flexbox) | kolumny zmieniają szerokość i przechodzą jedna pod drugą | czy nic nie wystaje poza ekran i nie trzeba przewijać w bok |
| Media queries (zapytania o media) | przy określonej szerokości ekranu włączają inny układ, np. menu w formie ikony | jak strona wygląda na telefonie, tablecie w pionie i w poziomie |
| Elastyczne zdjęcia | przeglądarka dostaje zdjęcie w rozmiarze dopasowanym do ekranu | czy zdjęcia nie są ucięte i czy strona nie ładuje się długo na telefonie |
| Elementy dotykowe | przyciski i linki mają rozmiar i odstępy wygodne dla palca | czy da się trafić w menu, telefon i przycisk formularza za pierwszym razem |
Jak zrobić, żeby strona była responsywna
Responsywność planuje się już na etapie projektu, a nie dokleja do gotowej strony. Przy nowej stronie zwykle wygląda to tak:
- w nagłówku każdej podstrony jest znacznik meta viewport z ustawieniem width=device-width,
- projekt zaczyna się od najmniejszego ekranu (podejście mobile first), a układ na większe ekrany dobudowuje się później,
- szerokości, odstępy i pismo są liczone w jednostkach względnych, a nie w sztywnych pikselach,
- zdjęcia mają kilka wersji rozmiaru, a przeglądarka wybiera tę dopasowaną do ekranu,
- każdą podstronę sprawdza się na telefonie, tablecie i komputerze przed publikacją.
Jeśli strona stoi na gotowym szablonie, np. w WordPressie, responsywność zależy głównie od jakości szablonu. Wtedy warto najpierw sprawdzić stronę według kroków opisanych niżej, a dopiero potem decydować o poprawkach.
Strona responsywna a osobna wersja mobilna
Stronę na urządzenia mobilne można zbudować na trzy sposoby: jako stronę responsywną, jako osobną wersję mobilną pod innym adresem (np. m.twojafirma.pl) albo przez tzw. dynamiczne wyświetlanie, w którym serwer pod tym samym adresem wysyła telefonom inny kod. Osobne wersje mobilne były popularne kilkanaście lat temu. Dziś zwykle się ich nie buduje, bo każdą zmianę trzeba wprowadzać dwa razy, a treść w obu wersjach łatwo się rozjeżdża.
Osobna wersja mobilna
- dwa adresy i dwa zestawy podstron,
- każda zmiana treści wprowadzana podwójnie,
- ryzyko, że na telefonie zabraknie części oferty,
- przekierowania i oznaczenia dla Google do pilnowania.
Strona responsywna (RWD)
- jeden adres i jedna treść dla wszystkich urządzeń,
- zmiana w panelu od razu widoczna wszędzie,
- ta sama oferta na telefonie i na komputerze,
- rozwiązanie, które Google zaleca jako najprostsze w utrzymaniu.
Google w dokumentacji dla właścicieli stron pisze wprost, że zaleca Responsive Web Design, bo to wzorzec najłatwiejszy do wdrożenia i utrzymania.
Dlaczego responsywność ma znaczenie w Google
Google indeksuje i ocenia strony na podstawie ich wersji mobilnej, pobieranej przez robota działającego jak smartfon. To tzw. mobile-first indexing. W praktyce oznacza to, że jeśli coś jest widoczne tylko na komputerze, wyszukiwarka może tego nie wziąć pod uwagę.
Ważne
Ta sama treść na telefonie i na komputerze
Nie ukrywaj na telefonie opisów usług, cennika, FAQ ani danych firmy tylko po to, żeby strona była krótsza. Lepiej zwinąć je w rozwijane sekcje niż usunąć. Te same powinny być też nagłówki, teksty alternatywne zdjęć (ALT) i dane strukturalne.
Responsywność to punkt wyjścia, a nie gwarancja pozycji. Na wynik w Google wpływa też treść, szybkość ładowania i to, czy strona odpowiada na pytanie osoby, która szuka. Jak przyspieszyć stronę, opisujemy w tekście o optymalizacji strony www.
Jak sprawdzić, czy Twoja strona jest responsywna
Google 1 grudnia 2023 r. wycofał dawny Mobile-Friendly Test i raport „Obsługa na urządzeniach mobilnych” w Search Console. Sprawdzenie zajmuje jednak kwadrans i nie wymaga płatnych narzędzi.
Telefon w ręce
Otwórz stronę główną, stronę usługi i kontakt na własnym telefonie. Spróbuj zadzwonić jednym dotknięciem, wysłać formularz i znaleźć cenę lub termin. Obróć telefon poziomo.
Podgląd urządzeń w Chrome
Na komputerze kliknij stronę prawym przyciskiem myszy i wybierz „Zbadaj” i włącz pasek urządzeń (Ctrl+Shift+M lub Cmd+Shift+M na Macu). Zwężaj okno i obserwuj, czy coś nie wychodzi poza ekran.
Lighthouse
W tym samym panelu, w zakładce Lighthouse, uruchom raport dla urządzeń mobilnych. W kategoriach Wydajność i Dostępność zobaczysz m.in. za ciężkie zdjęcia, źle ustawiony znacznik viewport i zbyt małe pola dotyku.
Powiększenie do 400%
Przy oknie przeglądarki szerokim na ok. 1280 pikseli powiększ stronę do 400%. Wytyczne dostępności WCAG (poziom AA) wymagają, by przy szerokości odpowiadającej 320 pikselom CSS treść dało się czytać bez przewijania w dwóch kierunkach.
Search Console
W raporcie „Podstawowe wskaźniki internetowe” sprawdź wyniki szybkości dla urządzeń mobilnych. Słabsze wyniki na telefonie niż na komputerze oznaczają, że wersja mobilna może wymagać optymalizacji. Przy małym ruchu raport bywa pusty.
Jeśli w którymś kroku coś nie działa, zapisz adres podstrony i zrób zrzut ekranu. Taka lista bardzo ułatwia rozmowę z wykonawcą i wycenę poprawek.
Najczęstsze problemy na telefonie i jak je poprawić
| Objaw | Najczęstsza przyczyna | Poprawka |
|---|---|---|
| Trzeba przewijać w bok | szeroka tabela, zdjęcie lub osadzony element o stałej szerokości | tabela w przewijanym kontenerze, zdjęcia i filmy skalowane do szerokości ekranu |
| Tekst jest za mały | brak znacznika viewport albo sztywne rozmiary pisma | znacznik viewport i rozmiar tekstu liczony względnie |
| Trudno trafić w przycisk | linki i przyciski zbyt małe lub zbyt blisko siebie | większe pola dotyku i odstępy, telefon jako klikalny link |
| Formularz męczy | za dużo pól, zła klawiatura do numeru telefonu i e-maila | 3–4 pola na start, pola typu tel i email, które włączają właściwą klawiaturę |
| Okno zasłania treść | wyskakujące okienko z newsletterem lub plikami cookie na cały ekran | mniejszy baner i łatwe zamknięcie |
| Strona długo się ładuje | zdjęcia w rozdzielczości z aparatu, dużo skryptów | zdjęcia w rozmiarze dopasowanym do ekranu, nowoczesne formaty, mniej wtyczek |
Czy responsywność podnosi koszt strony
Responsywność nie powinna być osobną pozycją w wycenie. Jeśli wykonawca liczy ją jako dodatek, może to oznaczać, że projektuje najpierw pod komputer, a telefon traktuje jako dopisek.
Na cenę wpływają raczej liczba podstron i funkcji, wersje językowe, integracje oraz to, kto przygotowuje teksty i zdjęcia. Aktualne widełki znajdziesz w cenniku stron internetowych. Stronę firmową przygotowujemy zwykle w 4–6 tygodni i obejmujemy 12-miesięczną gwarancją.
Strona źle działa na telefonie: poprawić czy zbudować nową
Jeśli strona ma kilka lat, ale jest responsywna, często wystarczą poprawki: lżejsze zdjęcia, krótszy formularz, stale widoczny przycisk kontaktu. Gdy strona w ogóle nie dopasowuje się do telefonu, zwykle taniej i szybciej jest zaprojektować ją od nowa niż przerabiać stary szablon. Sygnały, że to ten moment, opisujemy we wpisie przebudowa czy odświeżenie strony, a listę cech, które warto sprawdzić przy okazji, w tekście o cechach profesjonalnej strony internetowej.
Zakres prac przy nowej stronie opisujemy na stronie tworzenie stron internetowych.
