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 鈥瀊yt鈥. 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 鈥瀘d 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 鈥濽lepszenia鈥 i zak艂adki 鈥濷bs艂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=鈥漜anonical鈥, 偶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 鈥瀦wyk艂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!