Responsive Web Design to jedna z propozycji, będącą odpowiedzią na rosnące potrzeby w zakresie obsługi różnorodności wyświetlaczy używanych do przeglądania zasobów Internetu. Pojęcie to zostało po raz pierwszy użyte przez Ethana Marcotte’a w artykule o dokładnie takiej samej nazwie. Poruszył on w nim zagadnienia dotyczące projektu elastycznej siatki, elastycznych obrazów oraz zapytań medialnych i połączył je w całość.
Podejście do takiego projektowania ma też inne nazwy takie jak: układ płynny (ang fluid design), projekt elastyczny (ang. elastic layout), projekt adaptacyjny ( ang. adaptive layout).
Jak zauważył Marcotte, to nowe podejście do projektowania, znacznie wykracza poza konsekwentne stosowanie mechanizmu zapytań medialnych i wymaga zupełnie innego sposobu tworzenia serwisów WWW.
Zapytania medialne
Zapytania medialne (ang. media queries) to wyrażenia logiczne, których wartość w danym momencie decyduje, czy dany blok kodu zawierający reguły CSS będzie na stronie zastosowywany, czy też nie. Na tym właśnie polega projektowanie stron responsywnych. Za pomocą właściwości medialnych (ang. media features), można sprawdzić wiele różnych właściwości sprzętu i wykorzystać je w kodzie. Zapytania medialne możemy umieścić w znaczniku meta, odpowiedzialnym za załadowanie pliku CSS, lub bezpośrednio w kodzie arkusza. Przykładowym takim zapytaniem może być poniższe wyrażenie wewnątrz znacznika:
<link rel="stylesheet" href="smartphone.css" media="screen and (maxwidth:1024px)">
W ten sposób załadujemy plik o nazwie smartphone.css wyłącznie wtedy, gdy strona będzie wyświetlana na ekranie, a rozmiar pola widoku nie przekroczy wartości granicznej, czyli w tym przypadku – 1024 pikseli w szerokości. Z zapytań medialnych możemy korzystać w arkuszach stylu dzięki wyrażeniu @media, a w programach JavaScript za pomocą metody matchMedia(). Odpowiednie zapytania umieszcza się wtedy jako parametr tej metody.
DLA NERDÓW: Zapytania medialne nie muszą ograniczać się do szerokości strony ale 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, na szczęś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.
Układ skalowalny
Projektowanie stron responsywnych o układzie skalowalnym, polega na wykorzystywaniu możliwości modułu zapytań medialnych CSS3 i warunkowego zastosowywania poszczególnych reguł określających prezentację dokumentów HTML. Za pomocą punktów granicznych określanych w zapytaniach medialnych, możliwa jest zmiana układu strony, w zależności od możliwej do zagospodarowania przestrzeni pola widoku.
Przeglądarki WWW urządzeń mobilnych skalują prezentację strony internetowej tak, aby ta zmieściła się w całości na ekranie. W większości przypadków, przeglądanie standardowej witryny na małym ekranie i tak wiąże się z nieustannym przybliżaniem, oddalaniem i przesuwaniem widoku, co przy dłuższej wizycie, zdecydowanie powoduje znaczny dyskomfort. Sytuację, w której strona posiadająca zdefiniowaną stałą szerokość spowodowała zeskalowanie widoku, prezentuje zdjęcie poniżej:
Projekt adaptacyjny jest zaś wyświetlany w skali 1:1 – ma on w założeniu efektywnie wykorzystać dostępną przestrzeń pola widoku przeglądarki, tak, jak pokazano to na następnym rysunku. Konieczne jest zatem skonfigurowanie widocznego obszaru strony, w zależności od ilości dostępnego miejsca możliwego do zagospodarowania.
Aby strona była czytelna i jednocześnie, aby nie wymuszać konieczności przewijania jej w poziomie, należy:
- skonfigurować pole widoku za pomocą metatagu viewport;
- definiować szerokość elementów strony w jednostkach relatywnych, czyli procent i em;
- użyć zapytań medialnych, aby mieć większą kontrolę nad wyglądem poszczególnych elementów w przypadku różnych wielkości wyświetlaczy;
- udostępnić zdjęcia i wideo w kilku rozmiarach tak, aby zapewnić odpowiedni kompromis pomiędzy ich jakością i użytecznością, w zależności od urządzenia renderujacego.
Ponadto, dodaje się funkcjonalności zapewniające wyższą dostępność interfejsu i zawartości strony internetowej, np. za pomocą konwersji jednych elementów w inne – przykładowo listy wypunktowane w elementy rozwijalne. Stosuje się ponadto techniki mające wspierać dostępne metody wprowadzania, jakie udostępnia dane urządzenie. Spójność zawartości na tak skonfigurowanych stronach, uzyskuje się za pomocą rozmieszczania oraz skalowania poszczególnych części układu, a także tworząc dodatkowe i ukrywając nieprzydatne w danym momencie elementy.
Jak wcześniej zaznaczono, większość wymienionych powyżej operacji można wykonać przy pomocy technologii HTML5 i CSS3. Do niektórych zadań może zostać wykorzystany język JavaScript.
Wartości graniczne
Wartości graniczne, na podstawie których są wczytywane kolejne partie arkusza, powinny zostać określone na podstawie zawartości witryny i zapewniać przede wszystkim możliwie najwyższą czytelność zawartości strony internetowej. Niemniej jednak, istnieją pewne konwenanse doboru wartości progowych i odzwierciedlają one najczęściej używane rozmiary pola widoku w urządzeniach z przeglądarką internetową.
Popularny framework służący do projektowania szablonów elastycznych Twitter Bootstrap, proponuje następujące wartości:
- 1200 pikseli dla dużych ekranów;
- 992 pikseli dla najczęściej używanych ekranów średniej wielkości;
- 768 pikseli dla tabletów.
W nowszych wydaniach Bootstrapa, punkty graniczne są sukcesywnie powiększane, co wiąże się z coraz wyższymi rozdzielczościami ekranów stosowanych w urządzeniach elektronicznych
Metoda mobile first
Metoda projektowania znana pod nazwą mobile first, polega na tworzeniu projektu witryny, najpierw dla najmniejszych urządzeń i jego stopniowej rozbudowie, mając na uwadze coraz większe ekrany. W praktyce oznacza to, że najpierw określa się uniwersalne właściwości prezentacji, takie jak: kolorystyka, typografia oraz ikonografia, a dopiero później dodaje się zapytania medialne, odpowiedzialne za załadowanie dodatkowych reguł CSS, odnoszących się do większych pól widoku.
Zastosowanie tej metody opracowywania projektu zmusza projektanta do stosowania bardziej elastycznych rozwiązań, w wyniku czego otrzymuje się lepszą wydajność produktu końcowego. Od początku bowiem podejmuje się wszelki wysiłek zmierzający do tego, aby sprostać warunkom ograniczonych możliwości urządzenia. Czytaj więcej o mobile-first.
Obrazy i wideo
Osobnego omówienia wymagają obrazy, jak również nagrania wideo umieszczane na stronach WWW. Treści te są przechowywane w postaci plików, które muszą być najpierw ściągnięte (w przypadku filmów przynajmniej częściowo), aby mogły zostać poprawnie wyświetlone w przeglądarce. Skalowanie zdjęć, które przeglądarka wykonuje automatycznie, chcąc dopasować je do ekranu, wiąże się z kilkoma konsekwencjami. Po pierwsze – cześć informacji jest niedostępna dla użytkownika. Po drugie – skalowaniem zdjęcia zajmuje się przeglądarka, co wiąże się z zużywaniem zasobów urządzenia. Mimo tego, przeglądarka wczytuje oryginalny plik w całości, co jest równoznaczne z marnotrawieniem transmisji danych.
Korzyści ze stosowania podejścia responsive web design
- atrakcyjny wygląd zawartości strony niezależnie od wielkości i rozdzielczości ekranu
- wygoda użytkowania (czyli lepsze User Experience) dzięki specjalnemu podejściu do projektowania interfejsu
- niższy koszt produkcji w stosunku do tworzenia witryny z dodatkową wersją mobilną
- natywne wsparcie przeglądarek internetowych kompatybilnych z HTML5 i CSS3
Podsumowanie
Projektowanie użytecznych stron internetowych w obecnych czasach jest bardziej złożonym zadaniem, niż jeszcze parę lat temu z uwagi na szeroki wachlarz problemów, z jakim muszą się zmierzyć graficy oraz programiści. Dzięki zastosowaniu nowych technik oraz zaczerpnięciu kilku zasad projektowania interfejsu wprost z aplikacji mobilnych można sprostać temu zadaniu. Tworzone obecnie strony powinny wspierać kilka opcji sterowania: za pomocą myszy komputerowej, ekranu dotykowego i klawiatury. Ma to zapewnić użytkownikowi przede wszystkim możliwość poruszania się po stronie, a także wygodę, niezależnie od używanego przez niego urządzenia.
Więcej o Responsive Web Design w mojej pracy: Skalowalne Układy Stron Internetowych
Źródła
- https://alistapart.com/article/responsive-web-design
- Frain B., Responsive Web Design with HTML5 and CSS3, Packt Publishing, 2012.
- Gasston P., The Modern Web Multi-Device Web Development with HTML5, CSS3, and JavaScript, No Starch Press, 2013.
- LaGrone B., HTML5 and CSS3 Responsive Web Design Cookbook, Packt Publishing, 2013.
