HTML 5

Słów kilka o RWD

Czym jest RWD?

RWD to skrót od Responsive Web Design. Technika ta pojawiła się wraz z rozwojem języka HTML do wersji 5. W przeciągu kilku ostatnich lat ogromną popularność zdobyły smartphony, tablety, komputery z retina display, smart tv i netbooki. Coraz większą popularnością cieszą się także SmartWatche, czy też samochody z wbudowaną przeglądarką do komputera pokładowego. Z tego powodu RWD przestała wystarczać strona o szerokości 960px.

Dzięki możliwością HTML5 możemy w prosty sposób, bez ingerencji w treść, określić co strona ma wyświetlać oraz w jaki sposób. Odpowiednie urządzenie umożliwiło stworzenie „zachowań” dla kaskadowych arkuszy styli w zależności od szerokości ekranu, viewportów, wyrażeń, orientacji ekranu, a także proporcji. Stosując tę technikę możemy stworzyć jedną aplikacje webową lub standardową stronę, która będzie dopasowana wyglądem do rozmiarów wyświetlacza urządzenia.

Oldschoolowcy za pewne chętnie zabrali by się za stworzenie oddzielnych, dedykowanych stron dla urządzeń mobilnych z podobnymi funkcjonalnościami. Jak powiedział były prezydent III RP; „Nie idźcie tą drogą Ludwiku Dorn i… Sabo”. Dziś stworzenie dedykowanych aplikacji webowej, czy też klasycznej strony dla każdego urządzenia mobilnego, pochłonęło by ogromne koszty, czas i nerwy developerów. Tu z pomocą przychodzi RWD.

RWD – cegiełki

Media-Queries

Niewątpliwie jedną, najważniejszą rzeczą służącą do zastosowania tej techniki jest Media-Queries. Daje nam możliwość określania w sposób dokładny co będzie się działo z naszą stroną, gdy otworzymy ją na dowolnym urządzeniu z przeglądarką. Użycie Media-Queries jest bardzo proste. Możliwe jest zastosowanie jej w dwóch wariantach:

Pierwszy przykład: wybranie całego pliku CSS i dodanie do niego parametru media

W tym przykładzie cały plik example.css i zawarte w nim style będą działać tylko i wyłącznie na ekranie o szerokości do 600px.

Drugi przykład: w tym przypadki style z naszego pliku example.css zostaną użyte tylko wtedy, gdy urządzenie jest rozpoznane jako TV i ma szerokość większą niż 900 pikseli oraz jego orientacja jest pozioma.

Drugi sposób to osadzenie Media-Queries bezpośrednio w pliku CSS:

@media screen and (min-resolution: 2dppx){ ... }

Styl który znajduje się w miejscu trzech kropek zostanie wykorzystany tylko wtedy, kiedy wyświetlacz naszego urządzenia jest minimalnej rozdzielczości 2dppx. Ma marginesie należy dodać, że dppx to jednostka, która reprezentuje liczbę plamek przypadających na piksel. W przypadku formatu 16:9, 2dppx jest równe 1,125 dpi.

Grid

Druga bardzo ważna rzecz to responsywny grid. Grid daję możliwość osadzenia wszystkich elementów w jednej elastycznej siatce. Sam Grid nie jest rzeczą nową. W gruncie rzeczy, przed epoką RWD, bardzo popularnym rozwiązaniem był 960 grid system. Dziś doczekaliśmy się wielu alternatywnych rozwiązań tego pomysłu, a najważniejszym z nich to połączenie media-queries z gridem. To rozwiązanie pomaga utrzymać wszystkie elementy w porządku, a także daje możliwość dostosowania zachowań elementów, ich pozycje, miejsce i rozmiar na danym wyświetlaczu. HTML5 w swojej specyfikacji posiada system gridów. Niestety jest to nadal Draft, wiec nie należy oczekiwać szybkiej implementacji tego rozwiązania. Oprócz tego, na szczęście mamy do dyspozycji gotowe rozwiązania, już przetestowane i sprawdzone – istnieje spora ilość frameworków CSS, w których skład wchodzą responsywne systemy grid. Najważniejsze i najpopularniejsze z nich to Twitter Boostrap, Zurb Foundation, Pure i Sematic UI. Niektóre z nich są oparte o preprocesory SASS lub LESS, dzięki czemu są łatwe w zmianie wyglądu, podziału grida, czy zachowań dla prostych zdarzeń. Wybór jest naprawdę spory i tak na prawdę należy głównie do developera, od jego potrzeb, upodobań itp.

