SCROLL

Czym jest responsywna strona www?

Responsywna strona internetowa oznacza witrynę, dopasowującą się do rozmiaru ekranu, na którym jest wyświetlana. Responsive Web Design (RWD) daje czytelnikowi komfort i satysfakcję korzystania ze smartfona, laptopa, komputera stacjonarnego czy tabletu bez straty dla jakości strony. Responsywność ma zasadnicze znaczenie dla doświadczeń użytkownika (UX) oraz pozycjonowania (SEO).

Dlaczego?

Pozwala bowiem na wyświetlanie się tekstów, zdjęć, grafik, animacji i filmów w sposób prawidłowy, czyli taki, jaki założył to sobie autor tych treści. Szczególnie użytkownicy sklepów internetowych unikają zakupów w witrynie, która nie jest responsywna.

A strona mobilna?

Jest dużo droższa, ponieważ musi być zaprojektowana jako oddzielny „byt”. Strona: jankowalski.pl będzie wtedy występowała pod adresem: m.jankowalski.pl. To podwaja inwestycję, dlatego lepiej jest od razu zaprojektować stronę responsywną, odpowiednią dla wszystkich rodzajów nośników. To rozwiązanie nie tylko szybsze, ale i tańsze!

Niekiedy wystarczy zaledwie drobna korekta w kodzie źródłowym strony, aby stała się ona w pełni responsywna. Optymalizacja kodu źródłowego skraca czas ładowania się strony a obecnie internauta, który nie dostaje „od razu” tego, czego szuka, zraża się i opuszcza daną witrynę. Szybko ładująca się strona ogranicza tzw. współczynnik odrzuceń, czyli wejść na stronę, niezwiązanych z kliknięciem jakiejkolwiek kategorii, czy odwiedzenia podstrony.

Responsywność a SEO

Po aktualizacji algorytmu w kwietniu 2015 roku strony responsywne wypadają zdecydowanie lepiej
w Google. Ich pozycjonowanie jest o wiele łatwiejsze, niż tradycyjnych witryn internetowych, czy stron mobilnych.

Kolejną zaletą responsywnych witryn jest to, że można je dodatkowo przyspieszyć, wprowadzając funkcję AMP (Accelerated Mobile Pages). Jest to możliwe za sprawą mechanizmów JavaScript, zarządzających ładowaniem zasobów na stronie internetowej oraz usłudze AMP Cache. Przyspieszone strony mobilne pozwalają na skuteczniejsze pozycjonowanie, przede wszystkim treści blogowych, takich, jakie właśnie teraz czytasz.

Google Search Console

To przydatne narzędzie pozwalające na dokonanie analizy już istniejących stron pod kątem, między innymi ich responsywności. Jak to zrobić? Wchodząc do sekcji „Ulepszenia” i zakładki „Obsługa na urządzeniach mobilnych”. Co tam można sprawdzić? Na przykład, które elementy są zbyt blisko siebie, albo w których miejscach treść jest szersza od ekranu.

Inne zalety RWD

Brak ryzyka duplikowania się treści internetowych. W przypadku stron mobilnych Google może uznać je za zduplikowane wersje tych podstawowych. Jednak jest na to sposób. Tworząc stronę mobilną, wystarczy wykorzystać znacznik: rel=”canonical”, żeby uniknąć kłopotów z wyszukiwarką.

Według badań amerykańskiego portalu branżowego SWEOR nawet ośmiu na dziesięciu klientów rezygnuje z zakupów w e-sklepie, który nieprawidłowo wyświetla się na urządzeniach mobilnych. Jeżeli przyjmiemy, że większość Internautów korzysta z sieci właśnie za pośrednictwem swoich smartfonów, wnioski nasuwają się same – rezygnacja z responsywności strony to rezygnacja z dużej części klientów!

Ile kosztuje wdrożenie RWD?

Niektóre firmy oferują wykonanie stron responsywnych w cenie tych „zwykłych”, inne doliczają od kilkudziesięciu do nawet kilkuset złotych w zależności od ilości podstron i dokonywanych zmian. Zwykle potrzeba na nie od kilku do kilkunastu roboczogodzin.

Jak to się robi?

Jeżeli planujemy postawić stronę na WordPressie, oferuje on gotowy szablon o walorach responsywności. Pomogą również odpowiednie wtyczki, które CMS posiada. Instalując sklep na platformie typu SaaS (Software as a Service), takiej jak: Shoper, Sky-Shop, Selly, czy Shopify, od razu otrzymamy witrynę zgodną z technologią RWD. W innych przypadkach konieczne będzie skorzystanie z Media Queries CSS, czy też JavaScript. Tu już bez udziału programisty się nie obędzie.

I na koniec, jak sprawdzić, czy strona jest zgodna z RWD? Zmień rozmiar okna swojej przeglądarki – jeśli witryna dopasuje się do nowych parametrów, to znaczy, że jest responsywna!