Responzivní design – profesionálně

E N C Y K L O P E D I E

Z O N E R

P R E S S 1

RESPONZIVNÍ DESIGN

PROFESIONÁLNĚ

Tim Kadlec

2

Responzivní design profesionálně

Tim Kadlec

IMPLEMENTING RESPONSIVE DESIGN: BUILDING SITES FOR AN ANYWHERE, EVERYWHERE WEB Tim Kadlec Authorized translation from the English language edition, entitled IMPLEMENTING RESPONSIVE DESIGN: BUILDING SITES FOR AN ANYWHERE, EVERYWHERE WEB, 1st Edition 0321821688 by KADLEC, TIM, published by Pearson Education, Inc, publishing as New Riders, Copyright © 2013 by Tim Kadlec.

All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without permission from Pearson Education, Inc. CZECH language edition published by ZONER SOFTWARE, A.S., Copyright © 2014.

Autorizovaný překlad anglického vydání nazvaného IMPLEMENTING RESPONSIVE DESIGN: BUILDING SITES FOR AN ANYWHERE, EVERYWHERE WEB, první vydání, 0321821688, autor KADLEC, TIM, vydal Pearson Education, Inc, ve vydavatelství New Riders, Copyright © 2013 Tim Kadlec.

Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována nebo předávána žádnou formou nebo způsobem, elektronicky ani mechanicky, včetně fotokopií, natáčení ani žádnými jinými systémy pro ukládání bez výslovného svolení Pearson Education, Inc. ČESKÉ vydání vydal ZONER SOFTWARE, A.S., Copyright © 2014.

Responzivní design – profesionálně Autor: Tim Kadlec Copyright © ZONER software, a.s. Vydání první, v roce 2014. Všechna práva vyhrazena.

Zoner Press Katalogové číslo: ZRK1313 ZONER software, a.s.

Nové sady 18, 602 00 Brno Překlad: RNDr. Jan Pokorný Odpovědný redaktor: Miroslav Kučera Šéfredaktor: Ing. Pavel Kristián DTP: Miroslav Kučera Obálka: Markéta Jedličková

Informace, které jsou v této knize zveřejněny, mohou byt chráněny jako patent. Jména produktů byla uvedena bez záruky jejich volného použití. Při tvorbě textů a vyobrazení bylo sice postupováno s maximální péčí, ale přesto nelze zcela vyloučit možnost výskytu chyb. Vydavatelé a autoři nepřebírají právní odpovědnost ani žádnou jinou záruku za použití chybných údajů a z toho vyplývajících důsledků. Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována ani distribuována žádným způsobem ani prostředkem, ani reprodukována v databázi či na jiném záznamovém prostředku či v jiném systému bez výslovného svolení vydavatele, s výjimkou zveřejnění krátkých částí textu pro potřeby recenzí.

Veškeré dotazy týkající se distribuce směřujte na: Zoner Press ZONER software, a. s.

Nové sady 18, 602 00 Brno tel.: 532 190 883 e-mail: knihy@zoner.cz www.zonerpress.cz

ISBN 978-80-7413-280-3

slevy, akce,

novinky

Nechejte nám kontakt na novinky.zonerpress.cz a získáte další bonusy, slevy a jiné výhody.

Mé ženě a našim půvabným dcerám

4

Poděkování Často se říká, že psát knihu je práce pro samotáře, že se vykonává v odloučenosti od ostatních lidí. Někdy to tak možná je, ale rozhodně to neplatí pro tuto knihu. Pokud bude kniha někomu k něčemu, tak především díky vší té namáhavé práci, trpělivosti a zpětným vazbám všech, kdo se na tvorbě knihy podíleli.

Chtěl bych moc poděkovat vám všem…

Michael Nolan byl ochoten na mě vsadit a vyzval mě, abych tuto knihu napsal.

Margaret Anderson a Gretchen Dykstra pečlivě vychytaly všechny mé překlepy a nevhodné obraty, takže vznikl dojem, že umím psát mnohem lépe, než tomu skutečně je.

