Responsywna strona internetowa: co to jest, ile kosztuje i jak sprawdzić wersję mobilną

Responsywna strona ma jeden adres, jedną treść i jeden kod, ale inaczej się układa w zależności od tego, na czym ją oglądasz. Na monitorze menu rozciąga się w poziomie, a sekcje stoją obok siebie w trzech kolumnach. Na telefonie menu zwija się w przycisk, kolumny ustawiają się jedna pod drugą, tekst rośnie, a przyciski stają się na tyle duże, żeby trafić w nie kciukiem. To nie jest osobna wersja strony. To ta sama strona, która potrafi się zachować przyzwoicie na ekranie o dowolnej szerokości, także na takim, którego jeszcze nie ma na rynku.

Kiedyś budowało się drugi serwis pod adresem zaczynającym się od m kropka. Miało to sens, gdy telefony były słabe, a łącza wolne. Dziś to kosztowna pomyłka: dwa serwisy trzeba osobno aktualizować, osobno testować, a Google trzeba tłumaczyć, że to ta sama treść. Każda zmiana ceny albo numeru telefonu wymaga dwóch poprawek, więc prędzej czy później jedna wersja zaczyna kłamać. Strona responsywna rozwiązuje to raz: jeden adres, jedna treść, jedno miejsce do zmiany.

Google indeksuje strony robotem udającym telefon i to, co zobaczy na małym ekranie, trafia do indeksu. Jeżeli Twoja wersja mobilna ma mniej treści niż komputerowa, bo ktoś ukrył połowę sekcji, żeby strona ładowała się szybciej, to ukryta treść w praktyce nie istnieje dla wyszukiwarki. To najczęstszy, najdroższy i najbardziej niewidoczny błąd starych stron. Właściciel widzi na swoim laptopie bogaty serwis, a Google widzi wizytówkę z trzema zdaniami.

Otwórz ją na własnym telefonie i wykonaj trzy zadania: znajdź numer telefonu, otwórz formularz kontaktowy i przeczytaj cennik. Jeśli musisz przy tym powiększać obraz palcami, przewijać w bok albo trafiać w łącze wielkości ziarnka grochu, strona nie jest responsywna, choć wykonawca mógł zapewniać inaczej. Drugi test: na komputerze złap krawędź okna przeglądarki i powoli je zwężaj. Układ powinien płynnie przeskakiwać na węższy, a nie tylko zmniejszać wszystko proporcjonalnie, aż tekst stanie się nieczytelny.

Tekst poniżej szesnastu pikseli, przy którym telefon sam podnosi stronę do powiększenia. Przyciski i łącza rozmieszczone tak blisko siebie, że kciuk trafia w sąsiedni. Formularze z polami węższymi niż ekran, wymagające przewijania w bok. Tabele cenowe skopiowane z wersji komputerowej, których nie da się przeczytać. Wyskakujące okno zgody zasłaniające całą treść bez widocznego przycisku zamknięcia. Zdjęcia wczytywane w rozdzielczości monitora, marnujące transfer klienta. Każdy z tych błędów osobno wygania część odwiedzających.

Dobrze zaprojektowana wersja mobilna zmienia priorytety, nie tylko układ. Na komputerze możesz pozwolić sobie na duże zdjęcie i rozbudowany nagłówek. Na telefonie pierwsze, co powinien zobaczyć klient, to czym się zajmujesz i jak się z Tobą skontaktować. Numer telefonu bywa ważniejszy niż piękna fotografia biura. Dlatego projektujemy najpierw wersję mobilną, a dopiero potem rozkładamy elementy na szerszym ekranie. Odwrotna kolejność, wciąż popularna, kończy się ściśnięciem projektu komputerowego do rozmiaru telefonu.

Nowa strona firmowa jest dziś responsywna z definicji i nikt uczciwy nie powinien liczyć za to dopłaty. Koszty pojawiają się przy dorabianiu responsywności do starego szablonu, który jej nie przewidywał: to praca w cudzym kodzie, więc wyceniana jak modernizacja, zwykle od 2 000 zł do 6 000 zł. Jeżeli strona ma więcej niż kilka lat i była projektowana pod monitor, rachunek za jej naginanie potrafi przekroczyć cenę nowego, lekkiego projektu. U nas strona firmowa kosztuje od 1 490 zł, a responsywność jest w cenie, bo inaczej nie byłaby to strona, tylko plakat.

Te same decyzje projektowe obsługują trzy cele naraz. Duży, czytelny tekst i wyraźny kontrast to wymóg dostępności i wygoda na telefonie w słońcu. Lekkie zdjęcia w formatach nowej generacji to szybsze ładowanie na danych komórkowych i lepszy wynik Core Web Vitals. Sensowna kolejność treści to zarówno logiczne czytanie przez czytnik ekranu, jak i sensowna kolumna na wąskim ekranie. Strona zrobiona dobrze pod telefon jest zwykle przy okazji szybsza i bardziej dostępna. Robiona odwrotnie, zawodzi na wszystkich trzech polach.

Projektujemy od najmniejszego ekranu w górę, bo tam podejmuje się najtrudniejsze decyzje o tym, co jest naprawdę ważne. Sprawdzamy stronę na realnych urządzeniach, nie tylko w symulatorze przeglądarki, bo klawiatura na telefonie potrafi zasłonić przycisk wysyłki, czego symulator nie pokaże. Numer telefonu na komórce jest klikalny i dzwoni jednym dotknięciem. Formularz ma pola na tyle duże, żeby dało się w nie trafić w tramwaju. Cena jest stała i znana z góry, a strona powstaje w 7 do 10 dni roboczych.