Jak stworzyć serwis internetowy, który będzie świetnie wyglądał na każdym urządzeniu i w każdej rozdzielczości?

Dawniej, gdy wydawca postawił sobie za cel stworzenie mobilnej wersji swojego serwisu internetowego, zazwyczaj tworzył niezależną stronę, dostępną pod innym adresem niż witryna przeznaczona dla komputerów. Wtedy sytuacja była prosta i usprawiedliwiała podział na dwa światy: były komputery, potem wielka przepaść i dopiero gdzieś daleko komórki.

Dziś na rynku dostępne są niedrogie tablety, a niemal 50% sprzedawanych telefonów komórkowych to smartfony (dane za IDC, badanie Mobile Phone Tracker, I kwartał 2012 r.). Skutecznie wypełniły one wspomnianą przepaść i wymusiły zmiany w podejściu do tworzenia stron internetowych. Projektanci i webdeweloperzy odpowiedzialni za ich tworzenie korzystają z „techniki” określanej jako responsive design (lub responsive web design).

Pod tym pojęciem kryje się szczytny cel – twórcy chcą zapewnić możliwie najlepszy odbiór treści publikowanej na stronie www, bez względu na rodzaj urządzenia wykorzystywanego do jej przeglądania. Strona internetowa zgodna z responsive design dostępna jest pod jednym adresem; jedyne, co się zmienia, to jej wygląd.

Patrząc pod kątem technicznym możemy powiedzieć, że:

Responsive web design

to sposób tworzenia stron internetowych wykorzystujący szablony CSS (arkusze stylów definiujące wygląd strony) z tzw. media queries, które jako zmienną przyjmują rozdzielczość ekranu.

Jak wygląda to w praktyce? Arkusz CSS zawiera zestawy instrukcji przygotowane pod kątem poszczególnych rozdzielczości. Przeglądarka posiada zdefiniowaną zmienną, która wpływa na to, jaka część arkusza brana jest pod uwagę. Do zmiany wyglądu (i zarazem wartości tej zmiennej) nie jest potrzebne odświeżenie strony – wszystko dzieje się dynamicznie, co możecie przetestować na przykładzie mojego bloga, zmieniając rozmiar okna przeglądarki.

W przypadku urządzeń mobilnych na starcie wysyłana jest informacja o rozdzielczości mniejszej niż w przypadku ekranu komputera. Instrukcje przyporządkowane do tej rozdzielczości zmieniają domyślny wygląd strony. Jeśli chodzi o tablety, sprawa wygląda podobnie… Zwróćcie jednak uwagę, że jeśli zmienimy położenie tabletu lub smartfonu (z horyzontalnego na wertykalne lub odwrotnie), najprawdopodobniej zmieni się także rozkład elementów na aktualnie otwartej stronie internetowej (bo dość istotnie zmieni się rozdzielczość ekranu).

Sponsorowane: Twoje urządzenie nie działa jak dawniej? Wyślij zapytanie do GoRepair – to m.in. serwis telefonów Samsung. Na naprawę udzielana jest gwarancja: 12 miesięcy.

Arkusze CSS zgodne z ideą responsive web design zazwyczaj wykorzystują tzw. siatkę składającą się z 12 lub 16 kolumn. De facto to ona decyduje o wyglądzie strony w danym momencie. Szerokość z każdej z kolumn w danej grupie rozdzielczości określona jest albo bezwzględnie (w pikselach) lub względzie (z użyciem procentów, ale nie tych w płynie :)).

Siatka nałożona na projekt graficzny mojego bloga. Kliknij, aby powiększyć…

/* Domyślne style, które później będą zmodyfikowane
   w zależności od rozdzielczości */
(...)

/* Duże monitory */
@media (min-width: 1200px) { ... }

/* Tablety w trybie panoramicznym */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Telefony w trybie panoramicznym,
   tablety w trybie wertykalnym */
@media (max-width: 767px) { ... }

/* Telefony */
@media (max-width: 480px) { ... }