Responsywne obrazki

Następną bardzo ważną rzeczą jest zagadnienie. Wielokrotnie, zdarza się umieścić na stronie obrazek który na normalnym monitorze wyświetla się świetnie, a na innych urządzeniach już nie koniecznie. Problemem może być niedopasowany format obrazka do formatu wyświetlacza, czy też zbyt duża, nie potrzebna rozdzielczość i waga obrazka dla urządzeń mobilnych. Z pomocą przychodzą dodatkowe parametry src-n:

<img src-1="(max-width: 480px) tiny.jpg"

src-2="(max-width: 1024px) medium.jpg"

src="large.jpg"

alt="RWD!">

W tym przykładzie mamy standardowy element obrazka. W HTML5 możemy dopisać do tego elementu dodatkowe parametry src. Każdy z tych parametrów potrzebuje oczywiście ścieżki do obrazka. Nowością jest to, że możemy określić który obrazek zostanie załadowany w danym przedziale szerokości ekranu.

<img srcset="tiny.jpg 320w, medium.jpg 960w, large.jpg 1200w"

sizes="100%" alt="RWD!">

Kolejny, trochę inny ale nowszy przykład (niestety niewspierany przez większość przeglądarek). Warto o nim wspomnieć ponieważ istnieje pollyfill. To rozwiązanie daje nam możliwość załadowania obrazków w różnych rozdzielczościach, dodanie atrybutu szerokości obrazka, dzięki czemu zaoszczędzimy przeglądarce czas na obliczenie rozmiarów obrazka, a dodatkowo będzie ona potrafiła automatycznie dopasować rozmiar do szerokości ekranu, jeszcze przed załadowaniem wszystkich trzech zadeklarowanych obrazków.

</picture>

Dodatkowy, dość popularny przykład to użycie elementu <picture>. Niepozornie jest to bardzo podobny przykład co wcześniejszy, w tym wypadku zmienia się tylko element. Działanie pozostaje takie same.

Flex Box

Jest to moduł CSS ułatwiający porządkowanie elementów w kontenerze. Bardzo przydatny ponieważ w prosty sposób umożliwia stworzenie elastycznego kontentu, w których elementy będą się dostosowały do naszych wymagań.

Przykład 1 – dwukolumnowa lista od góry do dołu.

Przykładowy kod:

.container {

display: flex;

height: 200px;

flex-direction: column;

flex-wrap: wrap;

}

Przykład 2 – menu rozciągnięte na całą szerokość kontenera

W tym przykładzie, każdy element naszego skromnego menu, automatycznie zmieni swoje położenie i szerokość w zależności od szerokości kontenera. Rozwiązuje to wiele problemów z elementami liniowo-blokowymi na stronie.

Przykładowy kod:

.container {

display: flex;

flex-direction: row;

flex-wrap: no-wrap;

justify-content: space-between;

width: 100%;

}

Przykład 3 – wyróżnienie elementu menu

W tym przypadku, za pomocą parametru flex-grow, został wyróżniony 3 element. Standardowo flex-grow jest ustawiony na 1, w przypadku 3 elementu został ustawiony na 2. Oczywiście nic nie stoi na przeszkodzie aby ustawić dowolną wartość dla każdego innego elementu. Styl kontenera się nie zmienia, flex-grow zostaje bezpośrednio zostaje dodany do elementu.

Przykładowy kod:

.item {

flex-grow: 2;

}

Na tym kończy się zabawa z Flex-box w tym wpisie. Flex-box to spory moduł, który umożliwia bardzo wiele. To co pokazałem jest tylko próbką, po więcej zachęcam do odwiedzenia strony W3C: http://dev.w3.org/csswg/css-flexbox/

Touch Events

Zachowanie kliknięcia myszki różni się od zachowania palca na ekranie. Nawet tak prosty gest jak swipe może być trudno do wywołania dla myszki. W przypadku urządzeń mobilnych możemy zapomnieć o zdarzeniu hover. Przeglądarki mobile potrafią przechwycić takie zdarzenia jak; touchstart, touchmove, touchend, touchcancel i touchleave. Przy pomocy tych kilku zdarzeń, w prosty sposób może zaimplementować takie gesty jak; rotate, swipe, press czy też multitouch. Jeśli jednak nie mamy chęci, ani czasu na zabawę w VanillaJS, możemy użyć takich bibliotek jak Hammer.js, QuoJS, jQuery Mobile.