Ten tekst przeczytasz w 5 min. 

Responsywna strona internetowa, czyli jaka?

RWD, czyli inaczej Responsive Web Design pozwala na dostosowywanie układu, sposobu nawigowania, wyglądu i widoczności elementów w zależności od parametrów urządzenia, na którym wyświetlana jest strona internetowa. W rezultacie wszyscy użytkownicy mają dostęp do jednego źródła treści, które jest rozmieszczone w sposób wygodny do czytania, w zależności od urządzenia, z jakiego korzysta użytkownik. 

W RWD wykorzystuje się najczęściej CSS3 Media Queries do budowania layoutu witryny internetowej, który dostosowuje się do środowiska wyświetlania. RWD oznacza rezygnację z odrębnych wersji witryny dla komputerów, tabletów, smartfonów i innych urządzeń mobilnych, ponieważ sposób wyświetlania strony internetowej jest dostosowywany do specyfiki urządzenia.

Najważniejsze korzyści:

• Google promuje strony responsywne, zatem nasza strona będzie zajmowała wyższe miejsce w rankingu wyszukiwań;
• lepsza konwersja;
• większa atrakcyjność dla użytkowników;
• lepsza czytelność witryny;
• zmniejszenie współczynnika odrzuceń (użytkownicy chętniej zapoznają się z treściami na stronach które są zoptymalizowane do współpracy z ich urządzeniami)
• prostsza do przeprowadzenia aktualizacja;
• mniejsze koszty realizacji oraz utrzymania niż w przypadku tworzenia odrębnej mobilnej wersji strony.
• łatwiejsza i tańsza analityka ruchu na stronie (odrębne wersje strony wymagają odrębnych narzędzi analitycznych, a przynajmniej ich odmiennych kont/wersji) 

Istotnym faktem jest, że technika RWD różni się od mobilnych wersji witryny. Strony przygotowane z myślą o smartfonach i tabletach zwykle występują z przedrostkiem „m” przy nazwie domeny, na przykład: www.m.facebook.com. Zazwyczaj taką specjalną wersję należy osobno zaprojektować, co generuje dodatkowe koszty (czasami bardzo duże). Tymczasem przygotowanie witryny z wykorzystaniem techniki RWD jest rozwiązaniem tańszym, prostszym i szybszym.

Ile kosztuje responsywna strona internetowa? 

Trudno jednoznacznie stwierdzić, ponieważ od takiej wyceny zależy wiele zmiennych (przede wszystkim wielkość serwisu i liczba podstron). Warto jednak pamiętać, że to o wiele wygodniejsze rozwiązanie niż tworzenie dodatkowej wersji mobilnej. Jeżeli przypadkiem wersja na smartfony otworzy się użytkownikowi na komputerze stacjonarnym lub laptopie, użytkownik najpewniej odczuje pewien dyskomfort związany z dziwnym wyglądem witryny. W przypadku responsywnych stron internetowych nie ma tego problemu. Co więcej, witryna zgodna z techniką RWD potrafi wyświetlać dokładnie takie same animacje na wszystkich urządzeniach, bez względu na wielkość ekranu. To niezwykle wygodne dla użytkowników.

SEO responsywnej strony internetowej

Warto wiedzieć co to jest responsywna strona internetowa z kilku powodów. Przede wszystkim strony z technologią RWD mają “fory”. Mogłoby się wydawać, że to dziwne – a jednak. Witryny, które są responsywne Google traktuje jako „lepsze”. Dzieje się tak od kwietnia 2015 roku, gdy został zaktualizowany algorytm. Witryny zgodne z RWD są promowane i dużo łatwiej jest je pozycjonować w wynikach wyszukiwania, co przekłada się głównie na większy ruch na stronie.

Poprawne wdrożenie RWD bardzo często wiąże się także z optymalizacją kodu i redukcją czasu ładowania na wszystkich urządzeniach – a to ma wpływ na SEO – zmniejszając współczynnik odrzuceń. Na dodatek taką witrynę można wzbogacić o funkcję AMP (Accelerated Mobile Pages), a to pozytywnie wpływa na pozycjonowanie, szczególnie jeżeli witryna opiera się na regularnej publikacji nowych treści np. na blogu. Jeżeli poważnie myślisz o SEO i chcesz zawojować ranking organicznych wyników wyszukiwania, obowiązkowo zadbaj o to, aby Twoja witryna była zgodna z RWD.

