TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Se stále novými modely mobilních zařízení narůstá fragmentace velikosti displeje, na kterém uživatelé zobrazují webové stránky. Malý displej představuje omezený prostor pro prezentaci dat, je tak třeba s dostupným prostorem nakládat odpovědně.
Responzivní web design (Responsive Web Design) je termín, který poprvé použil Ethan Marcotte ve svém stejnojmenném článku v roce 2010. Marcotte responzivním designem nazývá takový návrh webové stránky a jejího stylování, který bude optimalizovaný pro všechny druhy nejrůznějších zařízení: mobilní telefony, netbooky, notebooky, tablety, osobní počítače i nadměrné displeje.
Přizpůsobení webové stránky probíhá na dvou základních úrovních:
- Proporcionální (flexibilní) design – velikost objektů webové stránky je definována relativně, flexibilně vůči svému okolí.
- Media queries – vzhled je přizpůsoben na základě parametrů cílového zařízení, typicky velikosti průhledu. Průhled (viewport) je plocha dostupná pro vykreslení stránky.
Proporcionální design
Základním stavebním prvkem responzivního designu je definice objektů v relativních velikostech. Relativní jednotky umožňují obecnou definici rozměru elementů, které se přizpůsobí velikosti průhledu. Jazyk CSS definuje dva typy jednotek: relativní a absolutní.
Hodnotu velikosti tvoří číslo následované jednotkou, mezi číslem a jednotkou nesmí být mezera. Jednotka je dvou nebo třípísmenná zkratka. Některé vlastnosti neakceptují záporné jednotky.
Relativní jednotky
Jednotky relativní k velikosti písma jsou následující:
- em – Jednotka reprezentuje relativní velikost vztaženou k velikosti písma pro daný HTML element. Pokud je pomocí ní definována samotná velikost písma, je nová velikost vypočítaná ze zděděné velikosti písma. Jednotka em je také nazývána čtverčík. Čtverčík je rozměr čtverce daného velikostí kuželky písma v bodech. Do formátu čtverčíku vychází verzálka „M“, proto je jako zkratka jednotky používáno em.
Pro zjednodušený přepočet em na px lze upravit výchozí velikost písma tak, aby byl poměr 1:10. Výchozí velikost písma webového prohlížeče je 16 px. Pokud nastavíme kořenovému elementu dokumentu velikost písma 62,5 %, zmenšíme výchozí velikost písma na 10 px, právě této hodnotě pak bude přiřazena relativní velikost 1 em. - rem – Jednotka reprezentuje relativní velikost vztaženou k velikosti písma kořenového elementu dokumentu. Jednotka je ideální pro definici responzivního layoutu. Její relativita je konstantní pro celý dokument, nemá na ni vliv zanoření elementu. Bohužel podpora této jednotky je omezena, především prohlížečem Internet Explorer 8 a staršími.
- ex – Jednotka reprezentuje relativní velikost vztaženou ke střední výšce použitého písma. Její hodnota je často ve vztahu 1 ex ≈ 0,5 em.
- ch – Jednotka reprezentující šířku znaku 0 (nula) použitého písma.
Jednotky relativní k rozměrům průhledu jsou následující:
- vh – Jednotka reprezentuje 1/100 z výšky průhledu.
- vw – Jednotka reprezentuje 1/100 z šířky průhledu.
- vmin – Jednotka reprezentuje menší z hodnot jednotek vh a vw.
- vmax – Jednotka reprezentuje větší z hodnot jednotek vh a vw.
Poslední relativní jednotkou jsou procenta (%). Hodnota procentuálního vyjádření je spočítána ze zděděné hodnoty. Procenta mají stejnou vlastnost jako jednotka em, jejich relativní vyjádření je ovlivněno mírou zanoření.
Mějme CSS třídu nazvanou column-1, její šířka je definována relativně jako 1/4 z dostupné šířky zobrazovací plochy. Ve zdrojovém kódu je definována šířka třídy procentuálně. Pokud element s touto třídou bude přímým potomkem elementu, který bude mít šířku průhledu, bude procentuální definice funkční. Pokud by byl ale element s procentuálním vyjádřením šířky zanořen do elementu s třídou column-2, již by procentuální výpočet nezohledňoval původní záměr. Při použití jednotky vw by byla zachována relativní šířka třídy column-1 nezávisle na jejím zanoření.
<style>
.column-1 { width: 25% }
.column-2 { width: 50% }
</style>
<body>
<div class="column-2">
<div class="column-1"></div>
<div class="column-1"></div>
</div>
<div class="column-1"></div>
<div class="column-1"></div>
</body>
Absolutní jednotky
Jazyk CSS definuje šest absolutních jednotek. Jejich přehled včetně převodních vztahů je uveden
v tabulce.
| Jednotka | Název | Převodní vztah |
|---|---|---|
| cm | centimetry | |
| mm | milimetry | |
| in | palce | 1 in = 2,54 cm |
| px | pixely | 1 px = 1/96 in |
| pt | body | 1 pt = 1/72 in |
| pc | picas | 1 pc = 12 pt |
Media queries
„Media queries“ je název specifikace přidávající do CSS 2 a 3 nové jazykové konstrukce, které dovolí definovat podmínky, za kterých má by styl aplikován. Tyto podmínky jsou závislé převážně na použitém zobrazovacím zařízení a slouží právě k cílenému přizpůsobení vzhledu pro dané zařízení.
Media types
Specifikace Media queries byla vytvořena pro CSS 3, nicméně dřívější specifikace CSS 2 a HTML 4 obsahuje možnost přizpůsobení pro obecný typ zařízení. Zacílit na obecný typ zařízení je možné pomocí pravidla media. Tato pravidla byla definována ve specifikaci „Media types“. Přehled možných Media types je uveden v tabulce.
| Typ zařízení | Popis |
|---|---|
| braille | dotekové zařízení s Braillovým písmem |
| embossed | tiskárna Braillova písma |
| handheld | mobilní zařízení, typicky s malou obrazovkou, limitovaným internetovým připojením |
| tiskárna | |
| projection | projektor |
| screen | barevný displej |
| speech | syntetizátor řeči |
| tty | zařízení s omezeným počtem znaků, s neproporcionálním fontem, např. teletext |
| tv | televizní zařízení, zařízení s nízkým rozlišením a omezenou posouvatelností obrazu |
Zápis Media types se provádí pomocí pravidla @media nebo atributu media. Do bloku označeného pravidlem @media se vkládají definice, které jsou zpracovány, pouze pokud cílové zařízení splní podmínky definované pravidlem @media. Pokud prohlížeč nepodporuje zpracování pravidla @media, jsou definice ignorovány. Čárka mezi Media types má význam logické spojky OR.
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
<link href="style.css" rel="stylsheet" media="print">
<link href="style.css" rel="stylsheet" media="screen">
<link href="style.css" rel="stylsheet" media="screen, print">
Reálného rozšíření se dočkal především Media type screen a print. V době uvedení prvních mobilních prohlížečů schopných zobrazit HTML bylo rozšíření stylů pro handheld velmi malé. Proto se výrobci prohlížečů rozhodli využít typ screen, aby webové stránky vypadaly podobně jako na osobních počítačích. Dnes všechny moderní mobilní prohlížeče využívají typ screen, a proto jsou Media types pro odlišení vzhledu na těchto zařízeních nevhodné.
Media features
Dostupné Media types v CSS 2.1 jsou velmi obecné a pro konkrétní přizpůsobení webové stránky nedostatečné, neboť nic nevypovídají o konkrétních (měřitelných) vlastnostech daného zařízení. V responzivním designu je důležitou vlastností šířka průhledu, tu ale žádná z obecných definic typů nepostihuje. Z důvodu potřeby přizpůsobení se aktuální šířce a stavu zařízení byla vytvořena specifikace Media queries, která definuje „Media features“.
Media features jsou nová pravidla, které jsou prohlížečem dynamicky vyhodnocována, definice závislé na těchto pravidlech jsou tak aplikovány okamžitě. Přehled Media features je uveden v tabulce.
| (min-|max-)width | šířka průhledu |
| (min-|max-)height | výška průhledu |
| (min-|max-)device-width | šířka obrazovky zařízení |
| (min-|max-)device-height | výška obrazovky zařízení |
| orientation | orientace zařízení (na výšku / na šířku) |
| (min-|max-)aspec-ratio | poměr velikosti stran průhledu |
| (min-|max-)device-aspect-ratio | poměr velikosti obrazovky zařízení |
| (min-|max-)color | počet bitů pro komponentu barvy displeje |
| (min-|max-)color-index | počet barev zobrazitelných na zařízení |
| (min-|max-)monochrome | počet bitů na jeden pixel (pro monochromatický displej) |
| (min-|max-)resolution | rozlišení zařízení; pro tuto vlastnost lze použít nový typ jednotky dpi, dpcm a dppx (bod na palec, bod na centimetr, bod na pixel) |
| scan | prokládané/progresivní řádkování (pro tv media typ) |
| grid | mřížkový výstup (pro výstup do Braillova písma, teletext) |
Zápis Media features je shodný se zápisem pravidel Media types. Jednotlivé media features jsou uzavřeny závorkou. Klíčové slovo „and“ má význam logické spojky AND a má vyšší prioritu než logická spojka OR.
@media screen and (color) {
/* definice pouze pro barevne displeje */
}
@media screen and (color), projection and (color) {
/* definice pouze pro barvene displeje nebo barevne projektory */
}
@media (device-aspect-ratio: 16/9) {
/* definice pouze pro displeje s pomerem stran 16:9 */
}
Úrovně zlomu dle šířky průhledu
Při vytváření specializované verze responzivního webu je třeba určit hraniční hodnoty, od kterých se bude upravený vzhled aplikovat. Standardně se přizpůsobuje zejména rozložení a vzhled stránky na základně rozměrů cílového zařízení. Z lineární podstaty definice HTML se nejčastěji vychází z dostupné šířky pro zobrazení. Šířku zařízení často kombinujeme s vlastností resolution.
Pokud má zařízení vyšší hustotu bodů na pixel než jedna, jsou všechny rozměry v pixelech patřičně přepočteny dle této hustoty. Následující tabulka uvádí obecné rozdělení zařízení dle šířky průhledu. Tímto obecným dělením je možné přizpůsobit obsah pro zařízení s různými druhy velikostí displeje. Zlomové body, kdy dochází k aplikaci jiného stylu, se nazývají „breakpoints“. CSS frameworky zajišťující základní typografické stylování webu používají 2–3 zlomové body, definují tak 3–4 cílová zařízení: mobilní telefony, tablety, osobní počítače a nadměrné displeje.
| Šířka | Popis |
|---|---|
| 320 px | zařízení s malou obrazovkou, telefony držené na výšku |
| 480 px | zařízení s malou obrazovkou, telefony držené na šířku |
| 600 px | menší tablety, jako je Amazon Kindle (600×800 px) držený na výšku |
| 800 px | 10" tablet, jako je iPad (768×1024 px) držený na výšku |
| 1024 px | tablety, jak je iPad (1024×768 px) držený na šířku, notebooky, netbooky a osobní počítače |
| 1200 px | širokoúhlé displeje, především notebooky a osobní počítače |
Přizpůsobení pro různou velikost průhledu displeje
Mobilní zařízení mají oproti osobním počítačům zásadně rozdílnou velikost průhledu. Mobilní prohlížeče používají průhled s rozměry velkého displeje a vykreslenou stránku zmenší do velikosti průhledu daného zařízení.
Výchozí šířka průhledu pro vykreslení stránky se liší podle typu prohlížeče a zařízení. Prohlížeč Safari na zařízeních s operačním systémem iOS má šířku průhledu 980 px, prohlížeč Opera Mobile 850 px, prohlížeč systému Android (WebKit) 800 px, Internet Explorer na zařízeních s operačním systémem Windows Phone 974 px.
Aby bylo možné vykreslit stránku přesně pro konkrétní průhled, uvedla společnost Apple roku 2007 v mobilním telefonu iPhone nový metatag viewport, kterým je možno definovat výchozí šířku průhledu. Od roku 2007 se stal metatag viewport de facto standardem.
Metatag viewport může definovat následující vlastnosti:
- width – určuje šířku průhledu pro vykreslení; hodnotou může být velikost v pixelech (uvedená bez jednotky), nebo klíčové slovo device-width, které zastupuje šířku zobrazovací plochy konkrétního zařízení,
- height – určuje výšku průhledu pro vykreslení,
- initial-scale – výchozí přiblížení; hodnota vyjadřuje poměr šířky vykreslené webové stránky a šířky průhledu,
- maximum-scale – maximální přiblížení; hodnota je stejného typu jako pro initial-scale,
- minimum-scale – minimální přiblížení; hodnota je stejného typu jako pro initial-scale,
- user-scalable – nastavení možnosti uživatelského přiblížení; hodnota je z výčtu yes, no; ve výchozím stavu je uživateli přiblížení a oddálení povoleno, pokud je hodnota no, jsou ignorovány vlastnosti maximum-scale a minimum-scale.
Principem responzivního designu je přizpůsobení se dostupné šířce průhledu, ve zdrojovém kódu je uveden příklad metatagu viewport, který nastavuje dostupnou šířku průhledu jako výchozí.
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
>
Přepočet jednotek pro různou hustotu pixelů displeje
Nastavením výchozí šířky průhledu na dostupnou velikost průhledu je pouze relativní informací, prohlížeč potřebuje spočítat absolutní šířku, ve které bude vykreslovat webovou stránku. Velikost absolutních jednotek závisí na hustotě pixelů displeje zařízení. Zařízení lze rozdělit do dvou kategorií:
- Zařízení s nízkým dpi – jednotka px reprezentuje fyzikální vlastnost výstupního zařízení, všechny ostatní jednotky jsou vůči ní definovány relativně. Jeden in se rovná přesně 96 px, které se rovnají přesně 72 pt. Z tohoto vztahu plyne, že absolutní jednotky jako palce, centimetry, milimetry nemají korektní fyzikální velikost.
- Zařízení s vysokým dpi – jednotka px je odvozena od fyzikálních jednotek, velikost 1 px je rovna 1/96 palce.
Mobilní telefony, tablety a osobní počítače spadají do kategorie zařízení s nízkým dpi. Mezi zařízení s vysokým dpi řadíme například tiskárny.
Hustotu pixelů reflektuje vlastnost resolution, dříve implementovaná jako vlastnost device-pixel-ratio. Každé zařízení má stanoveno své vlastní hodnoty resolution, které mohou být vyjádřeny v jednotkách:
- dpi – bod na palec,
- dpcm – bod na centimetr,
- dppx – bod na pixel.
Pokud se vlastnost resolution nerovná 1 dppx, jsou pixely pro prohlížeč úměrně přepočítány dle vlastnosti resolution. Samotný přepočet je aplikován z důvodu zachování kompatibility, weby využívající pixely k definování velikosti budou zobrazeny ve stejné velikosti jako na displejích s hustotou 1 dppx.
Příklad:
Mobilní telefon Samsung Galaxy Nexus má rozlišení displeje 720×1280 px a hodnota resolution je 2 dppx. Vypočítáme, jaká bude šířka v palcích, chceme-li vyplnit celou šířku obrazovky. Šířku obrazovky 720 px podělíme rozlišením v jednotce dppx (2 dppx), tak dostaneme hodnotu 360 px. Pixely pak dle pravidel pro zařízení s nízkým dpi převedeme na palce, tedy podělíme 96. Výsledkem je 3,75 in. Reálná šířka obrazovky se od výsledku liší, šířka displeje telefonu je 5,806 cm, tedy přibližně 2,286 in.
Pokud chceme otestovat připravený responzivní web v prohlížeči osobního počítače, můžeme využít nástroj „Responsive view tool“ v prohlížeči Firefox. V tomto nástroji nastavíme rozměry mobilního zařízení v pixelech, rozměry je třeba převést dle hodnoty resolution konkrétního počítače. Většina displejů osobních počítačů má hodnotu resolution rovnu 1 dppx, poslední osobní počítače společnosti Apple s displejem Retina mají hodnotu resolution rovnou 2 dppx. Na následujícím obrázku je vykreslen responzivní web signály.cz v prohlížeči Firefox na displeji s rozlišením 1 dppx a v prohlížeči Dolphin Browser telefonu Samsung Galaxy Neuxs (Android) s rozlišením 2 dppx (snímek obrazovky mobilního prohlížeče byl patřičně zmenšen). Všimněte si nastavení velikosti v Responsive view tool, výška je zde ještě omezena o softwarová tlačítka Androidu.
Responzivní web signály.cz v prohlížeči Firefox a Dolphin Browser.Závěr
Responzivní web se stal dnes již běžnou součástí návrhu. Než začnete web kódovat, je ale třeba znát dostupné nástroje, které vám CSS a HTML poskytují. To byl také cíl článku, poskytnout čtenáři přehled dostupných nástrojů. O technikách a metodách, které je využívají, zase někdy příště.
Zajímavé čtení: na internetu se toho dá najít mnoho, nicméně velmi dobrým zdrojem o všemožných CSS a HTML vlastnostech je Mozilla Developer Network.