Fantastický vzhled knihy dodala Danielle Foster a tolerovala i několik úprav učiněných na poslední chvíli. Díky také patří zbytku týmu New Riders. Jsou to: Rose Weisburd, Joy Dean Lee, Aren Straiger, Mimi Heft, Rebecca Winter a Glenn Bisignani. Tito lidé také mají zásluhy na tom, že kniha spatřila světlo světa.

Vřelé díky za své fantastické příspěvky také zasluhují Ed Merritt, Brad Frost, Guy Podjarny, Henny Swan, Luke Wroblewski, Tom Maslen a Erik Runyon. Tím, že byli ochotni sdílet své odborné znalosti a zkušenosti, značně obohatili tuto knihu.

Jason Grigsby hlídal, abych nepsal zbrkle a bez rozmyslu, poskytoval mi cenný (často velmi povedený) feedback a neustále mě povzbuzoval. Nejenže je Jason jedním z nejchytřejších lidí, co znám, ale také z nejvstřícnějších a ochotných pomáhat. Jsem vděčný, že ho mohu zvát svým přítelem.

Skvělou předmluvu napsal Aaron Gustafson. O Aaronovi jsem se doslechl hned, jak jsem začal pracovat na webu – a říci, že jsem vděčen a poctěn, že souhlasil s tím, že ji napíše, je jen slabý odvar toho, co cítím.

Různé připomínky, názory a doporučení mi průběžně též dodávali Stephen Hay, Stephanie Rieger, Bryan Rieger, Brad Frost, Derek Pennycuff, Ethan Marcotte, Chris Robinson, Paul Thompson, Erik Wiedeman, Sara Wachter-Boettcher, Lyza Danger Gardner, Kristofer Layon, Zoe Gillenwater, Jeff Bruss, Bill Zoelle, James King, Michael Lehman, Mat Marquis, Nishant Kothary, Andy Clarke, Ronan Cremin, Denise Jacobs a Cennydd Bowles. Za jejich kolektivní brilantní přístup jim kniha hodně vděčí.

Díky také patří všem, s nimiž jsem mluvil osobně nebo konverzoval online, protože mě to inspirovalo k diskusi, která si také našla v této v knize své místo. Je to báječná komunita a jsem pyšný, že do ní patřím.

Děkuji mámě a tátovi, že mě mají rádi a že mě po celou dobu práce na knize povzbuzovali.

Mým milovaným dcerám za to, že mi připomínaly, že je na čase dát si pauzu, věnovat se také trochu jim, pohrát si s nimi, obejmout je a políbit.

Dík patří také mé úžasné ženě Kate. Tato kniha a cokoli dalšího, co jsem v životě udělal dobrého, je přímým důsledkem její neutuchající milující podpory a laskavého povzbuzování. Nenalézám dostatečně silná slova, jimiž bych dokázal vyjádřit, jak moc jsem jí za vše vděčný.

5

Předmluva (Napsal Aaron Gustafson1) Legendární fotograf Chase Jarvis před pár lety vtipně poznamenal, že "nejlepší foťák je ten, který máte s sebou". V té době to bylo mírně šokující prohlášení, zdá se ale, že je pravdivé: perfektní snímek, který se vám podařil, jste jen velmi zřídka plánovali předem. Naopak, objevil se z ničeho nic, tiše a nenápadně.

Když jste se k večeru procházeli v parku, možná paprsky slunce najednou perfektně osvítily spadané listí. Nebo se vaší malé dcerce, která doposud lezla jen po čtyřech, právě teď podařilo poprvé se postavit. V takových momentech je vám houby platná drahá Leica, když ji máte uloženou ve skříni v jiném pokoji, a máte smůlu, pokud jste svou zrcadlovku Rebel nechali v autě – klíčové je, abyste měli vždycky u sebe nějaký foťák, jakkoli mizerný, protože jen tak budete moci zachytit takovou šťastnou shodou okolností vzniklý prchavý okamžik.

