Webové stránky pro mobilní prohlížeče

Transkript

1 Bankovní institut vysoká škola Praha Katedra informatiky a kvantitativních metod Webové stránky pro mobilní prohlížeče Diplomová práce Autor: Petr Stehlík Informační technologie a management Vedoucí práce: Ing. Aleksandar Antonovič Praha duben 2014

2 Prohlášení Prohlašuji, ţe jsem diplomovou práci zpracoval samostatně a v seznamu uvedl veškerou pouţitou literaturu. Svým podpisem stvrzuji, ţe odevzdaná elektronická podoba práce je identická s její tištěnou verzí, a jsem seznámen se skutečností, ţe se práce bude archivovat v knihovně BIVŠ a dále bude zpřístupněna třetím osobám prostřednictvím interní databáze elektronických vysokoškolských prací. V Praze, dne Petr Stehlík

3 Poděkování Děkuji vedoucímu práce panu Ing. Alexandru Antonovičovi za vedení práce a cenné připomínky, které byly velmi nápomocné při tvorbě této práce.

4 Anotace Tato diplomová práce pojednává o moţnostech tvorby a adaptaci webových stránek pro potřeby mobilních zařízení. Mobilní zařízení v současnosti přistupují k internetovým stránkám stále častěji a při tvorbě webové prezentace by jejich opomenutí bylo chybou. Uţivatelů, kteří vyuţívají pro zobrazení webu tuto cestu, je velké mnoţství a tento jev má stále vzestupnou tendenci. Cílem práce je prozkoumat metodu transformace stránek pro potřeby mobilních zařízení a prakticky vyzkoušet její pouţitelnost a funkčnost. Práce obsahuje teoretickou a praktickou část. V teoretické části je prozkoumán postup převodu stránek na responzivní design a v praktické je tento postup vyzkoušen a předveden. Uţivatelé mobilních zařízení mají specifické poţadavky na obsah, funkčnost i vzhled webových stránek díky omezením a výhodám spojených s těmito zařízeními. Výsledkem práce je aplikace responzivního designu na stránky a sníţení jejich datové náročnosti. Funkčnost re-designovaných stránek byla prakticky odzkoušena a ověřena. Klíčová slova Responzivní design, webová stránka, web, prohlíţeč, mobilní prohlíţeč, mobilní zařízení, CSS

5 Annotation This thesis deals with the possibilities of creation and adaptation of web pages to needs of mobile devices. Mobile devices access the web pages more often and to build a website without keep on mind these devices would be a mistake. Number of users who use this way to access the web is enormous and it has an upward trend. The goal of thesis is to explore methods how to transform pages for needs of mobile devices and practically test its usability and functionality. The work includes theoretical and practical part. In the theoretical part the main objective is to determine how to transform pages into the responsive. The practical part uses, tests and demonstrates this procedure. Mobile users have specific requirements for the content, functionality and appearance of web pages. Mobile devices have their own restrictions and benefits and the web must keep on mind their specific needs. The main result of the thesis is an application of responsive design on web pages and reduction of their data transfer. Functionality of re-designed pages was practically tested and checked. Key words Responsive webdesign, web page, web, browser, mobile browser, mobile device, CSS

6 Obsah Prohlášení... 2 Poděkování... 3 Anotace... 4 Klíčová slova... 4 Annotation... 5 Key words Úvod Zvolené metody zpracování Zařízení přistupující k internetu Operační systémy Mobilní zařízení versus desktopy Mobilní internet v ČR Technologie CSD a HSCSD GPRS EDGE CDMA UMTS a nadstavba HSDPA, HSUPA LTE Pokrytí Mobilní zařízení Omezení mobilních zařízení Velikost obrazovky Připojení Funkce přejetí myši Vstup z klávesnice... 23

7 5.1.5 Nepřesné kliknutí Pomalý hardware Relace Výhody Místo pouţívání mobilních telefonů Mobilní prohlíţeče Mobilní web Responzivní web design Testovací stránka CSS 3 Media Quieries Výška a šířka prohlíţeče a zařízení Operátory Poměr stran Only Barevnost Rozlišení Orientace zařízení Podpora Media Quieries Přidání mobilního stylu Styl pro mobilní zařízení Plovoucí layout Plovoucí obrázky Malé displeje s velkým rozlišením Meta tag viewport Kvalitnější obrázky Mobile First Zrychlení načítání stránek... 43

8 9.1 Minimalizace http poţadavků a sníţení velikosti externích souborů Sjednocení externích souborů Ukládání do mezipaměti Sníţení velikosti dat stahovaných ze serveru Komprese dat Optimalizace obrázků Mobilní SEO Poţadavky separátního webu Úprava stránek na responzivní design Kontrola HTML Kontrola stylu Responzivní design Viewport RWD pro větší zařízení Navigace Rozbalovací menu pro dotykové zařízení RWD pro menší zařízení Výsledné zobrazení Obrázky pro displeje s velkou hustotou pixelů Internet Explorer Test stránek Rychlost načítání Sníţení velikosti CSS stylů Sníţení velikosti JavaScriptu Výsledek komprimace CSS a JavaScript souborů Optimalizace obrázků Komprimace těla dokumentu... 67

9 Zhodnocení zrychlení webové prezentace Závěr Citovaná literatura Přílohy Příloha 1: Mobilní pokrytí ČR T-mobile O Vodafone Příloha 2: Poměr pouţívání desktopových prohlíţečů... 75

10 1. Úvod Mobilní zařízení jsou nedílnou součástí dnešní společnosti. Tablety, mobilní telefony, či netbooky jsou dennodenně pouţívány a většina lidí si nedokáţe ţivot bez těchto zařízení vůbec představit. Zároveň neustále roste počet mobilních zařízení, která se připojují k síti internet. S tím roste také potřeba vytvářet a přizpůsobovat webové prezentace těmto přístrojům. S rostoucím počtem mobilních zařízení dochází k jejich intenzivnímu vývoji. Například právě ve schopnosti prohlíţečů správně interpretovat webový obsah. Vyvstává otázka, zda je nutné vytvářet mobilní verzi nebo vyvíjet responzivní web, jaké jsou jejich odlišnosti a jaká je podpora v prohlíţečích. Tato práce má za cíl prozkoumat moţnosti při tvorbě webových stránek pro mobilní prohlíţeče. Nedílnou součástí diplomové práce je i praktická aplikace responzivního web designu na modelových stránkách. Výsledkem práce je také shrnutí podpory funkcí v prohlíţečích. 10

11 2. Zvolené metody zpracování V diplomové práci jsou jak teoretické poznatky, tak praktická aplikace. Úkolem bylo nejprve se teoreticky zaměřit na danou problematiku a proniknout do jejího úskalí. Součástí práce není pouze teoretický průzkum, co všechno by měly stránky splňovat, ale i pochopení současného stavu pouţívání mobilních zařízení a důleţitost tvorby webových stránek pro tato zařízení. Druhou částí práce je praktická aplikace responzivního designu s důsledkem na zachování celkového vizuálního dojmu stránek a pomalá změna vzhledu. Součástí je také vyhodnocení postupu a kontrola výsledného vzhledu v různých velikostech oken prohlíţeče v širším spektru prohlíţečů. V závěru práce se nachází vyhodnocení a doporučení postupu při tvorbě responzivních webových stránek. 11

12 3. Zařízení přistupující k internetu V dnešní době došlo k obrovskému zvýšení počtu a typů zařízení připojujících se na internet. Před čtyřmi lety se uţivatelé připojovali primárně z notebooků a stolních počítačů. Dnes je situace odlišná. V kaţdé domácnosti, která se připojuje k internetu, se nachází aţ 10 zařízení, které toto připojení umoţňují. Analytici předpokládají, ţe vyjma chytrých telefonů počet zařízení s předplacenými datovými tarify poroste meziročně do roku 2016 osm krát rychleji, neţ počet zařízení připojujících se pouze pomocí Wi-Fi sítě (1). Stejně, jako roste počet zařízení, roste i počet lidí připojujících se z mobilních telefonů. Za poslední rok se v České republice z těchto zařízení připojilo 3,7 milionu uţivatelů. To znamená meziroční růst o 400 tisíc lidí. V Česku bylo ke konci roku ,24 milionů SIM karet, z toho 27 % vyuţívá připojení k Internetu prostřednictvím mobilního telefonu. Toto číslo však zahrnuje i vyuţívání internetu prostřednictvím aplikací. Uţivatelů, kteří pravidelně přistupují k internetu pomocí mobilního prohlíţeče, je 2,2 milionu. To činí zhruba třetinu populace České republiky. S rostoucími přístupy přes mobil roste podíl přístupů na webové stránky prostřednictvím těchto zařízení. Například u stránky Sport.cz je nárůst aţ na 20% podíl přístupů z mobilních zařízení (2). 3.1 Operační systémy Před 2 lety nejvíce lidí v České republice přistupovalo k internetu přes telefon s operačním systémem Symbian. V loňském roce to byl jiţ Android s 60 % a podíl Symbianu neustále klesá. Ostatní operační systémy, mezi kterými stojí za zmínku například ios a Windows Phone, zaznamenaly také meziroční nárůst uţivatelů (viz obrázek 1) (2). 12

