Responsywność witryny – jakie to ma znaczenie?

Responsywność według słownika języka polskiego oznacza cechę pozwalającą na dopasowanie się, właściwą reakcję na jakieś działanie. Być może znasz tę nazwę, ale jedynie w odniesieniu do technologii budowania stron a dotyczy też innych dziedzin. Przykładowo responsywność w relacjach międzyludzkich oznacza umiejętność elastycznego dostosowania się, odpowiedniego reagowania na zaistniałe sytuacje i znajdowania optymalnych rozwiązań, ale też sprawnego komunikowania się oraz proaktywne działania. Nic dziwnego, że osoby responsywne są cenione jako partnerzy w życiu i biznesie. 

Responsywność RWD (Responsive Web Design), o której będzie w tym artykule, oznacza dopasowanie wyglądu i sprawnego funkcjonowania witryny niezależnie od rozdzielczości ekranu urządzenia, na którym jest wyświetlana.

Co należy zrobić, żeby strona była responsywna i po co? Zaraz sprawdzimy.

Co to oznacza, że witryna jest responsywna?

Ekran komputera, laptopa, tabletu czy smartfona różnią się od siebie wyglądem i technologią: wielkością, rozdzielczością, sposobem użytkowania, proporcjami ekranu, gęstością pikseli, częstotliwością odświeżania, kontrastem. To wszystko sprawia, że odbiór tej samej treści na różnych urządzeniach jest zupełnie inny. Jeśli strona nie jest responsywna, na telefonie ładuje się wersja komputerowa, ale w miniaturze. Napisy są mikroskopijne, a nawigacja staje się koszmarem.

Tymczasem według badań, większość użytkowników przegląda strony, szuka informacji, robi zakupy na tych urządzeniach, które ma pod ręką, a więc na smartfonach i tabletach. Urządzenia desktopowe od lat schodzą na dalszy plan (zobacz raport Gemius).

Rewolucja nastąpiła po 2010 roku wraz z pojawieniem się technologii Android, gdy telefony i tablety z ekranem dotykowym stały się tanie i ogólnie dostępne. Wtedy też oczywistą stała się potrzeba elastycznego i automatycznego dostosowania projektowanych witryn do różnych urządzeń. Wcześniej wersja mobilna była ewentualnie tworzona jako osobna strona, ale był to dodatkowy koszt i dużo pracy a na koniec utrudniała administrowanie i wszelkie zmiany.

Koncepcję RWD – Responsive Web Design spopularyzował w 2010 roku Ethan Marcotte projektant i programista webowy w publikacji o tym samym tytule. Określił, które elementy techniczne witryny muszą być skalowalne, by elastycznie dostosowywała się ona do parametrów danego urządzenia. Odpowiada za to technologia media query automatycznie odczytując szerokość i wysokość ekranu, jego rozdzielczość, typ i orientację urządzenia i aktywując przypisany do tego warunku zoptymalizowany blok stylów CSS. Każdy z elementów bloku można samodzielnie edytować i ustawiać i robi się to w zależności od skomplikowania projektu, by jeszcze bardziej poprawić funkcjonalność i wizualnie „wygładzić” stronę.

Szerokość marginesów, slajder, kolejność tekst/ zdjęcie, stopka to najczęściej edytowane elementy. Mimo że za responsywność odpowiada wtyczka, to nie da się naprawić wszystkiego, wciskając jeden czarodziejski guzik. Przyda się pomoc web developera, który wie, jak poszczególne parametry i elementy dostosować do danego projektu.

Responsywność a czynniki rankingowe wpływające na widoczność strony

Jesteśmy istotami wygodnymi mało cierpliwymi i impulsywnymi 🙂 Lubimy, gdy coś, z czego korzystamy działa szybko i sprawnie. Jeśli jest inaczej, szukamy lepszego rozwiązania. Coś, co nie do końca działa wydaje nam się podejrzane, mniej bezpieczne i nie jesteśmy skorzy, by zostawić tam swoje dane czy pieniądze. Jeśli sfinalizowanie transakcji z poziomu telefonu nie jest proste, użytkownik po prostu straci cierpliwość i zaufanie. 