Jarvisův výrok vtipně parafrázovala Stephanie Rieger, když prohlásila, že nejlepší prohlížeč je ten, který máte s sebou. Konec konců, život je nepředvídatelný. Příležitosti se rychle vynořují a stejně rychle mizí. Inspirace vás zasáhne rychle a silně jako blesk.

Představte si, že jste výzkumník v oblasti rakoviny. Celé měsíce jste pečlivě pročítali hory výzkumných prací, protože hledáte nějaký způsob, jak zvýšit produkci gama interferonů a tím posílit přirozenou schopnost organismu tlumit vývoj nádorů. Tušíte, že odpověď už je blízko, ale pořád ji nějak nedokážete polapit. A pak jednoho rána, když smýváte své vyčerpání pod příjemnou teplou sprchou, najednou vám to sepne. Heuréka! Myslíte si, že už to konečně máte – jen si potřebuje ještě něco ověřit v článku, který jste četli minulý týden.

Celí promáčení vyskočíte ze sprchy a přistanete na rohožce v koupelně. Není čas se utírat, nedočkavě odpojíte mobil ze zásuvky, kde se nabíjel, najedete na webové stránky časopisu, v němž je kýžený článek. Zjistíte ovšem, že jste byli přesměrováni na mobilní verzi webu, na němž se o publikaci zobrazují jen všeobecné informace, a kde vás vyzývají, abyste se přihlásili k odběru.

S pořád ještě mokrými prsty pádíte po obrazovce, jak se horečně snažíte posunout dolů na konec stránky, kde se obvykle nachází odkaz "Zobrazit plnohodnotný web".

Je tam! Kliknete na něj. A až se stránka konečně načte, zjistíte, že se nacházíte 10 000 metrů nad umně navrženou domovskou stránkou, kterou nemohl vyrobit nikdo jiný, než samotný správce webu.

S využitím gest stránku několik minut přibližujete a oddalujete, později i něco píšete, až konečně najdete kýžený článek. Bohužel v tuto chvíli zjistíte, že je ve formátu PDF a že je téměř nemožné ho číst na vaší mrňavé obrazovce telefonu. Deprimováni tímto průběhem mrštíte mobilem do kouta, sklíčeně zase zalezete pod sprchu a doufáte, že proudící voda odplaví vaše zklamání.

1

Aaron Gustafson je autorem publikace Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement (Easy Readers, 2011)

6 Jak ukazuje tato příhoda, prohlížení webů na mobilních telefonech je až příliš často velmi frustrující záležitost. Ale nemusí být!

Na stránkách této vynikající knihy můj přítel Tim jasně předkládá kroky, které byste mohli (a opravdu byste měli) podniknout, aby webové stránky, které pomáháte vytvářet, nabízely báječné prožitky jakémukoli uživateli. Aby byly ušity na míru schopnostem jejich zařízení a braly ohled na čas a trpělivost uživatele stejně jako na možné datové limity. Jasný, nenucený a neokázalý styl výkladu by vás ovšem neměl vést k domněnce, že tato kniha není špičková. Tim je na tyto věci expert. Já sám jsem se v knize dozvěděl spoustu užitečných věcí a vím, že nejinak tomu bude u vás.

Přispěli k této knize Diskuse týkající se responzivního designu pokračuje rychle kupředu. Mílovými kroky.

Kniha je pokusem o syntézu fantastické rozpravy, která o tomto tématu probíhá v naší komunitě. Ve shodě s tímto záměrem jsem požádal několik lidí, zda by byli ochotni přispět krátkými články založenými na jejich nejnovějších projektech a výzkumech.

Zde je seznam těchto příspěvků seřazených podle pořadí, v jakém se v knize objevují: Vertikální mediální dotazy, napsal Ed Merritt, strana 70. Implikace responzivního designu na výkon, napsal Guy Podjarny, strana 98. Malý telefon, velká očekávání, napsal Tom Maslen, strana 126. Responzivní design a přístupnost, napsala Henny Swan, strana 131. Prosazujte responzivní design, napsal Brad Frost, strana 147. RESS v divočině, napsal Erik Runyon, strana 194. Uvažování nad rámec layoutu, napsal Luke Wroblewski, strana 222.

Všech sedm zde prezentovaných přispěvatelů experimentuje s nejnovějšími trendy responzivního designu. Používají techniky probírané v této knize a posunují rozpravu kupředu. Jsem neskonale vděčný, že jsem mohl do knihy zařadit tyto příspěvky, které jsou založeny na těžce vydřených zkušenostech.

7

Stručný obsah Kapitola 1

Web na čemkoliv a kdekoliv

13

Kapitola 2

Plovoucí layouty

29

Kapitola 3

Mediální dotazy

55

Kapitola 4

Responzivní média

91

Kapitola 5

Workflow pro design

119

Kapitola 6

Plánování

143

Kapitola 7

Responzivní obsah

167

Kapitola 8

Komponenty na straně serveru

185

Kapitola 9

Responzivní prožitky

209

Doslov

Výhled do budoucna

233

8

Podrobný obsah Poděkování

4

Předmluva

5

Přispěli k této knize

6

Kapitola 1

Web na čemkoliv a kdekoliv

13

Co jsme dělali špatně

14

Stále přicházejí nová a nová zařízení

14

Velikost displeje

16

Rychlosti sítě

17

Podpora standardů

17

Vstupní metody

17

Kontext

18

Samostatné weby

18

Divergence

19

Stát se responzivními Postupné vylepšování

21 24

Proč další kniha o responzivním designu?

25

Co se popisuje v této knize?

26

Komu je tato kniha určena?

27

Příklady kódu

27

Doprovodný web

27

Kapitola 2

Plovoucí layouty

Čtyři různé typy layoutů Layout s pevnou šířkou

29 30 30

Plovoucí layouty

32

Elastické layouty

32

Hybridní layouty

33

Který přístup je nejvíce responzivní?

33

Změna velikosti fontů

34

Pixely

34

Em

36

Procenta

37

Bonusová jednotka navíc – rem

38

Responzivní design – profesionálně Který přístup je nejvíce responzivní?

39

Konverze z pixelů

40

Mřížkové layouty

42

Ať obsah sám definuje mřížku

43

Příprava mřížky

43

Kombinace pevných a plovoucích šířek Tabulkové layouty – správná cesta Shrnutí

Kapitola 3

50 50 54

Mediální dotazy

Viewporty

55 58

Pixel je vždy pixel, ledaže by nebyl

58

Meta tag viewport a jeho vlastnosti

59

Struktura mediálního dotazu

64

Mediální typy

65

Mediální výrazy

66

Logická klíčová slova

67

Pravidla

68

Vložené versus externí mediální dotazy Pořadí mediálních dotazů

69 72

Z desktopu dolů

72

Z mobilu nahoru

73

Budování základní sady prožitků

74

Určování breakpointů

77

Sledujte obsah

77

Vylepšování pro hodně široké obrazovky

81

Použití jednotek em pro flexibilnější mediální dotazy

82

Navigace

84

Přepínací tlačítko pro navigační položky

86

Podpora Internet Exploreru

88

Shrnutí

90

Kapitola 4

Responzivní média

V čem je vlastně problém?

Výkon Selektivní obsluha obrázků na mobilech

91 92 93 94

9

10 JavaScript

95

Úvod do metody matchMedia

96

Strategie pro responzivní obrázky

100

Bojovat s prohlížečem

100

Rezignovat

100

Jít na server

100

Další možnosti pro responzivní obrázky

101

Služba Sencha.io Src

101

Adaptive Images – možné řešení?

102

Počkat, jaké řešení si tedy máme vybrat?

104

Obrázky na pozadí

105

Webové fonty

106

Displeje s vysokým rozlišením

108

SVG

109

Potíže s videem a reklamami

110

Video

110

Reklamy

114

Shrnutí

Kapitola 5

116

Workflow pro design

Vaše zkušenosti mohou být odlišné Interaktivní médium

