Web Design Blog / Web:

Projektowanie stron responsywnych

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.

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:

Smartfon

 

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.

smartfon2

 

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.

multiplatform

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.

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.

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

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

xgate.pl
rwd.mansfeld.pl
cloud2.pl
Web Faktura

Źródła

  1. https://alistapart.com/article/responsive-web-design
  2. Frain B., Responsive Web Design with HTML5 and CSS3, Packt Publishing, 2012.
  3. Gasston P., The Modern Web Multi-Device Web Development with HTML5, CSS3, and JavaScript, No Starch Press, 2013.
  4. LaGrone B., HTML5 and CSS3 Responsive Web Design Cookbook, Packt Publishing, 2013.
Projektowanie stron responsywnych
4.53 (90.54%) głosów: 129

Autor: (28 lat)

Pamiętaj, że służę pomocą w razie wykonania lub odnowienia strony lub sklepu internetowego dla twojej firmy. Niech potwierdzeniem moich kompetencji będzie fakt, że jesteś na mojej stronie mimo, że jestem z całkiem innej części Polski ;)

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach płatnej usługi bez pośredniczących nastawionych wyłącznie na własny zysk agencji reklamowych.

Otrzymuj powiadomienie o nowych artykułach

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail