Co to jest RWD i dlaczego warto zadbać, by nasza strona była responsywna?

Czas czytania:
Autor: webiso

Dziś chyba nikogo nie trzeba przekonywać o tym, że responsywność to must have na każdej stronie internetowej. Statystyki pokazują, że w zeszłym roku niemal 60% ruchu sieciowego wygenerowano właśnie na urządzeniach mobilnych. Przeglądamy sieć na swoich smartfonach i tabletach w drodze do pracy czy na uczelnię, robiąc zakupy czy spacerując z psem. Jak zadbać o to, by nasza witryna zawsze wyglądała dobrze, bez względu na wymiary sprzętu, na jakim ją wyświetlamy?

Co to jest RWD i jakie ma zalety?

Responsywne strony internetowe, czyli w skrócie RWD (ang. Responsive Web Design), to witryny, których wygląd zmienia się w zależności od wymiarów ekranu urządzenia, na którym je wyświetlamy.

Jak uzyskać RWD? Nie chodzi tutaj o konieczność projektowania strony na urządzenia mobilne od nowa, lecz o pewną reorganizację layoutu. Najczęściej w celu uzyskania responsywnego widoku stosuje się następujące działania:

  • zmiana kolejności wyświetlania pewnych elementów,
  • ukrycie (lub pokazanie) określonych elementów,
  • zmiana wielkości określonych elementów.

Zadbanie o RWD w znaczący sposób wpływa to na satysfakcję użytkowników korzystających z naszej witryny, którzy zostają na niej dłużej, a potem często na nią wracają.

Poza User Experience warto także zwrócić uwagę na mniej oczywiste powody zadbania o responsywność strony. Google zwraca bowiem uwagę na tę cechę przy tworzeniu rankingu witryn w wyszukiwarce. Za analizę stron pod tym kątem odpowiada algorytm Mobile First Index. Lepiej ocenia on te witryny, w których zastosowane zostały zasady RWD. Wniosek jest prosty – jeśli zależy nam na tym, by nasza strona dobrze się pozycjonowała, warto zwrócić uwagę, by była ona responsywna.

Ogromną zaletą RWD, zwłaszcza w porównaniu z częściej wykorzystywanymi w poprzednich latach stronami mobilnymi, jest fakt, że responsywna witryna to jedna strona, nie zaś kilka różnych – co oznacza to, że jej adres URL cały czas jest taki sam. Sprzyja to optymalizacji pracy związanej z wdrożeniem witryny – gdy chcemy wprowadzić zmiany dotyczące wyświetlania strony na różnych urządzeniach, pracujemy cały czas w jednym kodzie źródłowym. To samo tyczy się kodów śledzących, np. Google Analytics – dla całej witryny RWD ustawiamy jeden kod, który obsługuje różne rozdzielczości. 

Jak uzyskać responsywność?

Za zmianę layoutu na wielu nieraz urządzeniach odpowiadają niepozorne fragmenty kodu CSS – tzw. media queries. Ustawiamy ten parametr dla elementu, który ma się inaczej prezentować w określonej rozdzielczości, zaznaczając granicę górną, dolną lub obie i definiując za pomocą języka CSS, jak element ten będzie w tym przedziale wyglądał.

O responsywności witryny należy pomyśleć jeszcze przed rozpoczęciem jej implementacji. Na samym początku warto zastanowić się, dla jakich rozdzielczości chcemy, by strona zmieniała swój wygląd. Na tej podstawie ustalamy tzw. breakpointy (punkty graniczne) – rozmiary w pikselach, po przekroczeniu których strona będzie zachowywała się inaczej. Następnie, w oparciu o tę wiedzę, warto rozrysować layouty dla każdego widoku. Dzięki gotowym makietom praca nad pisaniem kodu przebiegnie szybciej, my zaś uzyskamy estetyczny i funkcjonalny wygląd dla każdego urządzenia.

Warto projektować layout witryny w oparciu o zasadę „mobile first” – najpierw przygotowujemy wersję dla urządzenia mobilnego, a następnie widoki desktopowe. To odwrócenie tradycyjnej przez lata kolejności wynika z obserwacji zachowań użytkowników, którzy chętniej przeglądają dziś Internet właśnie na sprzęcie przenośnym. Dopasowanie się do tego trendu jest gwarancją tego, że nasza strona będzie zawsze dobrze się prezentować i działać, a co za tym idzie – przyciągać coraz to nowych odbiorców

Brzmi ciekawie? Umów się na 30 minutową bezpłatną konsultację, wspólnie sprawdzimy czy to ma sens w Twojej firmie.

Administratorem Pani/Pana danych osobowych jest Webiso Domiński, Maziarz Sp. J. z siedzibą w Krakowie, ul. Tatarska 5, NIP: 677-234-88-58. Pani/Pana dane osobowe będą przetwarzane w celu udzielania odpowiedzi na Pani/Pana pytania i wnioski zawarte w formularzu kontaktowym. Podanie przez Panią/Pana danych osobowych jest dobrowolne, ale konieczne, aby otrzymywać odpowiedzi od Administratora. Pani/Pana dane osobowe będą przetwarzane na podstawie art. 6 ust. 1 lit. f) ogólnego rozporządzenia o ochronie danych, co oznacza, że przetwarzanie danych osobowych jest niezbędne do celów wynikających z prawnie uzasadnionych interesów Administratora. Prawnie uzasadnionym interesem Administratora jest komunikacja z użytkownikami strony internetowej. Pani/Pana dane osobowe będą przetwarzane przez okres niezbędny do udzielenia Pani/Panu odpowiedzi na pytania i wnioski. Pani/Pana dane osobowe mogą być też przetwarzane po tym czasie, do upływu terminów przedawnienia ewentualnych roszczeń. Ma Pani/Pan prawo dostępu do treści swoich danych, prawo ich sprostowania, usunięcia, ograniczenia przetwarzania oraz prawo do przenoszenia danych. Ma Pani/Pan również prawo wniesienia sprzeciwu wobec przetwarzania Pani/Pana danych osobowych. Ma Pani/Pan prawo wniesienia skargi do Prezesa Urzędu Ochrony Danych Osobowych, jeżeli uzna Pani/Pan, że przetwarzanie przez Administratora Pani/Pana danych osobowych narusza przepisy dotyczące przetwarzania danych osobowych. Pani/Pana dane osobowe nie będą podlegały zautomatyzowanemu podejmowaniu decyzji, w tym profilowaniu.

Bezpłatna konsultacja

Wspólnie sprawdzimy czy nasze rozwiązania mają sens w Twojej firmie.

    Ogólne rozporządzenie o ochronie danych ?