119 120 120

Spolupráce

120

Myslet v systémech

124

Myslete především na mobilní zařízení

125

Exploze mobilních zařízení

125

Mobilní zařízení nutí soustředit se na podstatné

126

Mobilní zařízení rozšiřují vaše schopnosti

127

Nástroje

128

Drátěné modely (wireframes)

128

Prototypy

131

Styloví průvodci

136

Shrnutí

Kapitola 6

141

Plánování

Volba být responzivní

143 143

Responzivní design – profesionálně Faktory ke zvážení

144

Výkon

144

Kontext

145

Struktura obsahu

145

Časové investice

145

Podpora

146

Reklamy

147

Závěr

147

Zamyslete se nad analýzami

148

Zkreslené webové analýzy

149

Na kterých statistikách záleží?

152

Zkreslený tržní podíl

153

Přemýšlejte o svém obsahu

153

Obsahový audit

154

Obsahové šablony

156

Zvažujte, kam směřujete Optimalizovaný pro některé, přístupný pro mnohé Zvažujte prožitky skrze mnohá zařízení Příprava testovacího prostředí

158 158 158 160

Skutečná zařízení

160

Emulátory

163

Služby třetích stran Shrnutí

Kapitola 7

163 165

Responzivní obsah

167

Začínejte obsahem

168

Typy obsahu

169

Účel

169

Tvorba

169

Struktura

169

Jaký obsah zobrazovat a kdy

171

Odstraňování obsahu

171

Vylepšování obsahu

173

Kdy se musí změnit pořadí obsahu?

Struktura obsahu, opět Kam se musíme vydat Kódová bramboračka

177 178 180 180

11

12 První krůčky

181

Vybudování API

181

Shrnutí

Kapitola 8

183

Komponenty na straně serveru

Detekce uživatelského agenta

185 186

Rozbor řetězce uživatelského agenta

187

K čemu využít detekci uživatelského agenta?

188

Detekce schopností

188

Modernizr

189

Jdeme na server

190

Zkombinování detekce uživatelského agenta s detekcí schopností

191

RESS: to nejlepší z obou světů

192

Rozbouřené vody

193

Instalace WURFL

196

Konfigurace

197

Detekce schopností

199

Umožněte telefonovat

203

Optimalizace pro dotyky

205

Shrnutí

Kapitola 9

208

Responzivní prožitky

209

Systém senzorů

210

Síť

210 Co můžeme dělat?

Kontext

211 214

Klasifikace kontextu

216

Pozorujte a zkoumejte

217

Schopnosti zařízení

218

Vstupní typy HTML5

218

API zařízení

220

Shrnutí

Doslov Rejstřík

231

Výhled do budoucna

233 237

Responzivní design – profesionálně

KAPITOLA 4

Responzivní média Hele! Zkoušeli jsme sedmnáct různých způsobů, jak se k nim dostat, ale nikdy se to nepovedlo, protože ať jsme zkusili cokoliv, vždy se našel někdo, komu se nelíbilo, jak jsme se k nim chtěli dostat.

