Responsywna strona (RWD) – czym jest i jak ją zrobić?

Strona responsywna to taka, która automatycznie dostosowuje się do rodzaju urządzenia i wielkości ekranu, na którym wyświetla ją użytkownik. Dzięki temu powinna być równie czytelna i funkcjonalna na komputerze stacjonarnym z 24-calowym monitorem oraz na małym, 5-calowym smartfonie.

Takie podejście do projektowania stron określa się jako RWD (Responsive Web Design). Opiera się ono na założeniu, że aby strona była wygodna w użytkowaniu na każdym urządzeniu, wcale nie trzeba przygotowywać oddzielnej wersji dla każdego z nich. Wystarczy zadbać o to, aby wszystkie pojedyncze elementy strony – tekst, grafiki itd. – dopasowywały swój rozmiar i układ do ekranu.

Dlatego budowa responsywnej strony nie byłaby możliwa bez tzw. media queries. To dość prosta technika w języku CSS, dzięki której da się stworzyć kilka zestawów reguł co do tego, jak mają być prezentowane elementy witryny. Można zdefiniować osobne style dla, na przykład, ekranów o szerokości poniżej 768px i dla stacjonarnych monitorów o szerokości min. 1024px. W trakcie wczytywania strony automatycznie wysyłane jest zapytanie (query) o rozdzielczość i orientację ekranu. W zależności od tego, jaka będzie odpowiedź, strona wyświetli się według innych reguł. Zawartość witryny zostaje taka sama, zmienia się tylko sposób jej prezentacji.

Mobilna wersja strony działa zupełnie inaczej. Korzysta z innych plików niż wersja desktopowa, posiada własną ścieżkę dostępu, strukturę w katalogu oraz subdomenę, np. m.orange.pl. Można zatem uznać ją za odrębną witrynę.

Natomiast wersja responsywna to zazwyczaj dokładnie ta sama strona internetowa co na desktopie, ale przystosowana do wyświetlania treści na różnych ekranach urządzeń mobilnych. Co jeszcze różni strony responsywne od klasycznych wersji mobilnych?

Co sprawia, że responsywne strony są dziś dla wielu developerów nie tyle alternatywą dla odrębnych wersji mobilnych, ile po prostu standardem?

1. Choć wymagają więcej pracy przy projektowaniu i programowaniu, responsywne strony internetowe pozwalają zachować wszystkie możliwości desktopowej wersji strony w niemal identycznej formie.
2. Są stosunkowo łatwe w utrzymaniu – nie wymagają rozwijania jednocześnie dwóch wersji witryny.
3. Nie odstają od zwykłych wersji na mobile pod względem wydajności… pod warunkiem, że są dobrze zaprojektowane.
4. Bez problemu radzą sobie z ekranami o każdej rozdzielczości, jeśli siatka strony i style CSS zostaną prawidłowo zoptymalizowane.
5. Google stoi po ich stronie. To, jak dziś wygląda proces indeksowania, sprzyja przede wszystkim stronom responsywnym.

Responsywne strony internetowe są wszędzie. Poniżej omówimy krótko dwa projekty, które dobrze pokazują, jak dzięki prostemu przeskalowaniu siatki strony, zmianie niektórych elementów graficznych oraz modyfikacji układu treści można dostosować stronę do warunków urządzeń mobilnych.

Na początek – Allegro, czyli jedna z najczęściej odwiedzanych polskich stron internetowych.

Co mogłoby pójść nie tak przy projektowaniu responsywnej witryny dla platformy e-commerce? Naprawdę sporo. Na ekranie trzeba zagospodarować m.in. przestrzeń dla banerów promocyjnych, menu z dziesiątkami kategorii produktowych, przyciski związane z samym profilem klienta (Koszyk, Ulubione, odnośnik do panelu klienta) i, oczywiście, wyszukiwarkę ofert. Projektantom udało się temu sprostać dzięki kilku decyzjom.

1. Górny pasek nawigacji został „rozbity” na dwa. Na urządzeniach mobilnych najważniejsze przyciski dla procesu zakupowego (m.in. wspomniany Koszyk) znajdują się na dolnym pasku, który w trakcie poruszania się po stronie jest przyklejony do krawędzi ekranu. Tam też trafiła zakładka Kategorie.
2. Na urządzeniach mobilnych można zobaczyć przeskalowane banery o identycznej treści i funkcji, ale różniące się nieco wizualnie.
3. Warto spojrzeć na pasek wyszukiwania. Wraz ze zmniejszającą się rozdzielczością ekranu staje się coraz bardziej „minimalistyczny” – nawet hasło Szukaj na buttonie zmienia się w lupę.

Mimo tych drobnych zmian, na każdym ekranie interfejs oferuje dokładnie takie samo doświadczenie.

Ciekawymi przykładami są też responsywne strony internetowe portali informacyjnych. W ich przypadku dużym wyzwaniem jest przeniesienie hierarchii publikowanych treści na mniejszy ekran. My wybraliśmy witrynę Wired – amerykańskiego magazynu poświęconego technologii oraz jej wpływom na politykę i kulturę.

