Przyszłość stron internetowych – Responsive Web Design

W wielkim skrócie Responsive Web Desing oznacza technikę projektowania layout strony www w taki sposób, żeby wyświetlała się poprawnie nie tylko na dużych monitorach laptopów i PC-tów, ale również na urządzeniach moblilnych, takich jak tablety i smartphony. Można powiedzieć, że strona wykonana w tej technice reaguje płynie na zmianę rozdzielczości ekranu urządzenia, na którym strona jest w tym momencie wyświetlana.

Jak twierdzi Wikipedia termin ten został ukuty przez Ethana Marcotte, który w maju 2010-go roku opublikował na swoim blogu artykuł opisujący po raz pierwszy to zganienie. Rok później autor wpisu wydał książkę, w której opisał mechanizm oparty o CSS za pomocą którego można stworzyć responsywną stronę internetową. Rok później Responsive Web Design został uznany przez .net magazine jednym z najważniejszych trendów w web designie.

Standardowe podejście do tematyki projektowania stron

Przed rozpowszechnieniem technik responsywnych webmasterzy tworzyli swoje projekty z założeniem, że w ogromnej większości będą one wyświetlane na monitorach komputerów stacjonarnych i laptopów. Sprawiało to, że wystarczyło założyć, że minimalna rozdzielczość takiego monitora to np. 960 px wykonać stronę dostosowaną do takiej szerokości. Niestety tak wykonana strona wyświetlona na urządzeniu z mniejszą rozdzielczością renderowała się w nieprzewidziany przez webmastera sposób. W wyniku czego użytkownik często był zmuszony do skrolowania strony zarówno w pionie jak i w poziomie co znacznie utrudniało dostęp do zamieszczonych na niej treści.

Zdając sobie z tego faktu sprawę, większe firmy zlecały stworzenie dodatkowej wersji swojej witryny przeznaczonej tylko dla urządzeń mobilnych. Było to głównie ruch z telefonów komórkowych. Mobilne strony posiadały bardzo skromy layout, często bez żadnej grafiki i z okrojoną treścią. Takie rozwiązanie nie było oczywiście zbyt eleganckie, ale stanowiło pewnego rodzaju alternatywę, z której korzystała tak na prawdę niewielka liczba firm.

Podejście responsywne

Sytuacja po woli zaczęła ulegać zmianie obliczu rosnącej popularności smartphonów i tabletów. Statystyki ruchu na strona zaczęły wyraźnie wskazywać przyrost zapytań http pochodzących od urządzeń mobilnych. W listopadzie 2013 roku firma Geminus przeprowadziła badania, według których już 8% ruchu w polskim internecie pochodziło z urządzeń mobilnych. Co ciekawe w tym samym czasie np. w Danii ruch z tego typu urządzeń wynosił aż 35! Zdaniem Marcina Milewskiego, doradcy biznesowego z firmy Gemius, te dane nie pozostawiają przedsiębiorcom wyboru. – Każda firma, która chce prowadzić biznes przy pomocy Internetu – czy to sprzedawać w sieci czy docierać do e-klienta, powinna wdrożyć mobilną stronę internetową. Klasyczna witryna nie tylko nie wygląda dobrze na małym ekranie smartfona, ale też na urządzeniu przenośnym nie wyświetlają się jej wszystkie elementy – wyjaśnia Milewski.

Na czym to wszysto polega

Nie zagłębiając się zbytnio w kwestie techniczne sprawa sprowadza się do wykonania (stylowania) kilku wersji layoutu strony, z których każdy zawierał będzie te same informacje. Serwer www wykrywa na podstawie zapytania http, które jest wysyłane przez każde urządzenie przed pobraniem strony. Zapytanie takie zawiera między innymi dane o systemie operacyjnym zainstalowanym na urządzeniu, przeglądarce internetowej oraz, co ważne rozdzielczości ekranu. Na tej podstawie generowany jest układ strony przystosowany do danej rozdzielczości i wysyłany jako odpowiedź zwrotna do urządzenia.

Zazwyczaj zmianie ulegaja takie elementy jak:

  • rozmieszczenie i liczba kolumn z tekstem czy grafiką
  • umiejscowienie logotypu
  • rozdzielczości grafik
  • layout menu nawigacyjnego

Treści nie zostają w żaden sposób zubożone czy zmienione oraz ogólne wrażenia wizualne pozostają takie same. Strona w żadne nie traci na jakości podczas gdy przeglądamy ją na urządzeniu mobilnym. Jest to zasadnicza różnica pomiędzy responsywnym layoutem strony, a tworzeniem okrojonych stron mobilnych. Co więcej wykonanie kilku widoków strony nie wymaga dodatkowy technologi czy tworzenia odrębnych stron. Wszystko to jest umieszczone w dotychczasowych plikach strony i jest oparte wykorzystywane od dawna technologie CSS i HTML.

Słowem podsumowania

Strona internetowa przystosowana do wyświetlania na urządzeniach mobilnych to przyszłość internetu. Według prognoz raportu Cisco® Visual Networking Index (VNI) na lata 2012-2017, globalny ruch w sieciach mobilnych wzrośnie 13-krotnie w ciągu następnych pięciu lat, osiągając przed rokiem 2017 wartość 11,2 eksabajtów miesięcznie, czyli 134 eksabajty w ujęciu rocznym. Dane te powinny być jasnym sygnałem dla przedsiębiorców, że już najwyższy czas wyposażyć swoją firmę w responsywną stronę. Już za kilka lat sytuacja może ulec odwróceniu i w statystykach ruchu PC-ty i laptopy będą stanowiły tylko ułamek w stosunku do urządzeń mobilnych.


Licencjonowane artykuły dostarcza Artelis.pl (numer seryjny:53978b09-6024-4ac0-96e7-06105bef4303)