Czasami responsywna strona jest źle zoptymalizowana. Podstawowe błędy możesz wychwycić za pomocą narzędzia Google Search Console. Po zalogowaniu się na swoje konto przejdź do sekcji „Ulepszenia”, a następnie zakładki „Obsługa na urządzeniach mobilnych”. Google sam podpowiada, jakie zmiany można wdrożyć, aby lepiej dopasować stronę do potrzeb użytkowników. Dowiesz się między innymi, które elementy są zbyt blisko siebie.

Warto także wspomnieć o tym, że responsywne strony internetowe nie narażają Cię na problem związany z duplikacją treści (duplicate content). Witryny posiadające dodatkową mobilną wersję mogą być oznaczane przez Google jako strony ze skopiowaną zawartością. To ile kosztuje responsywna strona internetowa jest bardzo małym kosztem w porównaniu do tego, ile można osiągnąć, gdy jest się w jej posiadaniu. Sam proces pozycjonowania witryny zgodnej z RWD nie różni się za wiele od działań SEO realizowanych dla stron niedopasowanych do urządzeń mobilnych.

Responsive Web Design a SEO

Projektowanie Responsive Web Design w większości aspektów jest korzystne z punktu widzenia optymalizacji SEO. Problem pojawia się wtedy, gdy intencje wyszukiwań na desktopach i urządzeniach mobilnych mocno różnią się między sobą.

Technologia RWD niesie za sobą następujące korzyści SEO:

• Optymalizacja SEO serwisu jest wykonywana jednorazowo dla różnych „wersji” serwisu.
• Dzięki wykorzystaniu RWD nie ma obawy o powielanie treści w przypadku błędnego napisania wersji mobilnej witryny – na różnych urządzeniach dostarczana jest ta sama zawartość, pod tym samym adresem URL.
• Google może odkrywać zawartość bardziej efektywnie, ponieważ strona nie musi być indeksowana za pomocą mechanizmów kilku różnych Googlebotów.
• Udostępnianie serwisu pod jednym adresem ułatwia użytkownikom linkowanie oraz dzielenie się, a algorytmowi wyszukiwarki ułatwia przypisanie właściwości indeksowania do zawartości. Dzięki temu sygnały popularności, takie jak linkowanie, są kumulowane. Linki do standardowej wersji witryny są jednocześnie linkami do wersji mobilnej serwisu.
• RWD pozwala na optymalizację layoutu za pomocą stylów CSS, zamiast wadliwego systemu detekcji User Agenta. Niepotrzebne są przekierowania prowadzące do wersji zoptymalizowanej dla danego urządzenia, co redukuje czas ładowania stron i eliminuje potencjalne błędy powodowane przekierowaniami w oparciu o User Agent.

Google zaleca Responsive Web Design

Zaangażowanie Google w dostępność oznacza starania w kierunku dostarczenia dobrych wrażeń z przeglądania witryny wszystkim użytkownikom. Tworzenie dwóch witryn pozwala na lepsze dostosowanie do możliwości określonego sprzętu, ale jedna wersja witryny pod jednym adresem URL pozwala na uniknięcie niepotrzebnych i skomplikowanych przekierowań i upraszcza udostępnianie adresu internetowego.

Google wspiera 3 techniki budowania witryn zoptymalizowanych do wyświetlania na urządzeniach mobilnych. Są to witryny:

• wykorzystujące Responsive Web Design.
• dynamicznie obsługujące wszystkie urządzenia za pośrednictwem tego samego zestawu adresów URL (zawartość zmienia się w zależności od User Agenta).
• posiadające różne wersje na desktop i urządzenia mobilne

Jak RWD może przełożyć się na twój sukces

Firma Baines & Ernst jest doskonałym przykładem tego jak dzięki RWD możesz zwiększyć swoje wyniki. RWD pozwoliło firmie na zoptymalizowanie sposobu obsługi witryny na urządzeniach o różnych rozmiarach ekranu, eliminując konieczność tworzenia wielu wersji tej samej strony. W ramach pojedynczej sesji w witrynie użytkownicy zaczęli odwiedzać o 11% stron więcej, a współczynnik konwersji w przypadku klientów z urządzeniami mobilnymi wzrósł o 51%.