Responsywnosc strony internetowej – co to jest?

Różne wersje strony internetowej

RWD to akronim angielskiego wyrażenia Responsive Web Design, czyli, tłumacząc na polski, responsywne projektowanie stron internetowych. Jest to bardzo prosta, a zarazem bardzo rewolucyjna technologia, ponieważ pomaga nam wygodniej i efektywniej przeglądać strony internetowe. Jak to się dzieje? Najprościej tłumacząc technologia RWD (czyli własnie responsywnosc strony internetowej) dopasowuje treści do wielkości ekranu. Wielu zapyta co to jest wielkość ekranu? Czy to jest wysokość, szerokość, przekątna, rozdzielczość itd. To programista wybiera według jakiej wartości skaluje stronę internetową. Może zrobić różne podziały. Jeżeli chce, żeby inaczej się wyświetlało na starszych telefonach, a inaczej na nowych to musi to odpowiednio zapisać i najczęściej się tak robi, ponieważ pierwsze smartfony miały dużo mniejsze rozdzielczości niż dzisiejsze.

Strony internetowe na telefon

Forma naszej wersji telefonowej zazwyczaj jest pionowa, czyli wszystkie boxy, menu główne, nagłówki i tak dalej, mimo, że na stronie deskopowej (wersji na komputer) wyświetlają się w rzędzie, w tym przypadku poszczególne elementy są jeden pod drugim. Pozwala nam to widzieć każdy element dokładnie i nie musimy przybliżać, żeby się czemuś przyjrzeć. Strony internetowe na telefon są projektowane tak, żeby użytkownik Internetu mógł sterować jednym palcem. Obojętnie czy jest to kciuk, czy palec wskazujący. 

Strony internetowe na tablet

Jak powszechnie wiadomo tablety mają większe rozdzielczości od smartfonów i z reguły obsługuje się je trochę inaczej, ponieważ często używamy do tego dwóch rąk. W tym przypadku programista musi przemyśleć, które elementy strony internetowej, w jakiej rozdzielczości będą się lepiej wyświetlały w pionie, a które w poziomie. Być może jest to mniej skomplikowane w rzeczywistości, niż w tym artykule, ale ważne, żeby mieć taki zmysł, w którym wcielamy się w użytkownika strony internetowej. Zazwyczaj projektowaniem takich szczegółów zajmują się UX designerzy i UI designerzy, a później graficy przerzucają ich wizje w projekt.

Jak to wygląda w praktyce?

Wiadomo, że programista nie programuje każdej rozdzielczości, wysokości, szerokości i tak dalej osobno. Byłoby to tak czasochłonne, że albo kosztowałoby sto razy więcej niż normalnie, albo po prostu nikt by tego nie robił. Frontendowiec dostaje gotowy projekt, w którym widzi jak strona ma wyglądać w formie deskopowej, tabletowej i smartfonowej i według tego projektuje. Musi sobie wybrać według czego będzie określał wyświetlanie strony internetowej. Najczęściej jest to szerokość przeglądarki. Tutaj rozdzieliłbym następujące typy:

  • Starsze smartfony – od 0 do 360 pikseli,
  • Nowsze smartfony – od 361 do 960 pikseli,
  • Tablety – od 961 do 1200 pikseli,
  • Ekrany deskopowe – pozostałe.

Te rozdzielczości nieustannie ewoluują i za dwa lata to może być całkowicie nieaktualne, ale myślę, że nawet za dwa lata użytkownikom najnowszych smarfonów i tabletów tak zadeklarowane strony internetowe będzie się przeglądać całkiem wygodnie.

Istnieje jeszcze coś takiego jak orientacja. Poza tym, że programista ustawia szerokości przeglądarek może jeszcze ustawić, czy na przykład smartfon użytkownika będzie ustawiony w pozycji pionowej czy poziomej. Często przeglądając Internet właśnie przekręcamy telefon o 90 stopni, żeby było nam wygodniej. To samo dotyczy tabletu. Żeby strona wtedy wyświetlała się jeszcze lepiej służy do tego określenie orientacji na landscape

Jakie korzyści będę miał z tego, że moja strona będzie responsywna?

Jak już wspominałem wyżej, największą korzyścią jest dużo wygodniejsze przeglądanie naszej strony internetowej na smartfona lub tablet. Co za tym idzie użytkownicy chętniej wrócą na nią, a w konsekwencji być może zostaną Twoim Klientem. Ale to nie jedyna zaleta. Dla kogoś, kto zajmuje się pozycjonowaniem i optymalizacją SEO stron internetowych, responsywność jest absolutną podstawą. Teraz pewnie każdy pomyśli. Co ma wspólnego wygoda użytkownika z pozycjonowaniem? Otóż w tym przypadku bardzo dużo. Google w jednej ze swoich aktualizacji algorytmu, który zajmuje się wyszukiwarką zadeklarował, że strony internetowe, które mają wersję responsywną strony będą miały „chody” w Google, ponieważ są bardziej przystosowane do przeglądania. Dodatkowe „punkty” dostają też strony z wersją mobilną, ale wersja RWD jest dużo lepszym rozwiązaniem i bardziej kompleksowym. Myślę, że już teraz wiesz, dlaczego powinieneś mieć wersję responsywną na swojej witrynie biorąc pod uwagę to, że większość użytkowników Internetu korzysta z urządzeń mobilnych.