Wolno ładująca się strona, nieintuicyjne menu, przyciski, które nie działają, nieczytelny tekst są zwykle na tyle irytujące, że w pośpiechu opuszczamy witrynę i idziemy do konkurencji. Współczynnik odrzuceń (bounce rating) wzrasta, strona spada w rankingu widoczności. Jest źle.

Strony, sklepy, platformy czy aplikacje tworzone są z myślą o ludziach. W pierwszej kolejności muszą je jednak zaakceptować i zaindeksować algorytmy. System rankingowy Google od lat skupia się wokół funkcjonalności, intencji użytkownika i jakości doświadczenia. Jednym z wielu czynników technicznych jest właśnie responsywność. Od 2015 roku oficjalnie Mobile-First Indexing jest nie do pominięcia i to mobilna wersja jest domyślnym elementem każdego projektu webowego, a starsze witryny pod tym kątem trzeba sukcesywnie modernizować. 

Jak sprawdzić, czy witryna jest responsywna?

Nowe witryny już na starcie tworzone są jako responsywne, bo takie standardy obecnie obowiązują i możesz się tego domagać od swojego web developera. Najprostszy sposób, żeby sprawdzić, jak strona wygląda i funkcjonuje na mobilnych urządzeniach, jest test manualny, czyli otwieranie i testowanie jej na różnych urządzeniach.

W przeglądarkach wbudowane są narzędzia deweloperskie. W Google Chrome jest to 

Chrom Dev Tools uruchamiany prawym przyciskiem myszy i komendą ZBADAJ, gdzie można sprawdzić layout dla różnych urządzeń.

W raportach generowanych w płatnych narzędziach oferujących audyty techniczne otrzymasz informację o błędach optymalizacyjnych dla urządzeń mobilnych, które też pomogą zweryfikować, które elementy witryny wymagają poprawy. 

O jakie elementy trzeba zadbać, żeby strona była responsywna?

Zawsze dążymy do tego by niezależnie od urządzenia, na którym otwierana jest witryna, strona była szybka, estetyczna i funkcjonalna. 

Zacznijmy od zaplecza. Szybkość ładowania się zależy od tego, czy obrazy są zoptymalizowane, a poszczególne elementy płynnie się skalują (nie są za małe, ale nie trzeba ich też przybliżać). Unika się także zbędnych elementów wizualnych, które utrudniają szybkie ładowanie się strony. Pamiętajmy, że w odczuciach użytkownika szybka i intuicyjna strona jest postrzegana jako bardziej profesjonalna i bezpieczna. 

Użyteczność witryny na małym ekranie wynika z dopasowanego wyglądu. 

• Intuicyjnie scrollujemy góra – dół. Jeśli na stronie trzeba manewrować horyzontalnie, staje się to uciążliwe i oznacza, że niektóre elementy są zbyt duże. Ustawienie tzw. punktów przełamania powoduje, że treści, które na dużym ekranie komputera wyświetlają się w 3 lub 4 kolumnach w wersji mobilnej ładnie układają się jeden pod drugim.

• Kolejny istotny element to menu hamburgerowe w postaci trzech kresek, które po naciśnięciu jest rozwijane. Na małym ekranie jest to bardziej czytelne i oszczędza miejsce.
• Niezwykle ważne jest też przemyślane rozmieszczenie i wielkość przycisków oraz ich prawidłowe przekierowania. Odpowiedni rozmiar zapobiega przypadkowemu wciśnięciu i jednocześnie ułatwia nawigację, kierując użytkownika dokładnie tam, gdzie trzeba. 

Web developer po prostu wie, które elementy odgrywają istotną rolę i na co należy zwrócić uwagę przy danym projekcie, aby strona była responsywna. Napisz do mnie, jeśli nie chcesz samodzielnie w nieskończoność testować i zmieniać ustawień 🙂                                                              

Reasumując: Responsywność stron to konieczność, a nie opcja.

Dla użytkownika responsywność witryny oznacza wygodę przeglądania i sprawny proces finalizowania transakcji. Dla właściciela witryny oznacza lepsze pozycjonowanie, większe zasięgi oraz wyższą konwersję. Zostaje zadbać o responsywność swojej strony.