W każdym swoim obliczu strona ma bardzo typowy dla portali newsowych layout – raczej minimalistyczny, przypominający rozkład treści na stronach prasy papierowej, przyciągający uwagę czytelnika samymi nagłówkami i ilustrującymi artykuły zdjęciami. Co się zmienia na ekranach mobilnych?

• Po pierwsze, layout strony się zawęża. Na dużym monitorze i na tablecie zobaczysz klasyczny układ hierarchiczny, a na smartfonie – prosty grid z jedną kolumną;
• po drugie, górny pasek nawigacji jest stopniowo ukrywany, tak, by na smartfonach w całości trafić pod tzw. hamburger menu. Jedynym elementem, który pozostaje „na wierzchu”, jest przycisk Subscribe, czyli klasyczne call-to-action.

Oba te zabiegi na stronach responsywnych – nie tylko tych informacyjnych – możesz spotkać bardzo często.

Tworzenie responsywnych stron wymaga odmiennego podejścia niż na przykład w przypadku aplikacji mobile-only. Tutaj od samego startu warto myśleć o stronie w kontekście każdego ekranu, na jakim może się pojawić – i tego 6-calowego, i tego desktopowego. Na czym konkretnie trzeba się skupić?

Szybka checklista RWD

Aby zebrać to w całość, dodajemy krótką checklistę, co trzeba zrobić przy projektowaniu responsywnej witryny:

• Określ osobno breakpointy dla ekranów smartfonów, tabletów i komputerów.
• Zdefiniuj media queries w CSS-ie dla każdego zakresu rozdzielczości.
• Zaprojektuj w CSS-ie układ treści tak, aby zachowywał hierarchię informacji na każdym ekranie – na podstawie modelu Grid lub Flexbox.
• Przygotuj każdą grafikę w kilku rozdzielczościach i dopasuj je do różnych wielkości ekranów przy pomocy atrybutu srcset w HTML.
• Dostosuj rozmiary czcionek, interlinię i odstępy między literami osobno dla każdego breakpointu.
• Na koniec, przetestuj stronę na różnych urządzeniach.

Ostatniego punktu nie można pominąć – projektując interfejs pod kilka różnych rozdzielczości jednocześnie, bardzo łatwo o błędy. Z jakich narzędzi najczęściej korzystają developerzy i projektanci?

Do testów wizualnych:

• Chrome DevTools – najprostsze narzędzie, bo wbudowane w przeglądarkę Chrome. Można w nim symulować działanie strony na kilkudziesięciu różnych urządzeniach mobilnych i w obu orientacjach ekranu . Co najważniejsze, zmiany w kodzie CSS można nanosić od razu i na żywo sprawdzać ich efekty;
• Responsive Viewer – rozszerzenie do Chrome’a, które pozwala wyświetlić stronę jednocześnie w kilku rozdzielczościach naraz. Bardzo dobrze działa w połączeniu z DevTools i przydaje się w pracy z breakpointami;
• BrowserStack – płatna platforma, ale o wiele bardziej zaawansowana. Obecnie jest standardem w największych firmach IT. Pozwala przetestować stronę na niemal dowolnym urządzeniu, na każdej przeglądarce oraz w precyzyjnie zdefiniowanych przez siebie warunkach, ale przede wszystkim – i to właśnie jest główny plus – cały proces da się zautomatyzować dzięki integracji z narzędziami typu Selenium czy Cypress.

Do testów wydajności i SEO:

• PageSpeed Insights – darmowe, ale bardzo przydatne narzędzie od Google, które analizuje obie wersje strony (desktopową i mobilną) pod kątem wskaźników Core Web Vitals, ale też dostępności oraz optymalizacji pod roboty wyszukiwarki. W raporcie wskazuje nawet konkretne elementy do poprawy w kodzie strony;
• Lighthouse – niemal identyczne narzędzie, dostępne jako rozszerzenie do Chrome’a. Różnica polega na tym, że Lighthouse działa jedynie lokalnie, na Twoim własnym urządzeniu – da się więc przy jego pomocy przetestować stronę, która jeszcze nie jest dostępna publicznie, tylko np. na stagingu;
• GTmetrix – bardzo popularna, choć płatna aplikacja do mierzenia wydajności. Ogromną zaletą jest fakt, że pozwala wybrać konkretne urządzenie spośród kilkudziesięciu modeli smartfonów i tabletów, na którym testowana będzie strona, jego lokalizację oraz jakość połączenia z internetem; w narzędziach od Google takich możliwości niestety nie ma.

Tworzenie responsywnych stron internetowych to obecnie standard, do którego powinien dążyć każdy, komu zależy na wysokich pozycjach w wynikach wyszukiwania. Takie witryny zapewniają wysokiej jakości user experience i są promowane przez Google. Jeśli zatem myślisz o zbudowaniu dobrego serwisu internetowego, pomyśl o wersji mobilnej już na etapie projektowania.