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

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

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.

Przyjmuje się, że domyślnie strona przygotowana jest dla ekranu komputera, a style zawarte w danej grupie media query modyfikują wygląd, w tym całkowicie ukrywają elementy, które są zbędne.

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 :)).

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

Strony bogate w grafikę (jak mój blog) zazwyczaj oparte są na siatce o bezwzględnej szerokości kolumny. W ich wypadku tworzy się kilka wariantów wyglądu, bazując na rozdzielczościach mieszczących się w poszczególnych zakresach:

  • Powyżej 1200 px;
  • Między 980 px a 1199 px (wygląd domyślny);
  • Miedzy 768 px a 979 px;
  • Między 481 a 767 px;
  • 480 px lub mniej.

Dla podanych wyżej grup przykładowy szablon arkusza CSS wykorzystującego media queries wyglądałby następująco:

/* 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) { ... }

Mam nadzieję, że mimo technicznego charakteru tego wpisu dotarliście do końca – sprawa jest bowiem ważna, zwłaszcza że przyszłość należy do internetu mobilnego. Do tematu siatek oraz frameworków CSS wrócę w kolejnych wpisach. Poruszę także temat przygotowywania projektów graficznych zgodnych z ideą responsive design.

Komentarze

Wpis o tytule „Jak stworzyć serwis internetowy, który będzie świetnie wyglądał na każdym urządzeniu i w każdej rozdzielczości?” został skomentowany jeden raz. Dziękuję!

  1. Marek Jeleśniański

    Zapraszam do komentowania! Napisz, co sądzisz o tym wpisie i jaka jest Twoja opinia na podjęty przeze mnie temat. Jeżeli podoba Ci się ta notka, udostępnij ją proszę w serwisach społecznościowych.

  1. Paweł

    Jestem programistą php w pełni zgadzam się z tym artykułem.
    Z informacji podanych powyżej można bez obaw korzystać.

Dodaj komentarz

Login to post a comment. If you do not have an account yet, sign up - it takes only a minute.