13 Obrázek 1: Podíl mobilních operačních systémů připojujících se k internetu (Zdroj: Mobilní zařízení versus desktopy Počet přístupů z mobilních zařízení se za poslední rok téměř zdvojnásobil. Začíná se tedy jednat o nezanedbatelné procento uţivatelů (viz obrázek 2). Počty připojených mobilních zařízení svědčí o tom, ţe je třeba tento trend sledovat a zváţit, zda lépe přizpůsobit webovou prezentaci uţivatelům přistupujícím z mobilních zařízení (3). Obrázek 2: Přístupy z počítačů, mobilů a tabletů 13

14 4. Mobilní internet v ČR 4.1 Technologie Mobilní internet je zajišťován operátorem přes mobilní síť v podobě datového tarifu. Internet v mobilních zařízeních tedy závisí na signálu a kvalitě pokrytí. Mobilní sítě jsou zastaralé a jsou vystavěny pro poţadavky hlasových hovorů, které na rozdíl od přenosu dat nerostou (viz obrázek 3) (4). Obrázek 3: Růst datového a hlasového přenosu v mobilních sítích (Zdroj: png) V souvislosti s mobilními technologiemi jsou uváděny pojmy generace, mobilní sítě a technologie. Tyto pojmy je vhodné správně rozlišovat (viz tabulka 1, tabulka 2). V první tabulce jsou k jednotlivým generacím sítí přiřazeny odpovídající technologie a typy mobilních sítí. Ve druhé tabulce jsou vypsány technické parametry jednotlivých technologií (4). 14

15 Označení generace 2G 2.5G 2.75G 3G 3.5G 3.75G 3.9G 4G Název technologie eso, HSC SO GPRS EDGE, fcoma lxrtt UMTS, CDMA lxev-do HSDP A HSU PA LTE LTE- Advanced, WiMax-2 Název mobilní sítě GSM GSM GSM, COMA200 0 UMTS, COMA2000 UMTS UMTS E- UTRA N E-UTRAN, WiMax Tabulka 1: Generace, technologie a mobilní sítě (Zdroj: Název technologie Rok uvedení Přenosová frekvence GffiS (síť GSM) /1800 MHz 80 kbps EDGE (síť GSM) /1800 MHz 218/134 kbps lxrtt (síť CDMA2000) lxev-do (síť CDMA2000) UMTS (W- CDMA) (síť UMTS) HSDPA (HSDPA+) (síť UMTS) HSUPA (HSUPA+) (síť UMTS) LTE (síť E-UTRAN) Maximální Způsob teoretická rychlost přenosu dat dat. Přenosu Symetrický / Asymetrický Symetrický / Asymetrický Max. vzdál, vysilače a přijímače 35 km 30 km MHz 307/153 kbps Asymetrický 54 km MHz 3.1/1.8 Mbps Asymetrický 54 km MHz 2048 kbps /1900 MHz 14.4 (42 Mbps) /1900 MHz 2008 V Evropě obvykle 800, 1800, 2600 MHz Tabulka 2: Mobilní technologie a jejich vlastnosti (Zdroj: Mbps (7.2 Mbps) 100/50 Mbps Symetrický / Asymetrický 2 km Technologie pouze pro Downlink Technologie pouze pro Uplink Symetrický / Asymetrický 6 km 5 km 30 km 15

16 4.1.1 CSD a HSCSD Tyto první technologie vznikly před rokem CSD (Circuit Switched Data) a HSCSD (High Speed Circuit Switched Data) fungovaly (po odečtení kapacit na funkčnost, udrţení kanálu a opravu chyb) rychlostí 9,6 kb/s. Tyto technologie nabízely stabilní připojení společné pro hlasové kanály a velmi se podobaly vytáčenému ADSL (Asymetric Digital Subscriber Line). Jejich pokrytí bylo stejné jako pokrytí GSM. Datové kanály byly vyhrazeny po celou dobu, i kdyţ neproudila ţádná data (4) GPRS GPRS byla do provozu uvedena před 17 lety a oproti CSD byl tok dat pouze ve chvíli, kdyţ byl vydán poţadavek. Kanál tedy nebyl otevřen neustále. GPRS se dělí na 3 třídy: A GPRS a datový přenos B hlasový nebo datový přenos C pouze tok dat. Přenosová rychlost činí 80/40 kb/s (4) EDGE EDGE neboli EGPRS vzešla z GPRS a funguje na GSM (Globální systém pro mobilní komunikaci) sítích. Její podpora však není všude tam, kde je signál GSM. Hypotetická rychlost je 236 kb/s, v praxi kb/s (4) CDMA Technologie CDMA 1xRTT a 1xEV-DO jsou poskytovány mobilními operátory, ale ne pro mobilní telefony. Jedná se o modemy (Modem nebo PCMCIA karta do notebooku) pro počítače fungující na mobilním internetu. 1xEV-DO umoţňuje pouze datový přenos a dosahuje rychlosti 2,4 Mb/s (4) UMTS a nadstavba HSDPA, HSUPA Tyto technologie nefungují na GSM, ale na síti UMTS, která je vytvořena pro hlasový i datový přenos. To ji řadí do sítě 3. generace. Síť UMTS se dělí na UMTS FDD. Ta slouţí pro data i hovory a dosahuje 384 kb/s, a na UMTS TDD, která je určena pouze pro přenos dat. UMTS TDD je sice rychlejší (800 kb/s), ale není podporována mobilními telefony. 16

17 HSDPA je nadstavbou UMTS a její maximální rychlost je 14,4 Mb/s. HSUPA je pouze označení pro rychlost nahrávání s rychlostí 5,76 Mb/s (4) LTE LTE je nově vznikající síť, která dosahuje rychlosti 100/50 Mb/s. Je zaloţená na sítích GSM/ EDGE a UMTS/HSPA. Jedná se o čistě datovou síť, která umoţňuje daleko rychlejší připojení. Pokrytí je však omezeno pouze na největší města České republiky (viz příloha 1). V současné době je podpora této technologie chytrými telefony mizivá. Na tuto síť se lze připojit pouze z nejnovějších modelů mobilních telefonů (iphone 5, Android: Samsung Galaxy S3, S4, HTC One, LG G2, apod.). Operátoři však nabízejí externí modemy, umoţňující připojení i jiných zařízení. V České republice kvalita a pokrytí datovými sítěmi za ostatními státy zaostává a ani tato technologie není výjimkou (5). 4.2 Pokrytí Pouţitelnost mobilního webu závisí na rychlosti a dostupnosti mobilních sítí. Ve světě mělo v roce 2013 vysokorychlostní připojení k internetu 2 miliardy lidí. To činí zhruba 30 % světové populace. Potenciálně by ale mohlo být připojeno mnohem více lidí. Signál 3G totiţ pokrývá (ke konci roku 2012) polovinu světové populace. V dnešní době funguje většina mobilních zařízení na tzn. broadbandu. Jedná se o širokopásmové připojení mobilního internetu. Tento termín je někdy zaměňován s termínem vysokorychlostní připojení. V České republice rozšíření broadbandu, na rozdíl od ostatních států, meziročně stagnuje (viz obrázek 4) a nyní představuje asi 50 % (6). 17

18 Obrázek 4: Rozšíření broadbandu v České republice (Zdroj: ITU World Telecommunication/ICT indicators database; upraveno) 18

19 5. Mobilní zařízení Dnes je na trhu k dispozici široká škála mobilních zařízení. První notebooky vznikly jiţ kolem roku 1979, PDA (Personal Digital Assistant) v roce 1990 a mezi současné novinky patří chytré telefony a tablety. Mobilní zařízení, přistupující k internetu, se v různých aspektech liší. Rozdíly jsou hlavně ve velikosti obrazovky, ovládání, výkonu, paměti a velikosti zařízení. Mezi mobilní zařízení lze zařadit: Notebook Netbook Tablet UMPC MID Chytrý telefon PDA Notebooky jsou zařízení, které umoţňují práci a konektivitu z různých míst. Některé notebooky (nebo ultrabooky) váţí i pod 1,5 kg a mají velikost obrazovky okolo 13 palců. Netbooky mají typicky 10 palcový monitor a díky své malé velikosti váţí méně neţ 2 kg. Tyto přístroje mají dlouhou výdrţ baterie a nízký výkon. Jsou určeny na nejběţnější úkony, jako je prohlíţení webových stránek. Od výroby netbooků jiţ řada výrobců upustila (7). Tablety jsou vývojově mladší neţ netbooky a díky své rychlosti a mobilitě jsou dnes více populární. Tablety svou výbavou spíš připomínají mobilní telefony, ale prodávají se i s operačním systémem Windows 8, který je typický pro notebooky a stolní počítače. Jejich monitory mohou mít velikost i 11,6 palců a ovládají se dotykem. Lze k nim připojit externí klávesnici a není nutné je vypínat. Díky tomu jsou okamţitě připraveny k práci. Tablety není problém nechat v reţimu spánku i několik týdnů. Dalším parametrem je dlouhá výdrţ baterie (8). PDA je malý kapesní počítač, který se obvykle ovládá stylusem (dotykovým perem). Je poměrně malý a zvládá velké mnoţství aplikací nebo přehrávání videa. V současné době jsou jiţ PDA zastaralá, protoţe je nahradily chytré telefony. Chytré telefony, které poskytují Wi-Fi připojení a mobilní komunikace, umoţňují vysokou mobilitu a neustálou konektivitu. Ovládají se většinou pomocí dotykového displeje 19

20 a některé modely mají hardwarovou klávesnici. Jejich typickou vlastností je malá velikost obrazovky. To znamená, ţe velikost a váha zařízení je nízká, ale jeho pouţitelnost se tím sniţuje (7). V této práci bude dále pod pojmem mobilní zařízení myšlen hlavně chytrý telefon a tablet. 5.1 Omezení mobilních zařízení Počet mobilních zařízení neuvěřitelnou rychlostí roste. I kdyţ se s počtem prodaných zařízení lepší jejich vlastnosti, některá jejich omezení stále zůstávají. Obrazovky jsou malé, datové sítě nejsou spolehlivé a moţnosti psaní pomocí dotyku nejsou dostatečné. V následujících podkapitolách budou problémy mobilních zařízení rozebrány Velikost obrazovky Velikost obrazovky a její rozlišení je určující vlastností pro způsob vyuţití daného zařízení. Desktopy umoţňují stále větší rozlišení. Větší monitory dosahují rozlišení okolo 1920 x 1080 pixelů (px). Předmět velikosti rozlišení pro webové stránky určené desktopům bylo diskutované téma. Nakonec se rozlišení ustálilo na 1024 x 768 px. Mobilní telefony však toto určené rozlišení rapidně sniţují. První chytré telefony se systémy ios, Android a WebOS měly rozlišení 320 x 480 pixelů. To znamenalo úbytek plochy, na které lze zobrazit obsah, obrázky, či reklamy, a to o 80 %. Nejčastější rozlišení mobilních telefonů přistupujících k internetu je i v dnešní době 320 x 480 px (viz obrázek 5) a u tabletů 768 x 1024 (viz obrázek 6). Díky tomu se vše včetně designu musí přizpůsobit mobilním zařízením nebo zcela vypustit. Na mobilních displejích je třeba zobrazovat pouze to nejpodstatnější ke spokojenosti návštěvníků stránek. Například na portálu Aukro je pro mobilní verzi nabízena pouze kategorie zboţí (viz Obrázek 7: Odlišná velikost desktopového webu7). Je proto vţdy nezbytné rozklíčovat, co nabídnout a co vyřadit. Není zde místo pro obsah pochybné hodnoty (9). 20

21 Obrázek 5: Rozlišení mobilních telefonů (Zdroj: Obrázek 6: Rozlišení tabletů (Zdroj: 21

22 Obrázek 7: Odlišná velikost desktopového webu (vlevo) a mobilního (vpravo) Připojení Lidé si jiţ na pouţívání mobilních zařízení přivykli a jsou zvyklí neustále je pouţívat na kaţdém kroku. Proto vyţadují nepřetrţitou konektivitu. Překáţkou můţe někdy být pokrytí. V České republice se s volně přístupnými Wi-Fi body setkáme jen občas. Při stahování webového obsahu jsou proto většinou pouţívány mobilní datové sítě. Stahování dat z mobilní sítě můţe být drahé (zejména v zahraničí) a připojení můţe být pomalé. Při pomalém připojení trvá načtení obsahu příliš dlouho a uţivatel nemusí být ochoten takovou dobu čekat. Na obrázku číslo 8 je demonstrován vztah mezi dobou načítání stránek a ztrátou uţivatelů. Čím déle se stránka načítá, tím více uţivatelů daná stránka ztrácí. Důsledkem této skutečnosti je opět potřeba poskytovat redukované mnoţství obsahu a to jak niţším mnoţstvím poloţek, tak i menší velikostí souborů (9). 22

23 Obrázek 8: Ztráta uţivatelů vztaţená k době načítání stránek (Zdroj: Funkce přejetí myši Vzhledem k tomu, ţe dotyková zařízení nemají myš, přicházejí o efekty spojené s pohybem myši. Ať uţ se jedná o různé JavaScriptové události spojené s chováním myši (onmouseover událost při přejetí ukazatele myši nad prvkem, onclick vyvolání události při kliknutí na prvek ) nebo o často pouţívanou pseudotřídu v CSS a:hover. Tou lze definovat pravidla pro chování odkazu při pohybu myši nad ním. Touto vlastností je aplikováno zvýraznění odkazů na stránce. Dotyková zařízení zvýraznění odkazů tímto způsobem neumoţňují (9) Vstup z klávesnice Zadávání informací z dotykových klávesnic (především u chytrých telefonů) je velmi pomalé a uţivatelé v psaní často chybují. Počet polí ve formulářích (například dopravní spojení, vyhledávání a objednávání zboţí), který je uţivatel nucen vyplnit by měl být proto minimalizován. Jelikoţ se ve formulářích často vyskytují překlepy, je otázkou, jak pojmout 23

24 jejich validaci. Vhodné je odhadnout, co se uţivatel snaţí najít a opravit jeho vstup nebo mu nabídnout alternativy (9) Nepřesné kliknutí Na dotykových zařízeních, která nepouţívají stylus, je klikání (dotek) nepřesný. Dotknout se prstem jednoho konkrétního místa je náročné. Obzvlášť problematické jsou stránky, které obsahují velké mnoţství odkazů vedle sebe nebo weby, kde jsou odkazy napsané malým písmem (9) Pomalý hardware Výkonost mobilních zařízení neustále roste, ale pořád jsou o mnoho pomalejší, neţli desktopy. Načítání obsahu s větším mnoţstvím JavaScriptu můţe být problém. Různé přechody mohou být sekané, coţ nevede k hezkému vizuálnímu efektu. Dalším problémem je, ţe zařízení nedokáţou podporovat nejnovější datové sítě a rychlost přenesených dat je u starších zařízení niţší (5) Relace Na mnoho webech se pouţívají tzv. sessions, neboli relace. To představuje navázání spojení. Uţivatelé mobilních zařízení jsou zvyklí přepnout telefon do reţimu spánku a k obsahu se vrátit později. Webový obsah při pouţívání session má pouze omezenou časovou platnost. Při následném probuzení zařízení jiţ relace pozbyde platnosti, obsah se stává neplatným, a proto je vyţadováno opětovné načtení stránky (10). 5.2 Výhody I přes vyjmenované nevýhody disponují mobilní zařízení mnoha výhodami. Chytré telefony umoţňují řadu způsobů, jak tato zařízení lokalizovat. Je moţné rozpoznat orientaci displeje (horizontální nebo vertikální) nebo určení světových stran. Tyto výhody lze skvěle vyuţít v nativních aplikacích. Dobrým příkladem můţe být aplikace Nearest Tube, která s vyuţitím orientace zařízení, detekce polohy a kamery zobrazuje na displeji nejbliţší stanice Londýnského metra. Prohlíţeče však zatím nedokáţí vyuţívat orientace zařízení a kameru. 24

25 Přesnost informace o pozici zařízení je lepší na mobilních telefonech, neţli na desktopech a noteboocích. Na desktopech lze určit na 99 % zemi, ze které se počítač připojil. Tato informace není zcela reálně vyuţitelná. Chytré telefony lze naopak detekovat mnoha způsoby. Telefony jsou připojeny k sítím operátora, případně jsou zapnutá Wi-Fi (zjišťuje se lokalizace přístupových bodů) nebo GPS. U telefonních sítí se přesnost lokalizace pohybuje mezi 100 aţ 1400 metrů v případě připojení k více BTS (Base Transceiver Station) vysílačům. U Wi-Fi je to 50 m a u GPS dokonce 10 m. To poskytuje mnohem detailnější informace oproti těm, které jsou zjistitelné o desktopech. Tato data umoţňují nabídnout uţivatelům telefonů zajímavý obsah zaloţený na místě, kde se uţivatel nachází (9). Cenná informace, s kterou lze dále pracovat, je místo, na kterém se vyuţívá mobilního internetu. Uţivateli stránek je moţné poskytnout specifický obsah podle místa vyhledávání. Například vyhledávač Google upřednostňuje data podle umístění. Na dotaz opravna kol jsou pod placenými odkazy zobrazeny pobočky poblíţ místa hledání. V tomto případě v Praze. Kromě odkazů zobrazí vyhledávač na okraji stránky mapu se zakreslenými opravnami (viz obrázek 9). Obrázek 9: Výsledky hledání vyhledávačem Google na dotaz opravna kol (Zdroj: 8&aq=t&rls=org.mozilla:cs:official&client=firefoxa&channel=sb&gfe_rd=cr&ei=349eU5zeA8OB_AbPnoHwDQ) 25

26 5.3 Místo používání mobilních telefonů Tvůrci webových stránek si musí nejprve uvědomit místa, kde jsou mobilní telefony vyuţívány. V první řadě si představili spěchajícího businessmana hledajícího informace na telefonu na ulici. Ve skutečnosti je však situace odlišná. Lidé přistupují z mobilních zařízení nejčastěji v těchto místech: 84 % doma 80 % během prostojů v průběhu dne 74 % při čekání ve frontách nebo na schůzky 69 % při nakupování 64 % v práci 62 % při sledování televize 47 % při dojíţdění v prostředcích dopravy Lze tedy říci, ţe mobilní zařízení se vyuţívají téměř všude. Zajímavý fakt je, ţe nejvíce jsou pouţívány doma, kde je moţnost nahradit mobilní zařízení jinými zařízeními. Z této informace vyplývá, ţe uţivatelé prostřednictvím mobilních telefonů přistupují k veškerému obsahu na webu (9). Z tohoto důvodu je třeba přizpůsobit mobilním zařízením veškerý obsah. 26

27 6. Mobilní prohlížeče U desktopů jsou nejvyuţívanějšími prohlíţeči Chrome, Firefox a Internet Explorer (viz příloha 2). U mobilních zařízení jsou v České republice nejpouţívanějšími operačními systémy Android a ios (viz obrázek 10). S tím souvisí i poměr vyuţívání mobilních prohlíţečů. Jelikoţ se uţivatelé spokojují s předinstalovaným prohlíţečem v mobilních zařízeních, jsou nejoblíbenější právě prohlíţeče nativní (viz obrázek 11). Obrázek 10: Nejčastější operační systémy telefonů v ČR (Zdroj: Aby ostatní prohlíţeče byly úspěšné, musí se prosadit na systémech Android a ios. Android (koupený firmou Google) není oproti ios od firmy Apple vyuţívaný pouze jedním výrobcem, takţe mu lze přikládat větší význam. Způsobeno je to také tím, ţe aplikace od Applu jsou dostupné pouze na AppStore, coţ je jediný oficiální zdroj aplikací. Apple do jisté míry vynucuje pouţívání svého prohlíţeče Safari a i po instalaci jiného prohlíţeče se odkazy otevírají v tomto prohlíţeči. Dalším důvodem rozšířenosti prohlíţeče Safari je loajalita zákazníků ke značce. I kdyţ je Android alternativním prohlíţečům otevřen, ze strany 27

28 uţivatelů není potřeba nativní prohlíţeč nahrazovat. Tento fakt ostatně kopíruje stav desktopových prohlíţečů. Internet Explorer je předinstalovaným prohlíţečem na platformě Windows a i přes jeho, v minulosti, dlouhodobé problémy zůstává na příčce třetího nejpouţívanějšího prohlíţeče (viz příloha 2). Obrázek 11: 9 nejpouţívanějších prohlíţečů v ČR na telefonech a tabletech (Zdroj: Úspěšnost jednotlivých prohlíţečů je spjata s různými strategiemi. Jednak výrobci chytrých telefonů uţivatelské rozhraní přizpůsobují a s tím souvisí i předinstalování jiného prohlíţeče. Například Samsung podporuje vývoj prohlíţeče na jádru Servo, na kterém funguje i Mozilla. Další moţností je silná marketingová strategie, která se však bude oproti firmě Google prosazovat těţko. Třetí moţností je vyuţít mobilní operátory. Mobilní operátoři prodávali na svých portálech tapety a vyzvánění. V dnešní době ale většina uţivatelů přistupuje raději ke Google Play. Prosazování prohlíţeče přes mobilní operátory zvolila Opera, která slibuje úsporu přenesených dat. To oceňují operátoři i zákazníci díky datovým limitům (11). 28

29 7. Mobilní web Při tvorbě webových stránek vyvstává otázka, zda je optimalizovat pro mobilní prohlíţeče. Kaţdý den se k internetu připojuje mnoho mobilních zařízení a tento fakt nelze ignorovat. Webové stránky jsou vytvářeny, testovány a optimalizovány na desktopech. Mobilní prohlíţeče jsou schopny interpretovat stránky bez předchozí úpravy. Jejich vzhled a funkce se však nemusí zobrazit korektně. Mobilní zařízení mají mnoho omezení, ať je to jejich velikost nebo hardware vybavení. Při prohlíţení internetových stránek prostřednictvím mobilního zařízení mají uţivatelé jiné nároky na vyhledávaný obsah na desktopu neţ na telefonu. Například na mobilních zařízeních titulky k filmu pravděpodobně nikdo hledat nebude. Při výběru restaurace je na desktopu vyhledávanější informace vzhled restaurace a jídelní lístek. Na mobilním zařízení bude důleţitější informace adresa a telefonní číslo pro rezervaci. Existují dvě základní moţnosti, jak webové stránky pro více zařízení realizovat. Jedná se o dva různé přístupy, ale zobrazený výsledek pro nejmenší mobilní zařízení, tedy telefon, můţe vypadat stejně. 1. Vytvoří se dva weby; jeden pro desktopy například na adrese priklad.cz a druhý na subdoméně většinou ve tvaru m.priklad.cz. Velmi často je při detekci mobilního prohlíţeče nabídnut i klasický vzhled, tedy styl pro desktopy. 2. Druhou moţností je responzivní webdesign prostřednictvím Media Quieries. Je zapotřebí vytvořit několik stylů, které budou pro různě velké obrazovky. Tyto styly jsou aplikovány, kdyţ nastanou dané podmínky. Nejčastěji jsou styly vázány k šířce prohlíţeče viewportu. Stránky, určené mobilním prohlíţečům, by neměly být zcela ochuzeny o prvky, na kterých je vystaven design webu. Prostý vzhled se změnou layoutu (rozmístění prvků na stránce) a odebrání poloţek návštěvníka stránek akorát zmate. Stránky by tedy měly být přehledné i pro člověka, který se běţně na daný web dostává pouze z desktopového prohlíţeče. Uţivatel si musí být jistý, kde se nachází (12). Následující kapitola je věnována novější metodě realizace stránek pro mobilní zařízení, tedy responzivnímu designu (9). 29

30 8. Responzivní web design Nejrychlejší a nejsnazší moţností, jak přizpůsobit web pro mobilní zařízení je responzivní web design (RWD). Není zde nutné předělávat celý web, ale stačí pouze změnit styl stránky. Prohlíţeči je nabídnut jeden styl, který vyhovuje různým typům zařízení s různým rozlišením obrazovky. Přes odlišnou velikost displejů se layout stránky přizpůsobí. RWD stojí na třech základních technikách: CSS3 Media Queries Plavoucí layout Plavoucí média a obrázky CSS3 přineslo novou funkci Media Queries. Tato funkce umoţňuje rozpoznat velikost displeje zařízení a lze tak různě velkým zařízením nabídnout odlišný styl. Při RWD je dále nutné aplikovat plavoucí layout, média a obrázky. V praxi je styl, který určuje layout stránky, zapisován procentuálně a ne absolutně. Kaţdému prvku stránky se zapíše jeho velikost v procentech. Procentní zápis umoţní přizpůsobení webové stránky různým velikostem. Při odlišné velikosti sloupců je potřeba změnit i velikosti obrázků. Tuto změnu umoţní CSS pravidla. Stejně tak, jako velikost sloupců, je nezbytné poskytnut různým velikostem displejů jiné rozměry obrázků, aby vyhovovaly přímo na míru. Prohlíţeč přeskládá layout webu při určité šířce prohlíţeče. Není však vhodné vytvářet styly pouze pro desktop, tablet a telefon. Při změně stylu stránka poskočí, změna je náhlá a to není nejšťastnější způsob řešení. Správnou cestou je naopak vytvořit více stylů, které zamezí skokové změně vzhledu webu (viz obrázek 12). Styly by se měly vytvářet tehdy, kdy šířka okna prohlíţeče nestačí a musí se zvolit jiné rozloţení prvků na stránce. Nevýhodou Media Quieries je nulová podpora prohlíţečů Internet Explorer verze starší neţ 9. Tento nedostatek lze řešit pomocí dodatečných JavaScriptů (9). 30

31 Obrázek 12: Postupná změna vzhledu 8.1 Testovací stránka Princip responzivního webu je vysvětlen na následujících příkladech. Pro ukázku byla vytvořena jednoduchá webová stránka pouze se základními prvky. Na této stránce ještě responzivní design není, bude postupně vytvořen. Layout je znázorněn zde: <html> <head> </head> <body> <header> <nav> </nav> </header> <div id="container-all"> <article> </article> <aside> </aside> <div class="end"></div> </div> <!-- END conteiner-all --> <footer> 31

32 </footer> </body> </html> Stránka se skládá z hlavičky, patičky a těla, ve kterém je hlavní sloupec pro text a úzký boční sloupec. Ve článku se nachází obrázek a video se stejnými rozměry jako má text. Tato stránka se zobrazuje ve všech desktopových prohlíţečích stejně (viz tabulka 3). Prohlíţeč Firefox IE 7 IE 8 IE 9 IE 11 Opera 20 Správné zobrazení Tabulka 3: Zobrazení testovacích stránek Safari Ačkoliv se web vykreslí v desktopových prohlíţečích zcela správně, v mobilních zařízeních, zde konkrétně v prohlíţeči Opera mini, je situace zcela odlišná. Stránka je zobrazena špatně. Porovnání těchto zobrazení je zachyceno na obrázku (viz obrázek 13). Obrázek 13: Stránka v desktopu (vlevo) a v telefonu (vpravo) Aplikace responzivního webdesignu v následujících kapitolách odstraní nedostatky a zajistí správné zobrazení i v telefonu. 32

33 8.2 CSS 3 Media Quieries Media Quieries je způsob, jak lze pomocí CSS 3 zjistit jaké zobrazovací schopnosti zařízení má a poskytnout styl, který je pro dané zařízení vhodný. Media Quieries lze zapisovat přímo do hlavičky <typ media> {/* specifický CSS styl */} odkázat na CSS soubor <link rel= stylesheet href= styl.css media= typ media > zapsat vlastnost pro konkrétní element do CSS souboru. Pravidlo bude opět pouţito v případě, ţe bude splněna podmínka pro načtení (podmínky) { article { width: auto; } } Za se zapíše, o jaký typ zařízení se jedná (13). Moţnými atributy jsou: all pro všechny přístroje braille pro zařízení s moţností vyjádření v Braillově písmu embossed pro tiskárny, které tisknou v Braillově písmu hanheld určeno pro zařízení do ruky s malou obrazovkou print styl určený k tisku nebo k prohlídnutí před tiskem projection výstup určený projektorům screen na barevné monitory speech pro hlasové syntezátory tty zařízení s definovanou (pevně) mříţkou, např. textový terminál tv pro výstup na televizory, které mají nízké rozlišení a špatnou podporu scrolování. 33

34 8.2.1 Výška a šířka prohlížeče a zařízení dokáţe nastavit minimální a maximální výšku a šířku. To lze výborně uplatnit při tvorbě stránek pro různá zařízení. Například pro velikost okna prohlíţeče s maximální šířkou 480 px (nejedná se o velikost displeje) se zápis zapíše (min-width: 480px) { /*zde se zapíší požadované hodnoty */ } Pro detekci šířky displeje obrazovky se přidá pouze slovo device (max-device-width: 480px) { /*zde se zapíší požadované hodnoty */ } Pro různě velké zobrazovací zařízení je tak moţné napsat specifické hodnoty (max-width: 480px) {/*zde se zapíší požadované hodnoty (min-width: 480px) {/*zde se zapíší požadované hodnoty (max-height: 480px) {/*zde se zapíší požadované hodnoty */} Operátory Pro lepší přizpůsobení stylů lze pouţít i logické operátory. Operátory, které lze pouţít jsou and a or nebo lze oddělovat hodnoty čárkou. Operátor not neguje další zápis za tímto operátorem print and (max-height: 480px) {/* screen, (min-width: 800px) {/* not screen{/* hodnoty*/} 34

35 8.2.3 Poměr stran Poměr stran se definuje pomocí device-aspect-ratio, kdy první hodnota určuje šířku a druhá výšku screen and (device-aspect-ratio: 16/9) {} Only K poskytnutí stylu pouze specifickému zařízení slouţí slovo only, které odfiltruje nechtěná zařízení. Takový zápis starší prohlíţeče při nalezení slova only přeskočí only print{} Barevnost Atribut color určuje počet bitů na barvu výstupního zařízení. Pro nebarevné zařízení je hodnota nula. Hodnoty můţou být pouze kladné. Následující zápis platí pouze pro barevné zařízení all and (color) { all and (min-color: 1) { } Rozlišení Resolution slouţí k určení rozlišení. Opět lze pouţít maximální a minimální rozlišení. Na příkladu je styl aplikován na zařízení s minimálním rozlišením 200 bodů na jeden palec print and (min-resolution:200dpi) { } Orientace zařízení Zařízení je orientováno na výšku, kdyţ hodnota výšky je větší nebo rovna hodnoty šířky. Jinak je orientace na šířku (13). 35

36 @media all and (orientation:landscape) { all and (orientation:portrait) { } 8.3 Podpora Media Quieries Podpora Media Quieries je poměrně dobrá. Je podporována širokou škálou moderních prohlíţečů (viz tabulka 4). Problém nastává se stále často pouţívaným prohlíţečem Internet Explorer verze 8, který Media Quieris nepodporuje a je proto o responzivní web ochuzen. Kvůli chybějící podpoře je vhodné uvést vlastní styl pomocí podmíněných komentářů nebo aplikací JavaScriptu. Desktop Chrome 1.0 Firefox 1.0 IE 9.0 Opera 9.2 Safari 1.3 Mobil Android 1.0 Firefox IE mobile Opera Safari mobile mobile 9.0 mobile 3.1 Tabulka 4: Podpora Media Quieries v prohlíţečích (Zdroj: Přidání mobilního stylu Do testovací stránky se zapíše Media Quieries s odkazem na poţadovaný mobilní styl. Do hlavičky stránky pod ostatní styly bude přidán zápis: <link rel="stylesheet" href="style/mobile.css" media="screen and (max-width: 320px)"> Styl pro mobilní zařízení Hlavní sloupec stránky má velikost 800 px. Pro mobilní zařízení je třeba jej zmenšit na poţadovaných 320 px. Veškeré hodnoty, které je potřeba změnit budou vyděleny příslušným poměrem (v tomto případě 800/320 = 2,5). Prvky na stránce je tedy potřeba vydělit číslem 2,5. 36

37 Dále se upraví layout rozmístění prvků. Na stránce se nachází boční sloupec, který obsahuje významově méně důleţitý text. Tento text bude umístěn do stejně širokého sloupce, jako je sloupec s hlavním obsahem, a jeho místo bude pod hlavním obsahem (viz obrázek 14). Obrázek 14: Přizpůsobení layoutu webové stránky z desktopového zařízení (levé schéma) pro mobilní zařízení (pravé schéma) 8.5 Plovoucí layout Nynější design s pouţitím se správně zobrazí pouze na zařízeních s šířkou displeje s rozměrem přesně 320 px. Na ostatních zařízeních nebudou stránky vypadat tak, jak by měly. Plovoucí layout umoţňuje adaptovat styl i na jiné rozměry. Místo přiřazení prvkům přesný rozměr zadaný v pixelech, bude jejich velikost definována proporčně, v procentech. Velikost oken prohlíţečů není exaktně určená. Kdyţ je okno prohlíţeče větší, neţli layout stránky, její design nemusí působit tak, jak bylo původně zamýšleno. Na jednom okraji vznikne prázdné místo. Tento problém lze vyřešit zarovnáním stránky na střed. To však není moţné v opačném případě, kdy je webová stránka prohlíţena na niţším rozlišení. V tomto případě musí uţivatel pouţít posuvník pro horizontální pohyb po stránce (viz obrázek 15). Tím ztrácí přehled o tom, kde se na stránce nachází. O designu webu uţ nemůţe být ani řeč. Proto je při tvorbě plovoucího layoutu třeba přiřadit kaţdému prvku místo přesných rozměrů v pixelech odpovídající hodnotu v procentech. 37

38 Obrázek 15: Stránka se nevejde do okna prohlíţeče, uţivatel musí pouţívat posuvník Plovoucí obrázky Při aplikaci plovoucího vzhledu je třeba upravit i obrázky. Měly by být uloţeny ve stejné velikosti, jako je velikost stylu pro největší zobrazení na webu. Pro aplikaci mobilního vzhledu je třeba jim zadat rozměry v procentech. Referenčním prvkem není hlavní sloupec layoutu, ale div (blokový element, pomocí kterého lze nastylovat stránku) ve kterém je obrázek umístěn. V tomto ukázkovém případě je zanořen v elementu article. Obrázek zaujímá 100 % šířky tohoto tagu, takţe zápis v příslušném CSS souboru bude vypadat takto: article img { } width: 100%; Stejně tak je potřeba naloţit i s jinými objekty (například s videem). U obrázků vyvstává jeden problém a to ten, ţe stejně velký obrázek je poskytován všem stylům. To znamená, ţe pokud pro velký styl bude mít obrázek například 2 MB, tak pro mobilní telefon, kde bude zobrazovaný obrázek 10x menší, bude mít opět zdrojový obrázek velikost 2 MB. Různým zařízením je proto třeba poskytnout různě velké obrázky. 38

39 8.6 Malé displeje s velkým rozlišením S vývojem nových mobilních zařízení s lepšími displeji vznikl jeden nepříjemný problém: na malém displeji s velkým počtem pixelů je obsah sice ostrý, ale malý. Například ipad Mini má stejný počet pixelů jako původní ipad, který má rozlišení 768 na 1024 px, ale obrazovka ipadu Mini je o 40 % menší. Tento stav způsobí, ţe veškerý obsah je zobrazován na displeji drobně. Takto se na zařízení zobrazují i stránky, které mají napsaný styl přímo na míru mobilním zařízením. Při porovnání dvou zařízení s velikostí displeje dva palce a rozlišením prvního zařízení 640 x 960 a druhého 320 x 480 mají obě stejně velký displej, ale první zařízení má 4x více pixelů. Z toho vyplývá, ţe na jednom zařízení je více pixelů, které budou proto menší. Menší pixely povedou k menšímu obsahu. Tento obsah bude krásně ostrý, ale jeho čitelnost bude horší vše bude zobrazeno menší (14) Meta tag viewport Problém špatného zobrazení na mobilní zařízení řešil Apple virtuálním viewportem. V případě, ţe měl prohlíţeč zpracovat plnohodnotný web, byly stránky nejprve rendrovány (vykresleny) v plné velikosti na přednastavenou hodnotu 960 px. Po tomto kroku byly stránky zmenšeny na velikost displeje. Vzhledem k tomu, ţe stránky byly rendrovány jako celek, mohl uţivatel libovolné oblasti webu bez problému zvětšit a stránkou posouvat. Společnost Apple se nespokojila s tímto řešením a vymyslela nový meta tag viewport. Ten sděluje prohlíţeči, jak zvětšit a překreslit obsah tak, aby měl vzhledem k rozměrům stránky správnou velikost. Stejně jako jiný meta tag se viewport zapisuje do hlavičky stránky a ovlivňuje velikost zobrazené stránky. Weby, které tento tag nepouţívají, budou prohlíţeči rendrovány na šířku 980 px. Pouţití viewportu umoţňuje lépe definovat, jak se stránky uţivatelům zobrazí. Zápis width=devicewidth znamená, ţe šířka bude vybrána taková, která je pro daný displej nejvhodnější. Devicewidth se tedy váţe přímo k fyzickým rozměrům displeje. Tento tag byl rychle přijat výrobci prohlíţečů a v současnosti je skoro všemi prohlíţeči podporován. Jakou hodnotu viewportu bude zařízení mít, záleţí tedy na výrobci. Například na zmíněném ipodu Mini bude webová stránka zobrazena o několik desítek procent menší, neţ na obdobných zařízeních, protoţe Apple přiřadil ipodu Mini 768 pixelů pro viewport (15). Velikost textu by neměla být zadávána v absolutních jednotkách (px, pt, mm atd.) ale v procentech nebo em jednotkách. Takto zadané velikosti můţe uţivatel sám měnit. 39

40 V některých místech webu (například v menu), kde by velké písmo mohlo rozhodit celý design webu je moţné absolutní jednotky ponechat. Většina tvůrců webu pouţívá relativní velikost textu. Základní text je ve většině moderních prohlíţečích určen jako 16 px. Tedy při přiřazení textu 100 %, bude velikost 1em odpovídat 16 px. Za velikost textu opět odpovídá viewport. Ne vţdy je však poměr jednotek em a px 1:16. Například prohlíţeč v Kindle Touch pouţívá poměr 1:20. Meta značka viewport se zapisuje: <meta name= viewport content= width=device-width, initial-scale=1 / > Atribut name značí jméno tagu, tedy ţe se jedná o viewport. Width můţe mít atribut device-width, kdy se rozměr přizpůsobí skutečné šířce displeje zařízení. Druhou moţností je zadání hodnoty v pixelech. Hodnota se zadává bez jednotek, tedy: content= width=480 <! pro šířku 480 pixelů --> Initial-scale vyjadřuje měřítko, ve kterém se web zobrazí (16). Měřítko 1:1 je nejvhodnějším a nejpouţívanějším zápisem a zapíše se jako: initial-scale=1 Větší hodnota, neţli jedna znamená zvětšení, menší hodnota zmenšení. Zakazování zvětšování webu by mělo být pouţito po řádném zdůvodnění. Do viewportu lze zapsat hodnotu maximálního moţného zvětšení: maximum-scale=4 nebo hodnotu minimálního zvětšení (zmenšení): minimum-scale=0.5 40

41 8.6.2 Kvalitnější obrázky V roce 2010 představil Apple iphone 4. Toto mobilní zařízení přineslo do plochy s úhlopříčkou 3,5 palce rozlišení 640 x 960 px. Hustota pixelů u této obrazovky je 326 PPI (počet pixelů na jeden palec). Takový displej, kde hustota pixelů dosahuje velké hustoty, je označován pod pojmem Retina displej. Pixely v takto jemných displejích uţ lidské oko není schopno rozeznat a jedná se o displeje 1. třídy. Aby mohla firma Apple toto označení přiřadit i displejům s menší hustotou, je vzatá v úvahu i vzdálenost zraku od přístroje (17). Takovéto displeje je moţné rozlišit zápisem, který detekuje větší hustotou only screen and (-webkit-min-device-pixel-ratio:2) {/* styl pro iphone*/} Zápis výše platí konkrétně pro prohlíţeče pracující na jádru webkit. Pro mozzilu nebo operu je zápis obdobný. Při rozlišení zařízení s větší hustotou pixelů (pixel-density-ratio > 1) lze nabídnout zařízením jiné (kvalitnější) obrázky. Tyto obrázky budou v zařízení vypadat ostřeji. Test displeje zařízení lze pořídit pouze návštěvou na Pro rychlou aplikaci je moţné vyuţít předpřipravený JavaScript, který sám detekuje zařízení, které splňuje podmínky pro kvalitnější obrázky. Script (retina.js) je dostupný na adrese a stačí jej pouze vloţit do stránek. Dále je nutné připravit pro web stejné obrázky větší kvality (rozlišení). JavaScript poté při detekci zařízení s retinovým displejem poskytne kvalitnější obrázky. Je otázkou, jaké obrázky upravovat a jaké ne. Je pravda, ţe obrázky vypadají na retinových displejích mnohem lépe, ale zároveň se jedná o zařízení, která přistupují k webu často přes datové sítě s omezenou přenosovou rychlostí (18). 8.7 Mobile First Metoda Mobile First je zaloţena na principu responzivního webu a zaslouţil se o ní Luke Wroblewski. Tato metoda je vhodná pro aplikace a webové stránky určené mobilním zařízením a má opačný postup vývoje. Cílem není přepracovat webové stránky do podoby, která by se přizpůsobovala změnám vzhledu. Nejprve je vytvořena aplikace či stránka pro mobilní zařízení a postupně je přidávána funkcionalita. Protoţe se tato metoda nejprve soustředí na mobilní zařízení a postupně jsou přidávány další prvky, přináší jedno podstatné 41

42 vylepšení. Oproti druhému přístupu zde odpadá problém datové náročnosti obrázků a kódu. Aplikace či stránka je ze začátku plně optimalizovaná pro mobilní zařízení. Při postupném přidání funkcionality pro větší zobrazovací zařízení roste datová zátěţ, ale růst je úměrný. Nejedná se pouze o způsob tvorby webu, ale i o změnu uvaţování při vývoji webového obsahu. Metoda řeší problémy na základní úrovni a její aplikace umoţní vytvářet sviţný web pomocí komplexní architektury (9). 42

43 9. Zrychlení načítání stránek Rychle fungující webové stránky kaţdého návštěvníka potěší. Na rychlost načtení obsahu by měl být kladen důraz. Naopak pomalé načítání můţe způsobit i odchod uţivatele z dané stránky a třeba i ke konkurenci. Někteří uţivatelé mají pomalé připojení k internetu nebo přistupují k internetu pomocí mobilního internetu. Pro tyto potenciální návštěvníky je rychlost stránek zásadní. Při aplikaci řešení mobilních stránek nebo responzivního webu by měla být část práce věnována analýze rychlosti načítání. Při aplikaci řešení pro zrychlení webu lze dosáhnout zlepšení o desítky procent a není důvod, proč neposkytnout návštěvníkovi rychlý web. Rychlost stránek lze zajistit několika způsoby: Minimalizace http poţadavků Sníţení velikosti externích souborů Sníţení velikosti dat stahovaných ze serveru Moţností, jak zrychlit stránky je více, ale jiţ aplikace těchto základních postupů povede k výraznému zlepšení. Další moţností, jak vylepšit dobu načítání je analýza a optimalizace samotného zdrojového kódu (19). 9.1 Minimalizace http požadavků a snížení velikosti externích souborů Minimalizace http poţadavků je jedním z nejefektivnějších způsobů, jak zrychlit načítání webu. Jedná se o minimalizaci počtu dat stahovaných ze serveru. Především je to: Sjednocení načítaných externích souborů Vyuţít moţností cáchování (ukládání do mezipaměti) (19) Sjednocení externích souborů Na stránce se často nachází řada externích souborů. Zejména jde o řadu stylů (souborů CSS) nebo JavaScriptu. Kaţdý externí soubor musí prohlíţeč jeden po druhém zpracovat a následně aplikovat jeho kód. Řešením je tyto soubory sloučit do jednoho. Spojeny by měly 43

44 být všechny externí soubory, tedy jak CSS, tak JavaScript. Druhým krokem je sníţení přenášeného objemu dat. To zajistí smazání nepotřebných bílých znaků v podobě mezer či tabulátorů. Tento postup přináší jeden zásadní problém: při sloučení souborů do jednoho a odmazání mezer vznikne jeden nepřehledný soubor. Pro další úpravu či kompletní re-design stránek není tento stav zcela vhodný. Přes tuto nepříjemnost ušetří popsaný postup přenášená data a to povede k rychlejšímu vykreslení v prohlíţeči. HTML kód nebývá často optimalizován a bývá uţíván nadpočet znaků. Problém nepřehlednosti kódu má dvě řešení: Nechat původní přehledný kód na místním disku a na web nahrát pouze sloučený soubor. K tomu lze pouţít nástroj CSS Compressor, který dokáţe sám kód sloučit. Pomocí PHP kódu sjednotit JavaScript a CSS soubory přímo na serveru. Metoda odstranění mezer a tabulátorů se nazývá minifikace. Další moţností je obfuskace. Její princip spočívá v převedení zápisu na co nejjednodušší zápis pomocí zástupných znaků. Tato metoda však můţe vytvářet chyby, které lze jen stěţí odhalit. JavaScript můţe ovlivňovat chování i vzhled stránky. Po staţení JavaScriptu je veškeré další stahování pozastaveno, dokud se JavaScript nezpracuje. Tím, ţe se stahování pozastaví, se mimo jiné pozastaví i vykreslování a vzhled stránky, který je definován v CSS souboru. Nejhorší moţností je prokládat CSS JavaScriptem. Rozdíl spočívá jak v načtení webové stránky, tak i ve zpracování souborů. Stejné typy souborů by měly být hned za sebou. Rozdíl v rychlosti načtení je i ve způsobu vloţení souboru do stránky. Styl lze do stránky vloţit různými způsoby: Značkou link V prvním případě import způsobí, ţe načítání bude pozastaveno do doby, neţ bude soubor zpracován. Prohlíţeč neví, co se pod skrývá. Druhý příklad zápisu je rychlejší (19) Ukládání do mezipaměti Cachování stránky, neboli ukládání do mezipaměti je dalším způsobem, jak zrychlit načítání stránek. Při opakované návštěvě stránky se web načte rychleji, neţli při návštěvě 44

45 první. Data jsou uloţena do mezipaměti prohlíţeče a při další návštěvě se uţ nestahují. Stáhne se pouze neuloţený a aktualizovaný obsah. Uloţení do mezipaměti sníţí celkový objem dat, který je potřeba ze serveru přenést. Základně jsou uchovávána data dočasně, pouze v rámci jedné relace. Musí se nastavit hlavičky poţadavků. Hlavička obsahuje několik poţadavků: Cache-Control If-None-Mach If-Modified-Since Tyto parametry server vyhodnotí a odešle odezvu hlavičky: Cache-Control Expires Etag V odezvě Cache-Control se nacházejí informace, které definují, jak se souborem, který je uloţen v mezipaměti, naloţit: Max-age je doba platnosti. Po vypršení doby platnosti je vyslán poţadavek na opětovné stáhnutí. Public data budou přístupná, i kdyţ budou data zabezpečena. Private je opakem Public, data se neukládají. No-cache platnost dat se ověřuje při kaţdém vytvoření poţadavku. Před staţením se ověřuje platnost. Must-revalidate ověřují se nastavená pravidla při kaţdém načtení stránky. Proxy-revalidate je analogie při pouţití proxy cache. Pokud budou splněna všechna pravidla poţadovaná hlavičkami, odpověď bude 304 Not Modified a následně se data načtou z mezipaměti. V opačném případě bude soubor znovu stáhnut ze serveru. Odpověď bude: 300 OK. Expires udává, kdy vyprší platnost a etag je volitelná informace, která sděluje, zda byla poloţka na dané URL adrese změněna. Cachování stránek lze popsat v několika krocích na příkladu. První návštěva: 45

46 1. Uţivatel zadá poţadavek na první návštěvu stránky. 2. Na serveru je nastavené cachování, ale jedná se o první návštěvu, takţe hlavičky s poţadavky nemají co porovnávat. 3. Ze serveru jsou stáhnuty soubory a hlavičky vrátí Expire 200 OK. 4. Soubory se u uţivatele uloţí do mezipaměti. Ve chvíli, kdy se jedná o první návštěvu, nejsou ještě uloţena v mezipaměti ţádná data. Data se tedy stáhnou do mezipaměti a při další návštěvě bude načtení stránek rychlejší. Následná návštěva: 1. Uţivatel zadá poţadavek na první návštěvu stránky. 2. Ověří se platnost souborů. 3. Server odpoví 304 Not Modified. 4. Soubory se u uţivatele načtou z mezipaměti. Aby vše řádně fungovalo, je potřeba správně nastavit webový server (19). 9.2 Snížení velikosti dat stahovaných ze serveru Doba čekání na zobrazení stránky závisí na době, za kterou prohlíţeč stáhne data ze serveru. Sníţením velikosti dat se dosáhne kratší doby načítání stránek. Moţnosti, jak zmenšit velikost potřebných dat jsou: Komprimace Optimalizace obrázků (19) Komprese dat Protokol http 1.1 umoţňuje přenos komprimovaných dat. Tím se sníţí objem dat, který je potřeba přenést a tím se zvýší rychlost načtení webu. Objem dat se sníţí i o desítky kb. Opět je nutné správně nakonfigurovat webový server. Problém nastane pouze v případě, ţe na web přijde uţivatel prostřednictvím staršího prohlíţeče, který nepodporuje protokol http 1.1 (19). 46

47 Téměř kaţdá značka v HTML souboru je párová to činí dokument robustnějším. Řešením je dokument zazipovat. Tím lze ušetřit značné mnoţství místa. Funkce komprese dat funguje takto: 1) Prohlíţeč zadá poţadavek na načtení stránky GET /index.html http/1.1. V hlavičkách prohlíţeč zasílá serveru informaci o tom, jestli zvládne přijmout zabalené soubory kódem: Accept-Encoding: gzip, deflate (gzip a feflate jsou dva kompresní formáty). 2) Webový server vyhledá soubor index.html. 3) Webový server zazipuje soubor a odpoví prohlíţeči http/1.x 200 OK Contentencoding:gzip <compressed file> (jedná se o zazipovaný soubor pomocí GZIP). 4) Prohlíţeč rozbalí a následně zobrazí soubor. Rozdíl je ve značném zmenšení přenášených souborů. Menší velikost souboru znamená rychlejší načtení a komfortnější prohlíţení stránek. V hlavičce prohlíţeče je zaslána informace, ţe prohlíţeč kompresní formáty podporuje. Jestli bude zaslán komprimovaný soubor, závisí jiţ na webovém serveru. Pokud bude soubor komprimovaný, zašle server prohlíţeči informaci, ţe se jedná o zabalený soubor. Pro správnou funkci je třeba nastavit správně webový server. Pro server Apache se nejedná sloţitý postup. Komprese se aktivuje zápisem do souboru.htaccess: AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/javascript Nebo zápisem: <files *.html> SetOutputFilter DEFLATE </files> Další moţností je aktivovat kompresi pomocí PHP zápisu před značku html. <?php if (substr_count($_server['http_accept_encoding'], gzip )) ob_start( ob_gzhandler ); else ob_start();?> 47

48 Apache umoţňuje dvě moţnosti komprimace: mod_deflate jednodušší na nastavení mod_gzip nabízí více moţností komprese (20) Optimalizace obrázků Komprese dat se obrázků výrazně netýká, ty je třeba optimalizovat samostatně. Obrázky zaujímají ve webové prezentaci vysoký objem dat. Nejčastějšími formáty pro rastrovou grafiku jsou PNG, JPG, JPEG a GIF. Kaţdý z těchto formátů má své specifické vlastnosti a hodí se k něčemu jinému. GIF pouţívá se především k jednoduchým animacím, nejvyšší barevná hloubka je 8 bitů 256 barev. Formát pouţívá bezztrátovou kompresi. PNG největší předností tohoto formátu je průhlednost. Barevná hloubka je aţ 24 bitů a 8 bitů průhlednost. JPEG, JPG formát určen pro fotografie na základě ztrátové komprese. Při nízké velikosti souboru lze dosáhnout poměrně kvalitní fotografie. Tento formát také obsahuje meta data o obrázku, jako jsou informace o fotoaparátu, závěrka a podobně. Kaţdý z formátů má své vyuţití a stejný obrázek bude mít v různých formátech jinou velikost. Základem je tedy zvolit správný formát. Druhým krokem je obrázek optimalizovat. Obrázky musí být uloţeny správným způsobem. U formátu JPG je třeba zvolit správnou míru komprese. Cílem je, aby u obrázku nebylo téměř moţné pozorovat změnu kvality při sníţení objemu dat. Samozřejmostí je obrázek umístěný na serveru ve správném rozměru. Další moţností, jak zefektivnit načítání stránek spočívá v technice zvané CSS sprites. Jedná se o metodu efektivnějšího načítání obrázků. Obrázky s niţší informační hodnotou se nenačítají postupně, ale v podobě jednoho velkého obrázku. Prohlíţeč si přitom na tyto obrázky vyhradí příslušné místo na stránce. CSS spites není náročné aplikovat. Kaţdé načtení obrázku znamená i další http poţadavek. Místo několika obrázků se načte jeden velký obrázek, který bude sloţen z několika malých (viz obrázek 16). Obrázky stačí poté nadefinovat v CSS stylu posunutím pozadí (19). 48

49 Obrázek 16: 4 ikony (obrázky) umístěné v jednom souboru Tuto techniku lze nejlépe demonstrovat na příkladu: Cílem je zapsat seznam 4 prvků s různými odráţkami tvořenými obrázky. <ul> <li class="prvni">první hodnota</li> <li class="druha">druhá hodnota </li> <li class="treti">třetí hodnota </li> <li class="ctvrta">čtvrtá hodnota </li> </ul> Pokud by byl kaţdému prvku seznamu přiřazen jiný obrázek, byl by pro kaţdou třídu kaţdého obrázku v CSS souboru přiřazen jiný zdroj obrázku. Obrázek bude sloţen ze čtyř různých obrázků (ve tvaru čtverce a velikosti 10 px) a společně budou tvořit čtverec. Zápis v CSS souboru bude vypadat takto: li{background: url("img.png"); float: left; width: 10px; height: 10px;} li.prvni { background-position: 0-10px; } li.druha { background-position: -10px -10px; } li.treti { background-position: 0 0; } li.ctvrta { background-position: -10px 0; } 49

50 10. Mobilní SEO Mobilní SEO (Search Engine Optimalization) je specifickou kategorií optimalizace stránek pro internetové vyhledávače. Otázkou je, jak by měl mobilní web ve vztahu k SEO vypadat. Web je umístěn buď na jiné URL adrese (většinou subdoméně například m.nazevdomeny.cz) nebo vlastní stejnou adresu a jedná se o web s responzivním designem. Důvodů, proč vytvářet responzivní stránky je několik: Stejná adresa je lepší pro sdílení obsahu i pro zapamatování. Pro mobilní web na jiné URL by měla být provedena výstavba odkazů. Stejná adresa je snadnější pro indexaci. Mobilní web na separátní adrese má duplicitní obsah. Vyhledávače chápou mobilní web na subdoméně jako duplicitu. SEO mobilního webu se v zásadě neliší od SEO klasických stránek. Je třeba sledovat mobilní uţivatele a analyzovat jejich chování samostatně, mimo klasické stránky. Mobilní návštěvníci mají jiné chování. Nejčastěji vyhledávají: Krátké hledané výrazy Informace o polohách entit Uţívání našeptávačů (21) Požadavky separátního webu I kdyţ se SEO mobilní verze tolik neliší, měl by separátní web splňovat některé speciální poţadavky: Kanonizaci mobilní web by měl být kanonizován k standardní verzi stránek <link rel="canonical" href=" Alternaci standardní web by měl odkazovat mobilní zařízení na mobilní verzi stránek <link rel="alternate" media="only screen and (max-width: 320px)" href=" nazevdomeny.cz/ " > 50

51 Přesměrování na správnou stránku. Je potřeba, aby příchozí návštěvníci byli přesměrováni na odpovídající stránku a ne na úvodní stránku mobilní domény. Telefonní číslo a hledání. Na mobilních stránkách 61 % uţivatelů hledá telefonní kontakt a poté volá. Není zbytné poskytnout přímo prvek, který na dané číslo začne samo volat. 51

52 11. Úprava stránek na responzivní design Responzivní design byl aplikován na stránky (viz obrázek 17). Nejdříve byla provedena kontrola kódu a drobná úprava designu. Po těchto krocích bylo přikročeno k aplikaci responzivního vzhledu na současné stránky. Stránka má poměrně standartní vzhled a její rozměr na šířku činí 1000 px. V levém horním okraji se nachází logo, které odkazuje na hlavní stránku. V hlavičce stránky je spuštěna prezentace obrázků, které se mění pomocí JavaScriptu. Pod těmito obrázky je umístěna navigace stránek. Hlavní část s obsahovou částí je rozdělena na levý sloupec a větší, hlavní část s obsahem. Pod těmito sloupci je patička, která obsahuje pouze copyright. Stránka obsahuje značky z jazyka HTML 5. verze: article článek, hlavní obsahové sdělení, asside boční panel pro reklamy, kontakty, header hlavička stránky, kde je umístěno logo, nav navigace, footer patička s copyrightem. Obrázek 17: Vzhled stránek 52

53 11.1 Kontrola HTML Kontrola chyb HTML kódu byla provedena pomocí HTML validátoru W3C konsorcia na stránkách Vloţením adresy webových stránek validátor analyzuje chyby v kódu. V HTML dokumentu byly najity 3 chyby: 1. Atribut name je zastaralý 2. Neexistující mezera mezi atributy 3. Vynechaný atribut alt u obrázku Chyb tedy nebylo mnoho a všechny byly snadno opravitelné. První chyba byla v atributu u měnících se obrázků, kde byl pouţit zastaralý atribut name. Tento atribut byl nahrazen za id. Alt slouţí k popisům obrázků. Jedná se důleţitý údaj pro vyhledávače při indexaci obrázků i celých stránek. Ve chvíli, kdy atribut alt nebude uváděn, je stránka ochuzena o kladné body při indexaci stránky Kontrola stylu Validace stylu dokumentu byla provedena opět u W3C. Definovaný styl soubor CSS je validní aţ na některé prvky, které byly zavedeny aţ v CSS 3. Tyto prvky ještě neprošly schválením specifikace, většinou jsou uváděny s prefixem. Dalším pochybením bylo, ţe velikost textu byla uváděna absolutně v pixelech a ne procentně. Takto si text uţivatelé nemohli zvětšit. Zcela zbytečně jsou tak ochuzeni o tuto funkci. Text byl tedy převeden se stejnými velikostmi do procentuálního tvaru Responzivní design Viewport Na stránku byl nejprve aplikován meta tag viewport, který je zapsán v hlavičce stránky: <meta name="viewport" content="width=device-width, initial-scale=1.0"> Tato značka je velmi důleţitá. Sděluje stránce, v jakém rozlišení (velikosti) je poţadováno její zobrazení. Stránka vypadá v různých velikostech podobně, kdyţ obsahuje 53

54 styly pro různé úrovně rozlišení. Pokud jsou různé úrovně zobrazení optimalizovány, je prakticky jedno, v jaké velikosti bude stránka zobrazena. Kdyby se stránka na mobilní zařízení načetla v plném rozlišení, tak by byla nejprve načtena do paměti mobilního zařízení a poté celá vykreslena. Uţivatel by mohl poté přibliţovat stránku, ale vzhled vytvořený na míru mobilnímu webu by nebyl vůbec potřeba. Zápis width=device-width určuje, ţe se stránka načte ve stylu, který je pro dané zařízení (displej) nejvhodnější. Stránce bude poskytnuta informace o velikosti připojovaného zařízení a načte správný styl, který se přizpůsobí na míru rozměrům zařízení díky procentuálnímu zápisu hodnot. Další atribut initial-scale=1.0 určuje stupeň přiblíţení stránky. Hodnota 1.0 nastavuje hodnotu přiblíţení na základní hodnotu přiblíţení je tedy nulové, stránka není přiblíţena a ani oddálena RWD pro větší zařízení Sloupec, ve kterém je umístěna celá stránka má rozměr 1000 px. Základní styl byl ponechán a při zmenšení stránky na menší rozměr, neţ oněch 1000 px, je načten styl normal.css. Na tento styl je odkázáno v hlavičce HTML souboru takto: <link rel="stylesheet" href="style/normal.css" media="screen and (max-width: 1000px)"> Proporce stránky jsou ponechány a jsou zapsány pouze hodnoty, které byly pozměněny. Snadnější by bylo celý styl zkopírovat a pouze některé hodnoty přepsat. Kvůli přehlednější změně vzhledu se však zapisují pouze hodnoty, které je třeba změnit. Při případném redesignu vzhledu dojde v optimálním případě ke změně pouze v jednom CSS souboru. Styl, který je načten ve chvíli, kdy je okno prohlíţeče zmenšeno na menší velikost neţ 1000 px, je téměř shodný s původním stylem, ale veškeré hodnoty jsou deklarovány procentním zápisem. Fragment souboru demonstruje postup: #container-all{ width: 100%; height: auto; margin: 5% auto 4% auto; } 54

55 Po aplikaci tohoto stylu všechny prvky reagují tak, jak mají. Značce #container-all, která obaluje všechny prvky je přiřazena hodnota 100 %. Pro výpočet zbylých prvků byl pouţit jednoduchý vzorec: Hodnota počítaného prvku = (počítaný prvek/ #container-all)*100 Přepočet hodnot pro procentuální zadávání není sloţitý. Vzhledem k tomu, ţe celkový layout stránek je 1000 px, stačí daný prvek vydělit hodnotou divu #container-all (tj. číslem 1000). Přepočet pro značku #container-content bude: #container-content= (#container-content/#container-all)*100 Číselně: #container-content=(850/1000)*100=85% Pro prvky, které jsou obsaţeny v levém menu (aside) není výchozí hodnotou velikost celého layoutu, ale právě velikost levého menu. Hodnota pro obrázky umístěné v levém menu se tedy vypočítá z velikosti levého menu. #aside-img img=(#aside-img img/aside)*100 Číselně: #aside-img img=(128/150)*100= % Jedná se o periodické číslo. Počítač s takhle velkým číslem nepracuje a zaokrouhlí ho. Z tohoto důvodu není potřeba psát tyto rozměry na mnoho desetinných míst. Pro větší přehlednost postačí dvě desetinná místa Navigace Navigace je na webu v horizontální pozici (viz obrázek 18). Navigaci není vhodné zmenšovat a zvětšovat při změně velikosti okna prohlíţeče, protoţe by bylo obtíţné při malém zobrazení kliknout na navigační pole a odkazy by byly špatně k přečtení. Celá 55

56 navigační lišta nav má pevně nastavenou šířku a výšku. Jiţ při šířce prohlíţeče 816 px se menu na šířku stránky nevejde a vzhled se poruší (viz obrázek 19). Obrázek 18: Navigační panel při plném zobrazení Obrázek 19: Navigační panel při šířce prohlíţeče menší neţli 816 px Odkazy jsou vytvořeny jako obrázky. Ty jsou schovány pod obrázkem nad nimi a při přejetí myši se pomalu vysunou dolů. Tento vzhled lišty je vytvořen pouze pomocí CSS 3, bez pouţití JavaScritpu. Obrázek (odkaz) má dvojnásobnou velikost (80 px), neţ je viditelné. Jeho zobrazená, barevná část, má velikost 40 px. Druhá část odkazu je pouze průhledná (obrázek je ve formátu png). Základně je nastavena hodnota na: a {background-position: 0 20px }; Po ose y se obrázek odkazu posune o 20 px dolů, takţe je vidět oněch 20 px. Při přejetí myši (nebo ve chvíli, kdy je zobrazena stránka, na kterou odkazuje odkaz) se hodnota pozice obrázku změní obrázek se posune o dalších 20 px. a:hover, a.active {background-position: 0 40px ;} Pomalý posun je zajištěn novou vlastností CSS3 transition. 56

57 a:hover{ -o-transition-duration: 600ms; -webkit-transition-duration: 600ms; transition-duration: 600ms; } Navigační panel v současném stavu působí při zobrazení v menším okně prohlíţeče obtíţe. Jednou moţností je přesunout navigaci do levého panelu, protoţe by se nemusela přizpůsobovat. Tím by se však změnil design webu. Na navigaci je proto potřeba uplatnit několik stylů, které umoţní nepatrnou změnou přizpůsobení velikosti okna. Navigace byla upravena pro různé velikosti okna tak, aby změna byla co moţná nejplynulejší a nedocházelo ke skokům při změně velikosti okna prohlíţeče. Kdyţ prohlíţeč dosáhne šířky 816 px, menu se jiţ na stránku nevejde, a proto je třeba načíst jiné, které bude splňovat dané rozměry (viz obrázek 20). Menu vypadá vzhledově stejně. Odkazy sportovní kurzy a jednodenní akce byly sloučeny pod společný odkaz zájezdy & kurzy. Při najetí myší na tento odkaz se zobrazí nabídka sportovních kurzů a jednodenních akcí. Obrázek 20: Navigační panel při šířce prohlíţeče menší neţli 700 px Po zmenšení okna na 500 px se menu opět na stránku nevejde, proto je celá navigace skryta pod polem menu. Toto pole je opět rozkryto po najetí myši a objeví se všechny odkazy umístěné pod sebou (viz obrázek 21). 57

58 Obrázek 21: Navigační panel při šířce prohlíţeče menší neţli 500 px Takovouto postupnou změnou vzhledu nedojde při zmenšování okna prohlíţeče k drastickým skokům v designu a rozloţení prvků. Menu je řešeno tak, ţe jsou vytvořeny 3 samostatné tabulky s totoţnou navigací. Tyto tabulky jsou zobrazeny v poţadovaném stylu. Druhý a třetí vzhled menu je v příslušném stylopisu zapsán jako: nav #menu-default {display: none;} nav #menu1 {display: none;} nav #menu2 {display: block;} Duplikování navigace umoţní snadnou orientaci v kódu. Při změnách menu pouze pomocí stylu CSS se kód zbytečně zesloţiťuje a stává se nepřehledný Rozbalovací menu pro dotykové zařízení Pseudotřída a:hover umoţňuje na desktopových zařízeních zajímavé zpestření vzhledu. Jedná se o události při přesunu myši nad daný prvek. Není to však událost JavaScriptu, ale definice stylu pomocí CSS. Problém nastává při prohlíţení stránek na dotykových zařízeních. Na nich se pohyb po stránce neovládá pomocí myši, ale pouze dotykem, takţe a:hover nemá pro tyto zařízení smysl. Otázkou je, jak bude například reagovat rozbalovací menu při dotyku. 58