– Buddy Hackett jako Benjy Benjamin v americké akční komedii To je ale bláznivý svět (It's a Mad Mad Mad Mad World)

K bohatým online prožitkům míváme ambivalentní vztah – milujeme je a zároveň nenávidíme, něco čemu se v německy mluvících zemích říká Hassliebe. Na jedné straně nám půvabné obrázky a zajímavá videa pomáhají poskytovat hlubší a příjemnější prožitky. Když se ale na straně druhé umístí na stránku příliš mnoho obrázků a videí, stránka se pomalu načítá, což může být velice frustrující. Musíte pečlivě uvažovat a plánovat, chcete-li uživatelům poskytnout to nejlepší z obou světů: báječné prožitky, které se načtou tak rychle, jak je to jenom možné.

Pomocí metod nastíněných v prvních třech kapitolách jsme vybudovali vzorový responzivní web. Vypadá dobře na desktopových počítačích, na tabletech i na chytrých telefonech. Uživatelé mohou měnit šířku i výšku okna prohlížeče tak, aby si nastavili své oblíbené rozměry, přičemž layout se následně odpovídajícím způsobem přizpůsobí.

Kdyby ale bylo vytváření responzivního obsahu jednoduché, tato kniha by byla opravdu velice krátká. Ještě je tu hodně hodně věcí, které je potřeba dát do pořádku. Konkrétně – značné potíže mohou způsobovat obrázky.

V této kapitole probereme témata: Proč záleží na výkonu. Jak podmíněně načítat obrázky. Jaká responzivní řešení jsou k dispozici pro obrázky a jaká jsou jejich omezení. Jak nahradit obrázky na pozadí, aniž by se musela stahovat spousta obrázků. Jak podmíněně načítat webové fonty.

91

92

Kapitola 4 – Responzivní média Co můžeme čekat nového pro responzivní obrázky. Jak měnit velikost vloženého videa a přitom udržet poměr stran (aspect ratio). Co dělat s responzivními reklamami.

V čem je vlastně problém?

Jakmile se dostaneme k poslednímu breakpointu (1300 pixelů), obrázky, které jsou sdruženy se sekcí "More in Football", už na stránce nevypadají příliš dobře. Kromě toho se jeví jako přeostřené a příliš zrnité.

Pro malé obrazovky bychom mohli na úvod vylepšit úvodní fotografii. Kdyby byla menší verze obrázku lépe oříznutá, obrázek by si udržel svůj původní dojem na čtenáře, i když by se kvůli malé obrazovce zmenšil. Jak můžete sami vidět, při tak malé velikosti obrazovky ztrácejí praporek a bota na snímku svůj původní efekt (obrázek 4.1).

Obrázek 4.1. Na malých obrazovkách (typicky na mobilních zařízeních) ztrácí praporek a bota na obrázku svůj původní dopad na koncového čtenáře.

Náš hlavní problém ovšem není v tom, jak obrázky aktuálně vypadají, ale jak jsou velké, respektive, jak velké kladou požadavky na výkon. Momentálně to máme udělané tak, že se vždy načítají stejné obrázky, bez ohledu na to, jaké zařízení se právě používá. To například znamená, že úvodní obrázek, který je široký 624 pixelů, se stahuje i pro malé obrazovky, kde by bohatě stačil obrázek široký 350 pixelů. Trpí tedy nejenom výkon stránky, ale i uživatelé navštěvující stránku.

Responzivní design – profesionálně

Výkon Bohužel, o výkonu se v mnoha projektech začne uvažovat až s křížkem po funuse. Rychlý pohled na přenesená data ale odhalí, že by tomu mělo být přesně naopak.

Většina z nás, kteří pracujeme s webem jako profesionálové, má rychlejší připojení než průměrný uživatel Internetu. Z toho plyne, že naše a jejich prožitky na webu se liší. Naši uživatelé ale dobře vědí, jak nepříjemné je používat web, který má mizerný výkon.

Web Shopzilla (populární srovnávač cen) v roce 2009 vylepšil načítání své stránky ze čtyř až šesti sekund na pouhých 1,5 sekundy. Efekt byl ohromující. Konverzní poměr (conversion rate) vzrostl o 7 až 12 procent a počet zhlédnutí stránek (page views) učinil skok o extrémně velkých 25 procent.1 Mozilla zjistila obdobné výsledky, když srazila čas načítání stránky o 2,2 sekundy: konverze (v jejich případě se jednalo o stahování prohlížeče) vylétly o 15,4 procent, což je ročně o 10,28 miliónů stažení prohlížeče Firefox navíc!2 Daleko katastrofálnější situace je na mobilních telefonech. Sítě jsou pomalejší, hardware méně zdatný a musíte se vypořádat se zapeklitým světem všelijakých datových limitů a metod používaných pro překódování (transcoding). Navzdory tomu všemu však koncový uživatel očekává stejnou kvalitu. A vskutku tomu tak je – 71 procent mobilních uživatelů očekává, že weby se budou na jejich telefonech načítat stejně rychle (nebo dokonce ještě rychleji) než na jejich domácích počítačích.3 To je špatná zpráva pro náš vzorový web ve stávajícím provedení. Jak logo, tak i úvodní foto článku jsou velmi velké. Úvodní fotografie článku je široká 624 pixelů a zabírá okolo 50 kB. Layout pro malé obrazovky by se s tím mohl vypořádat tak, že by použil mnohem menší obrázek (kolem 300 pixelů), nicméně pořád budeme předávat velký desktopový obrázek místo něčeho vhodnějšího. Musíme brát zřetel na potřebu zredukovat množství dat posílaných přes internet. A rozhodně si nemůžeme dovolit to ignorovat.

Rychlé zhodnocení stránky odhalí, že můžeme optimalizovat následující obrázky: Obrázky v sekci "More in Football". Každý z nich má sice jen 300 pixelů, na

malé obrazovce je ale opravdu nepotřebujeme. Zabírají tam spoustu cenného místa a jejich proporce jsou vzhledem k obsahu zcela špatné (viz obrázek 4.2).

Na malých obrazovkách mají uživatelé lepší prožitky, když se jim zobrazují pouze nadpisy článků – nikoliv obrázky. Úvodní obrázek článku. Tento obrázek je široký obludných 624 pixelů a je velký

cca 50 kB. Na malých obrazovkách by stejně dobře fungoval obrázek o poloviční velikosti. A kromě toho – pokud bude verze obrázku pro malé obrazovky o něco lépe oříznutá, bude vizuální dojem z praporku silnější. Logo. Logo má velikost kolem 10 kB, takže se stáhne mnohem rychleji než

úvodní obrázek článku, ale i přesto je asi tak dvakrát větší, než je potřeba.

1 2 3

"Shopzilla Site Redesign–We get what we measure" na www.scribd.com/doc/16877317/ Shopzillas-Site-Redo-You-Get-What-You-Measure "Firefox & Page Load Speed–Part II" na http://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-–-part-ii/ "What Users Want from Mobile" na www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile/

93

94

Kapitola 4 – Responzivní média

Obrázek 4.2. Obrázky v sekci "More in Football" zabírají na zařízeních s malými obrazovkami spoustu drahocenného místa.

Selektivní obsluha obrázků na mobilech Začneme tím, že odstraníme obrázky ze sekce "More in Football". Možná vás láká prostě jen nastavit display:none a říct, že je vymalováno, ale tím byste žádný problém nevyřešili, jen byste ho zametli pod koberec.

Obrázek nastavený na display:none bude prohlížeč pořád požadovat a stahovat. Takže, i když se obrázek na stránce vůbec neobjeví, problémy s dodatečným požadavkem na server a se zbytečným stahováním obrázku zůstanou. Jako obvykle je správným přístupem začít na úrovni mobilu a postupně vylepšovat prožitky směrem vzhůru.

Začneme tím, že obrázky z HTML kódu úplně odstraníme: 1.

2.

3.

4.

5.

<ul class="slats"> <li class="group"> <a href="#"> <h3>Kicker connects on record 13 field goals</h3> </a>

6.

</li>

7.

<li class="group">

8.

9 .

<a href="#"> <h3>Your favorite team loses to that team no one likes</h3>

10.

</a>

Responzivní design – profesionálně 11.

</li>

12.

<li class="group">

13.

<a href="#">

14.

15.

16.

95

<h3>The Scarecrows Win 42-0</h3> </a> </li>

17. </ul>

S tímto HTML se samozřejmě obrázky nenačtou. Na malém displeji je to zcela v pořádku. V případě větších obrazovek dostaneme obrázky zpět se špetkou javascriptového kódu. Když použijeme datový atribut data-src z HTML5, snadno se tím řekne JavaScriptu, které obrázky má vlastně načíst: 1.

2.

3.

<ul class="slats"> <li data-src="images/ball.jpg" class="group"> <a href="#">

4.

5.

<h3>Kicker connects on record 13 field goals</h3> </a>

6.

</li>

7.

<li data-src="images/goal_post.jpg" class="group">

8.

<a href="#">

9.

<h3>Your favorite team loses to that team no one likes</h3>

10.

</a>

11.

</li>

12.

<li data-src="images/ball_field.jpg" class="group">

13.

<a href="#">

14.

15.

16.

<h3>The Scarecrows Win 42-0</h3> </a> </li>

17. </ul>

JavaScript Nejprve přidáme pomocnou funkci, která bude vypomáhat při výběru elementů. Není sice nezbytná, ale jak za chvíli uvidíte, rozhodně neuškodí, když ji budeme mít: 1.

2.

3.

4.

q : function(query) { if (document.querySelectorAll) { var res = document.querySelectorAll(query); } else {

5.

var d = document,

6.

a = d.styleSheets[0] || d.createStyleSheet();

7.

a.addRule(query,'f:b');

8.

for(var l=d.all,b=0,c=[],f=l.length;b<f;b++) {

9.

l[b].currentStyle.f && c.push(l[b]);

10.

a.removeRule(0);

 Datové atributy pro uživatelská data Do datových atributů, které jsou uvozeny prefixem data-, se typicky ukládají informace, které jsou privátní vzhledem ke stránce. Často se používají pro potřeby skriptování.

96 Tim Kadlec

Z nabídky Zoner Press:

RESPONZIVNÍ DESIGN profesionálně Naučte se budovat responzivní webové stránky.

Ačkoliv responzivní design je ve světě webdesignu vcelku nový pojem (poprvé ho použil Ethan Marcotte v roce 2010 ve svém článku pro magazín A List Apart), stačilo pouze několik let k tomu, aby se stal nepostradatelnou technikou pro tvorbu webových stránek, protože za tu dobu se webové prostředí stačilo změnit doslova k nepoznání. Už nějakou dobu neplatí, že webové stránky se zobrazují hlavně na desktopových PC a noteboocích s velkými obrazovkami – dnešní realita je taková, že se zobrazují úplně všude, od mobilních telefonů přes tablety až k chytrým televizím a dalším zařízením s přístupem na Internet. Nyní je ten pravý čas, abychom přestali vytvářet webové stránky s fixními rozměry a optimalizované pro konkrétní skupiny uživatelů a začali budovat skutečně responzivní weby, které se budou dobře zobrazovat (a dobře fungovat!) na nesčetných zařízeních, bez ohledu na to, jaký mají vlastně výpočetní výkon, velikost obrazovky, rozlišení nebo fyzické rozměry.

Obsah knihy: x Plovoucí layouty x Mediální dotazy x Responzivní média x Plánování

x x x x

Workflow pro design Responzivní obsah Komponenty na straně serveru Responzivní prožitky

Doprovodný web ke knize: http://www.implementingresponsivedesign.com/

slevy, akce,

novinky

HTML5 audio a video, kompletní průvodce

Nechejte nám kontakt na novinky.zonerpress.cz a získáte další bonusy, slevy a jiné výhody.

HTML5 a CSS3 pro webové designéry

Kompletní seznam publikací najdete na

www.zonerpress.cz

Pod tímto logem vycházejí publikace určené pro každého, kdo se zajímá o tvorbu webových stránek. Od ryze praktických příruček a průvodců až po komplexní publikace o všem, co potřebuje webdesignér při každodenní práci. O vydavatelském plánu a výhodách, které můžete získat, se informujte na adrese vydavatelství.

© iStock 10089741

E N C YK LO P E D I E ZO N E R P R E S S

DOPORUČENÁ CENA : KATALOGOVÉ ČÍSLO:

Zoner Press

349 Kč

ZRK1313 ISBN 978-80-7413-280-3

tel.: 532 190 883 e-mail: knihy@zoner.cz www.zonerpress.cz ZONER software, a.s., Nové sady 18, 602 00 Brno

9 7 8 8 0 74 13 2 8 0 3