Nástroje responzivního webdesignu
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Nástroje responzivního webdesignuNástroje responzivního webdesignu

 

Nástroje responzivního webdesignu

Google       Google       12. 8. 2013       43 404×

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ě.

Reklama
Reklama

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
print 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.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
9 hlasů
Google
(fotka) Jan ŠkrášekHonza pracuje jako webdeveloper, věnuje se vývoji Nette\Database a Nextras komponentám. Mnoho času věnuje komunitnímu portálu signály.cz. Honza je taky fanouškem XML technologií.
Web     Twitter    

Nové články

Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Reklama
Reklama
Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý