Przy tworzeniu stron, równie ważne obok oprawy graficznej, jest to jak ta oprawa prezentuje się na różnych urządzeniach, dzisiaj nie możemy już sobie pozwolić na piękny projekt graficzny prezentujący się wyłącznie w ściśle określonych warunkach, nie widzimy już podpisów które lata temu miała niemal każda strona:

Stronę najlepiej oglądać w rozdzielczości 1024x768 w przeglądarce Internet Explorer

Obecnie ok 30% ruchu na stronach internetowych generują urządzenia mobilne, głównie smartfony i tablety. Mamy do czynienia nie tylko z rozpiętością rozdzielczości od najpopularniejszej 360 x 640 do przekraczającej rozdzielczość telewizorów FullHD (1920 x 1080)  np. 1440 x 2560 - Samsung Galaxy S6

Dodatkowo witryny można oglądać zarówno w formacie pionowym (portait) jak i poziomym (landscape).

Przykładowo niniejsza strona główna w rozdzielczości 360 x 640 wygląda następująco dla orientacji portrait i landscape

smarfon o niskiej rozdzielczości
(360 x 640)
tryb pionowy - portrait

smarfon o niskiej rozdzielczości
(640 x 360)
tryb poziomy - landscape

RWDportraitRWDlandscape

Do niedawna jedynym wyjściem było projektowanie oddzielnych wersji stron dla komputerów oraz urządzeń mobilnych. Niemniej tam gdzie jest to możliwe warto zastosować technologię RWD pozwalającą na wykonanie i rozwijanie tylko jednej wersji strony, która będzie wyglądać optymalnie na każdym urządzeniu na którym ją wyświetlimy, dostosowując zawartą treść do jego możliwości.

RWD

RWD, czyli strona responsywna to nie tylko zmiana elementów graficznych, nawigacji, innego rozmieszczenia bloków składających się na stronę. To również wyłączenie pewnych elementów, które na urządzeniach mobilnych nie wyświetlałyby się poprawnie, czy chociażby zamiana formatu video z mp4 na otwarty format mobilny WebM.

Dlaczego warto stosować RWD?

  1. Projektujemy i utrzymujemy tylko jedną wersję strony, ograniczamy koszty nie tylko projektowania, wykonania, ale również późniejszego rozwijania i obsługi.
  2. Wyszukiwanie  - strony wykonane zgodnie z RWD są lepiej traktowanie w wyszukiwarce google (zwłaszcza po istotnej aktualizacji algorytmu wyszukiwania google z dn. 21 kwietnia 2015).
  3. SEO - nie musimy dzielić kosztów pozycjonowania na stronę mobilną i zwykłą.
  4. Większa czytelność i przejrzystość strony.
  5. Prostsze zarządzanie i analityka - nie mamy sztucznego podziału na 2 strony.

RWD mimo wszystko wady, o których warto pamiętać:

  1. Strona wykonana zgodnie z RWD paradoksalnie zazwyczaj dłużej się ładuje i jest "cięższa".
  2. Kompromisy które mogą pogarszać oprawę wizualną strony.

Analiza na podstawie przykładowej strony

Jak istotne jest dostosowanie do urządzeń mobilnych widać na załączonym fragmencie analityki rzeczywistej strony pewnej firmy zajmującej się handlem i usługami:

  • 67,47% to urządzenia PC
  • 26,44% tablety
  • 4,91% smartfony

Rozkład ruchu wyraźnie wskazuje na znaczący ruch z urządzeń mobilnych, co tu jest jednak najistotniejsze, to współczynnik odrzuceń.

Jest on największy dla smartfonów - 51,40%; 43,86% dla tabletów i najmniejszy - 37,66% dla komputerów i laptopów. Strona zwłaszcza na małych ekranach smartfonów jest mało komfortowa w nawigacji, klient najszybciej się zniechęca.

analytics-ex1

Desktop67%
Mobile27%
Tablet5%