Wersja mobilna vs. responsywna serwisu WWW

Serwis internetowy dostosowany do wyświetlania i wygodnego użytkowania na smartphonach oraz tabletach często nazywany jest serwisem w wersji mobilnej lub serwisem responsywnym.

Dla użytkownika końcowego może to nie mieć żadnej różnicy. Ale między tymi dwoma pojęciami jest niemała różnica.

Serwis responsywny

RWD (Responsive Web Design) to pojęcie określające technikę projektowania serwisów internetowych w takich sposób, aby możliwe było kontrolowane dostosowanie layoutu serwisu do każdej rozdzielczości ekranu (z reguły przyjmuje się 3-4 progi rozdzielczości dla których serwis ma stosować odpowiedni arkusz styli CSS).

Głównym założeniem serwisów responsywnych, jest to że użytkownik końcowy otrzymuje od serwer WWW taką samą odpowiedź, niezależnie czy żądanie zostało wysłane z telefonu czy komputera stacjonarnego. Serwer zawsze wyślę do przeglądarki te same dane i "magia responsywności" zadziała dopiero po stronie klienta. Dokładniej w przeglądarce urządzenia, która zrenderuje wygląd serwisu wg. odpowiedniego zadeklarowanego dla danego przedziału rozdzielczości arkusza styli CSS.

Wczytując odpowiedni arkusz CSS przeglądarka może zmodyfikować wizualnie (tj. przestawić, powiększyć, zmniejszyć itd.) wyświetlić lub ukryć niektóre elementy layoutu (np. ukryć slider). Wyświetlić menu nawigacyjne w formie dostosowanej do urządzeń dotykowych gdzie nie występuje efekt najechania kursorem na element (hover) tylko kliknięcie.

Projektując serwis internetowy nie bez znaczenie jest odpowiedni szyk, kolejność i zagnieżdżenie elementów konstrukcyjnych serwisu internetowego. Musi to być szyk odpowiedni do różnych rozdzielczości i tylko na podstawie arkusza styli zmieniamy wygląd gdyż fizyczna konstrukcja serwisu i treść jest niezmienna.

Warto też nadmienić, że elementy graficzne w serwisie responsywnym muszą być uniwersalne i skalowane przez CSS co niejednokrotnie wpływa na wydajność serwisu. Do przeglądarki na smartphonie można by wysłać mniejszy plik graficzny, ale to jak zaznaczyliśmy na wstępie serwer do klienta wysyła zawsze taką samą odpowiedź z taką samą zawartością.

Serwis w wersji mobilnej

Wersji mobilna serwisu internetowego to z reguły osobny serwis dedykowany na urządzenia mobilne. W momencie, gdy klient wysyła żądanie do serwera z mobilnej przeglądarki serwer rozpoznaje takie żądanie i przekierowuje na adres serwisu mobilnego.

Z reguły następuje przekierowanie na subdomenę np. z adresu http://onet.pl na adres http://m.onet.pl (zaznaczyć należy że przekierowanie działa również w drugą stronę, gdy chcemy wywołać z przeglądarki desktopowej adres serwisu mobilnego, zostaniemy przekierowani do serwisu przeznaczonego dla standardowych przeglądarek).

Dzięki takiemu przekierowaniu już na poziomie serwera można zdecydować jaką odpowiedź wysłać do przeglądarki klienta. Można wtedy wysłać do przeglądarki mobilnej odpowiedz o zupełnie innej konstrukcji, z inną treścią i zawartością graficzną (np. z optymalizowanymi małych grafikami) z całkowicie przestawiona kolejnością elementów konstrukcyjnych, nie trzeba wtedy ukrywać zbędnych elementów bo nie są one w ogóle wysyłane do klienta.

Jak sprawdzić czy strona jest dostosowana do urządzeń mobilnych?

Łatwo to zweryfikować dzięki narzędziu dostarczanym przez firmę Google, dostępnym pod adresem: https://search.google.com/test/mobile-friendly

Wiedza, którą chętnie się dzielimy!