Responsive Web Design – tworzenie stron mobilnych – tutorial

Poniższy tutorial przeznaczony jest głównie dla front-end developerów – z założenia ma być prosty i zawierać będzie tylko esencję dotyczącą kodowania stron mobilnych w technice responsive web design.

O samym pojęciu Responsive Web Design zrobiło się głośno po tym artykule Ethana Marcotte na łamach A List Apart, bardziej szczegółowo ten sposób kodowania został opisany przez tegoż samego autora w książce pod tym samym tytułem.  Cała technika zostaje sprowadzona tutaj do trzech kroków: elastyczna siatka (responsive grid), elastyczne obrazki i filmy video oraz media queries. Omówmy po kolei wszystkie trzy aspekty. Ale jeszcze wcześniej, jedna ważna sprawa, która może Wam zaoszczędzić nieco czasu na dociekaniu „co zrobiłem źle”…

Meta tag Viewport

Większość przeglądarek instalowanych na urządzeniach mobilnych domyślnie skaluje strony w ten sposób, aby cała strona została pokazana w oknie przeglądarki. Ustawienie to można zmienić dodając następującą linię kodu w sekcji head strony:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Grid / Siatka

Jeżeli nie jesteś zupełnie nowy w branży, to projektowanie na siatce jest dla Ciebie tak oczywiste, jak różnica pomiędzy divem a tabelą, makiem a windowsem czy float:left a float:right (jeżeli jakimś cudem ominął Cię jednak ten dogmat, to serdecznie zapraszamy do poczytania nieco więcej np. tutaj).

Generalnie rzecz biorąc, do kodowania na elastycznej siatce można podejść na dwa sposoby:

  • wartości wyrażone procentowo – wszystkie szerokości i wysokości elementów wyrażone są w jednostkach relatywnych – bloki strukturalne w procentach, typografia w em’ach. Przykładem i jednocześnie narzędzie pozwalającym korzystać z takiego podejścia jest Golden Grid System.
  • wartości wyrażone w pikselach – w zależności od szerokości ekranu poszczególne elementy strukturalne zmieniają swoje „stałe” rozmiary. W naszym przykładzie korzystamy z systemu Less Framework (nie mylić z Less CSS).

W jaki sposób w praktyce zmieniamy szerokości kolumn i marginesów siatki czy też samych elementów w nią wpisanych? Odpowiedzią są media queries.

Media Queries

Media Queries to nowość wprowadzona w specyfikacji CSS3 – pełną specyfikację można znaleźć na stronach w3.org. Wykorzystanie tej techniki polega, mówiąc w skrócie, na tworzeniu typów dopasowań, warunków, które mówią przeglądarce w jaki sposób renderować stronę w zależności od rozmiarów okna przeglądarki (viewport) lub rozmiarów ekranu urządzenia (możliwe są także inne warunki m.in. orientacja urządzenia – pionowa czy pozioma). Jak to działa w praktyce?

Wyjaśnimy to na przykładzie naszego darmowego szablonu strony mobilnej. Kodując strony do tej pory opisywaliśmy po prostu poszczególne elementy – w naszym szablonie sekcja body opisana jest w ten sposób:

body {
	width: 896px;
	padding: 72px 48px 84px;
	background: #fff;
	-webkit-text-size-adjust: 100%; 
        /* Stops Mobile Safari from auto-adjusting font-sizes */
}

Nic ciekawego, pewną nowością może być polecenie resetujące ustawienia rozmiarów fontów. Ten fragment kodu będzie używany dla wszystkich rozdzielczości. Musimy zatem wykorzystać media query:

@media only screen and (min-width: 768px) and (max-width: 991px) {

	body {
		width: 712px;
		padding: 48px 28px 60px;
	}
}

Pierwsza linia powyższego fragment kodu określa, że zdefiniowane w niej style zostaną zastosowane dla viewport’ów (jak to ładnie i zwięźle powiedzieć po polsku…) o minimalnej szerokości 768px i maksymalnej 991px – ten warunek jest przeznaczony dla tabletów (można to zdefiniować inaczej – podając np. tylko wartość max-width). W naszym przykładzie zmienia się szerokość tagu body. Dla urządzeń o mniejszej rozdzielczości niż tablety, możemy zdefiniować kolejny warunek:

@media only screen and (max-width: 767px) {

	body {
		width: 252px;
		padding: 48px 34px 60px;
	}

Zmieniać możemy oczywiście nie tylko szerokości, czy właściwości typu margin, padding, border. Projektując na urządzenia mobilne, należy pamiętać o tym, że korzystają one póki co z wolniejszych łącz – można zatem pomyśleć o ukryciu pewnych elementów, podmienieniu obrazków w tle na lżejsze, przesunięcie pewnych elementów w inne miejsce strony etc.

Obrazki

W najprostszy sposób można rozwiązać problem elastycznych obrazków tak:

img { 
max-width: 100%; 
height: auto; 
width: auto\9;
}

Ostatnia linijka kodu, to trick, który pozwoli na użycie tego rozwiązania w IE8…
Minusem powyższego rozwiązania jest to, że niezależnie od rozdzielczości ładowane są pełne (ciężkie) obrazki. Powstały oczywiście tymczasowe narzędzia, które bazując na szerokości ekranu urządzenia, tworzą „w biegu” odpowiednio przeskalowane i odchudzone obrazki.

Oczywiście nie wszystkie przeglądarki wspierają tę technikę. Aby używać media queries w IE8 trzeba posiłkować się javascriptem – css3-mediaqueries-js.

<!-- [if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"</script> <![endif]-->

Najważniejsza sprawa

Same media queries nie gwarantują, że strona będzie przyjazna dla urządzeń mobilnych. Odpowiadają one tylko za warstwę prezentacji, a nie optymalizacji pod kątem urządzeń mobilnych. Wspominałem powyżej o rozmiarach obrazków, należy jednak zadbać o szereg dodatkowych rzeczy, które zredukują czas ładowania się strony.

Komentarze:

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>