Responsive web design

Responsive web design czy wbrew poprawnej polszczyźnie: responsywne strony internetowe są obecnie bardzo popularnym tematem. Początki można było dostrzec w 2012 roku a szał rozpoczął się rok później i trwa do dziś. Sam zafascynowałem się tematem na tyle, że jest to temat mojej pracy inżynierskiej.

Co to właściwie znaczy? Według najprostszych publikacji strony wykonane według konwencji responsive web design dopasowują układ treści do ekranu urządzenia na którym są wyświetlane, a ściślej, do viewportu przeglądarki internetowej.

W praktyce oznacza to wygodne przeglądanie na ekranach Full HD, być może już nawet 4K, tabletach i telefonach jednej i tej samej strony www. Aby była jasność, wersje mobilne są dedykowane urządzeniom mobilnym i są to tak naprawdę całkiem odrębne lokalizacje, natomiast tzw. strony responsywne są przeznaczone na wszystkie urządzenia i mimo odmiennego wyglądu na telefonie czy komputerze klasy PC jest to cały czas ta sama strona.

Odpowiedź na potrzeby

Jak łatwo się domyślić, chociażby na podstawie obserwacji ludzi na przystankach autobusowych czy w McDonaldzie, coraz częściej korzysta się z Internetu za pomocą urządzeń mobilnych czyli tabletów i w głównej mierze „mądrych” telefonów. Potwierdzeniem mogą być statystyki dowolnej popularnej strony Internetowej.

Głównym problemem przy przeglądaniu zwykłych stron internetowych na urządzeniach mobilnych jest mała czcionka i stosunkowo mały obszar klikalnych przycisków oraz łączy do podstron. Dzieje się tak, bo przeglądarka domyślnie skaluje całą szerokość strony tak, aby ta wpasowała się w ekran urządzenia. Ciągła potrzeba przybliżania i oddalania widoku przy dłuższej wizycie staje się uciążliwa, zatem użyteczność takich stron jest na bardzo niskim poziomie. Odpowiedzią na takie i podobne problemy są właśnie responsywne strony internetowe.

Korzyści ze stosowania responsive web design

  • atrakcyjny wygląd zawartości strony niezależnie od wielkości i rozdzielczości ekranu
  • wygoda użytkowania dzięki specjalnemu podejściu do projektowania interfejsu użytkownika
  • niższy koszt produkcji w stosunku do tworzenia witryny z dodatkową wersją mobilną
  • natywne wsparcie przeglądarek internetowych kompatybilnych z HTML5 i CSS3

responsive web design example 2

Aby ułatwić i uatrakcyjnić przeglądanie zasobów stron internetowych na ekranach o różnej szerokości, opracowano w nowej specyfikacji HTML zapytania medialne.

Jak działają zapytania medialne (ang. media queries)?

Mechanizm działania adaptacyjnych stron www jest wbrew pozorom bardzo prosty. W arkuszach stylu, które determinują wygląd strony www są odpowiednie bloki przypisane poszczególnym szerokościom pola wyświetlania przeglądarki. Są one warunkowo wczytywane dla odpowiednich, z góry zadeklarowanych wartości. Wyobraźmy sobie, że na jakieś stronie miniaturki w galerii wyświetlają się w linii, jeżeli natomiast szerokość pola przeglądania zmniejszy się do 480 pikseli wyświetlają się one pionowo.

Są trzy sposoby na zaimplementowanie zapytań medialnych

  1. Zapytanie wewnątrz kodu strony
  2. <link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" href="800wide-portrait-screen.css">
  3. Zapytania z arkusza stylu
  4. @media screen and (max-device-width: 400px) {h1 {color: green}
  5. Import zapytań
  6. @import url("phone.css") screen and (max-width:360px);

W większości przypadków najlepiej używać pierwszego sposobu ze względu na mniejszą ilość zapytań HTTP potrzebnych do załadowania naszej stronki. Dodatkowym argumentem przemawiającym na korzyść pierwszego sposobu jest brak kompatybilności metody importu w przeglądarkach Microsoft Internet Explorer 8.

Zapytania medialne mogą odpytywać następujące właściwości

  • width: szerokość vewportu w (w niektórych polskich tłumaczeniach viewport jako rozmiar obszaru).
  • height: wysokość rozmiaru okna, przez które patrzymy na stronę internetową
  • device-width: szerokość ekranu urządzenia w pikselach
  • device-height: wysokość jak wyżej
  • orientation: orientacja, naszczęście chodzi tutaj o pion (portrait) lub poziom (landscape)
  • aspect-ratio: stosunek szerokości do wysokości viewportu
  • device-aspect-ratio: stosunek szerokości do wysokości ekranu urządzenia
  • color: głębia kolorów obsługiwana przez urządzenie
  • resolution: przydatne w obsłudze drukarek, pytamy o dpi
  • scan: progressive lub przeplot (interlace), przydatne przy urządzeniach typu TV

Jak widać stosowane na szeroką skalę elastyczne layouty to zaledwie wierzchołek góry lodowej możliwości zapytań medialnych.

Tajemnicą poliszynela jest fakt, że sposób w jaki działają współczesne strony o elastycznych właściwościach jest podobny do pierwotnego sposobu tworzenia layoutów. W pewnym momencie, ze względów estetycznych zaczęto stosować stałe szerokości kontenerów. Teraz dzięki modzie na responsive web design, wróciły do łask metody tworzenia stylów znane z zamierzchłej przeszłości. Mowa tutaj np. o np. procentowym i kontekstowym określaniu wielkości elementów.

Podsumowanie

Stronom responsywnym przyświeca jeden cel, mianowicie użyteczność i dostępność za wszelką cenę. Oprócz poruszonych kwestii designu warto zastanowić się nad wprowadzeniem obsługi interfejsu WAI-ARIA dla niepełnosprawnych, oraz kiedy jesteśmy już przy urządzeniach mobilnych, minimalizowaniu rozmiaru ładowanych danych potrzebnych do poprawnego wyświetlania stron internetowych w tym grafiki i skryptów.

Więcej o Responsive Web Design w mojej pracy: Skalowalne Układy Stron Internetowych

Aby zobaczyć jak działa RWD, zapraszam na moje niedawno wykonane realizacje.

xgate.pl
cloud2.pl
rwd.mansfeld.pl

Responsive web design
4.64 (92.73%) głosów: 11