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 S...
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:
Praha
Ing. Aleksandar Antonovič
duben 2014
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 29. 4. 2014
Petr Stehlík
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.
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
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
Obsah Prohlášení ................................................................................................................................... 2 Poděkování ................................................................................................................................. 3 Anotace ....................................................................................................................................... 4 Klíčová slova .............................................................................................................................. 4 Annotation .................................................................................................................................. 5 Key words ................................................................................................................................... 5 1.
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
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
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 2013 13,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
Obrázek 1: Podíl mobilních operačních systémů připojujících se k internetu (Zdroj: http://gs.statcounter.com/)
3.2 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
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:
18.10.42.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
Označení generace
2G
2.5G
2.75G
eso, GPRS EDGE, Název fcOMA technologie HSC SO lxRTT
3G
3.5G
3.75G
UMTS, CDMA lxEV-DO
HSDP HSU A PA
3.9G
4G
LTE
LTEAdvanced, WiMax-2
GSM GSM GSM, UMTS, UMTS UMTS EE-UTRAN, Název COMA200 COMA2000 UTRA WiMax mobilní sítě 0 N Tabulka 1: Generace, technologie a mobilní sítě (Zdroj: http://mobilizujeme.cz/clanky/technologie-mobilniho-internetu-od-csd-po-lteadvanced-vedecke-okenko/)
4.1.1 CSD a HSCSD Tyto první technologie vznikly před rokem 1997. 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).
4.1.2 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)
4.1.3 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 130 – 160 kB/s (4).
4.1.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).
4.1.5 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
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).
4.1.6 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
Obrázek 4: Rozšíření broadbandu v České republice 2011-2012 (Zdroj: ITU World Telecommunication/ICT indicators database; upraveno)
18
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
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.
5.1.1 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).
Obrázek 7: Odlišná velikost desktopového webu (vlevo) a mobilního (vpravo)
5.1.2 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
Obrázek 8: Ztráta uţivatelů vztaţená k době načítání stránek (Zdroj: https://www.pearanalytics.com/blog/2009/how-webpage-load-time-related-to-visitorloss/)
5.1.3 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).
5.1.4 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
jejich validaci. Vhodné je odhadnout, co se uţivatel snaţí najít a opravit jeho vstup nebo mu nabídnout alternativy (9).
5.1.5 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).
5.1.6 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).
5.1.7 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
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:
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
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: http://gs.statcounter.com/) 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
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: http://gs.statcounter.com/) Ú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
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
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
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:
<article>
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
27.0.1
Opera
Safari
20
5.0.5
Správné zobrazení
Tabulka 3: Zobrazení testovacích stránek 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
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 stránky @media {/* specifický CSS styl */} odkázat na CSS soubor 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í stylu @media (podmínky) { article { width: auto; } }
Za značku @media 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
8.2.1 Výška a šířka prohlížeče a zařízení Značka @media 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 takto: @media (min-width: 480px) { /*zde se zapíší požadované hodnoty */ } Pro detekci šířky displeje obrazovky se přidá pouze slovo ―device‖: @media (max-device-width: 480px) { /*zde se zapíší požadované hodnoty */ } Pro různě velké zobrazovací zařízení je tak moţné napsat specifické hodnoty (13): @media (max-width: 480px) {/*zde se zapíší požadované hodnoty */} @media (min-width: 480px) {/*zde se zapíší požadované hodnoty */} @media (max-height: 480px) {/*zde se zapíší požadované hodnoty */}
8.2.2 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 (13). @media print and (max-height: 480px) {/* hodnoty*/} @media screen, (min-width: 800px) {/* hodnoty*/} @media not screen{/* hodnoty*/}
34
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 (13). @media screen and (device-aspect-ratio: 16/9) {}
8.2.4 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čí (13). @media only print{}
8.2.5 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í (13). @media all and (color) { } @media all and (min-color: 1) { }
8.2.6 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 (13). @media print and (min-resolution:200dpi) { }
8.2.7 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
@media all and (orientation:landscape) { } @media 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
Mobil
Android 1.0
Firefox
IE
mobile 1.0
9.0
Opera 9.2 mobile Opera mobile 9.0
Safari 1.3 Safari mobile 3.1
Tabulka 4: Podpora Media Quieries v prohlíţečích (Zdroj: https://developer.mozilla.org/en-US/docs/Web/CSS/@media)
8.4 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:
8.4.1 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
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 tagu @media 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
Obrázek 15: Stránka se nevejde do okna prohlíţeče, uţivatel musí pouţívat posuvník
8.5.1 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
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).
8.6.1 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
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― 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
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 pixelů: @media 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 http://bjango.com/articles/mindevice-pixel-ratio/. 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 http://retinajs.com/ 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
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
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)
9.1.1 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
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: Pomocí @import 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 značkou @import skrývá. Druhý příklad zápisu je rychlejší (19).
9.1.2 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
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
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)
9.2.1 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
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 (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: SetOutputFilter DEFLATE Další moţností je aktivovat kompresi pomocí PHP zápisu před značku html.
if
(substr_count($_SERVER['HTTP_ACCEPT_ENCODING'],
ob_start(―ob_gzhandler‖); else ob_start(); ?> 47
‗gzip‘))
Apache umoţňuje dvě moţnosti komprimace: mod_deflate – jednodušší na nastavení mod_gzip – nabízí více moţností komprese (20)
9.2.2 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
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.
první hodnota
druhá hodnota
třetí hodnota
čtvrtá hodnota
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; 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
height: 10px;}
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).
10.1 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 Alternaci – standardní web by měl odkazovat mobilní zařízení na mobilní verzi stránek 50
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
11. Úprava stránek na responzivní design Responzivní design byl aplikován na stránky www.vsp-outdoor.cz (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 www.vsp-outdoor.cz 52
11.1 Kontrola HTML Kontrola chyb HTML kódu byla provedena pomocí HTML validátoru W3C konsorcia na stránkách http://validator.w3.org/. 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.
11.2 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.
11.3 Responzivní design 11.3.1 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
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.
11.3.2 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: 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
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=85.333333333% 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.
11.3.3 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
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
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
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ý.
11.3.4 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
V případě stránek vsp-outdoor.cz je dotykový displej fatální. Pomocí přejetí myši je tvořeno rozbalovací menu, takţe bez této funkce se na stránkách nelze pohybovat. Většina prohlíţečů v dotykových zařízeních na vlastnost a:hover reaguje tak, ţe po kliknutí na poloţku menu navigace pouze problikne. Při testu funkčnosti navigace na prohlíţeči Opera mini se menu zobrazilo, ale pouze někdy. Pro zobrazení navigace bylo potřeba stránku několikrát znovu načíst. Řešením tohoto problému je nestavět stránky tak, aby byly zaloţeny na navigaci s rozbalovacím menu. Tento způsob však není často vhodný, zvláště v případě, kdy jsou stránky jiţ v provozu. Kompletní přestavba navigačního menu je zdlouhavá. Řešením je pouţití JavaScriptu (jQuery), který umoţňuje: Detekovat zařízení s dotykovými displeji a definovat pro ně v příslušném CSS souboru specifické chování na vlastnost a:hover. Kliknutí místo pouhého přejetí prvku. Tento skript byl uveden do hlavičky stránky: <SCRIPT> $(document).ready( function(){ $('#menu').click( function(event){ event.stopPropagation(); $('#drop').toggle(); }); $(document).click( function(){ $('#drop').hide(); }); }); V rozbalovacím menu je dále potřeba uvést třídy menu a drop tak, aby byl skript funkční. V HTML kódu menu pro zařízení s nejmenší šířkou bude zápis menu vypadat takto:
59
11.3.5 RWD pro menší zařízení Kromě změn v menu, které je potřeba postupně měnit, se layout stránky mění aţ při hodnotě šířky stránky 500 px. Boční panel aside se přestane zobrazovat a obrázky v obsahu stránky také. Zápis má podobu: #content{ float: none; width: 100%} aside{display: none;} #container-content .wrapper img{display: none;} Obrázek v hlavičce byl ponechán kvůli jednoznačné identifikaci webové stránky. Kdyby byl obrázek odstraněn a nahrazen logem, vzhled stránky by byl příliš chudý a mohlo by dojít k nechtěné proměně stránky. Stránka by pro návštěvníka mohla získat aţ dojem jiné webové prezentace. Prezentace musí zůstat podobná té, kterou znají návštěvníci z desktopových prohlíţečů (viz obrázek 22).
Obrázek 22: Stránka se skrytou hlavičkou 60
11.3.6 Výsledné zobrazení Modelové stránky www.vsp-outdoor.cz postupně, během úprav pro mobilní zařízení s menším displejem (rozlišením), mění svůj vzhled a přitom jejich design zůstává zachován (viz obrázek 23).
Jak bylo výše podrobně vysvětleno, u stránek nejprve došlo k úpravě
navigačního panelu (viz obrázek 23b). V dalším kroku byl navigační panel dále upraven do podoby rozbalovacího menu (viz obrázek 23c). Poslední obrázek (viz obrázek 23d) jiţ ukazuje výsledné zobrazení pro mobilní zařízení bez bočního panelu, který není nositelem důleţitého obsahu. a)
c)
b)
d)
Obrázek 23 (a. b. c. d): Postupná změna webových stránek
61
11.3.7 Obrázky pro displeje s velkou hustotou pixelů Retinové displeje mají větší hustotu pixelů. Ve chvíli, kdy jsou na takový displej načteny obrázky z původního stylu a uţivatel si ještě k tomu přiblíţí obraz, obrázky nejsou ostré. Velmi často se jedná o návštěvníky přicházející právě z mobilních zařízení nebo z novějších notebooků. Těchto uţivatelů není mnoho, ale kvalitnější grafika přispěje k lepšímu poţitku z prohlíţení stránek. Ze stránek http://imulus.github.io/retinajs/ byl stáhnut skript retina.min.js a byl umístěn do modelových stránek. Tento skript se vkládá na konec stánek před ukončení těla stránky, tedy před značku body. Na soubor je odkázáno jako na externí soubor: <script type="text/javascript" src="js/retina.min.js"> Skript je umístěn na konci stránek, aby byla nejprve načtena celá stránka s veškerým obsahem, jako jsou styly, obrázky a vlastní obsah. Aţ poté skript zjišťuje, jestli jsou k dispozici obrázky, které by nahradily původní, méně kvalitní obrázky. Kvalitnější obrázky jsou tedy stahovány aţ ve chvíli, kdy uţivatel můţe plnohodnotně prohlíţet obsah stránky. JavaScript prohledává zdroj s odkazem na obrázek a hledá jeho náhradu – obrázek který má za svým názvem (před příponou souboru) přidáno „@2x“. Ve chvíli, kdy je takový obrázek lokalizován, je načten místo původního. Na stránkách je k dispozici kvalitnější vzhled navigace. Ta se nachází na kaţdé stránce a zabírá znatelnou část zobrazené plochy. V další etapě budou postupně přidávány i další obrázky.
11.3.8 Internet Explorer Před aplikací RWD byly vzorové stránky odladěné pro Internet Explorer (IE) od verze 7. V IE 7 a 8 se aplikovaný responzivní web nezobrazuje a je zobrazován pouze defaultní CSS styl. Tento stav lze označit za dostatečný, protoţe se jedná pouze o minoritní skupinu uţivatelů. Media Quieries je funkční pouze v IE 9 a novějších verzích. Přesto je moţné umoţnit RWD i pro starší verze IE. Funkci lze pomocí odladěného skriptu, dostupného z https://github.com/scottjehl/Respond, zprovoznit. Stačí pouze vloţit do hlavičky stránky odkaz na skript. Buď interním zápisem, nebo odkazem, který odkazuje na externí soubor. Do stránky byl přidán následující zápis:
62
<script src="js/respond.js"> Nyní jiţ responzivní vzhled funguje i ve verzích IE7, IE8. Ve verzi 6 je RWD funkční také, ale pro tuto verzi jiţ stránky nebyly optimalizovány.
11.3.9 Test stránek Po aplikaci responzivního řešení byly upravené stránky vsp-outdoor.cz otestovány v desktopových a mobilních prohlíţečích (viz tabulky 5 a 6). Prohlíţeč
Firefox
IE 6
IE 7
IE 8
IE 9
IE 11
27.0.1
Opera
Safari
20
5.0.5
Správné zobrazení
Tabulka 5: Výsledky testování zobrazení v desktopových prohlíţečích Prohlíţeč
Firefox
Internet
Android
Chrome
Opera
Explorer Správné zobrazení
Tabulka 6: Výsledky testování zobrazení v mobilních prohlíţečích
11.3.10 Rychlost načítání Stránky se přizpůsobují velikosti prohlíţeče tak, jak mají. Důleţitým prvkem při prohlíţení webu, nejen pomocí mobilních zařízení, je ale i jejich rychlost. Dalším krokem při úpravě stránek je tedy analýza z hlediska rychlosti jejich načítání. Na některých stránkách na webu vsp-outdoor.cz je umístěna fotka na pozadí stránky. Tato fotka se načítá ve všech stylech. Při niţší velikosti okna však jiţ není vidět. Proto je potřeba toto pozadí načíst pouze v případě velké šířky stránky. Konkrétně při velikosti stránky minimálně 1000 px. U niţšího rozlišení tento styl načten nebude a prohlíţeč nebude stahovat obrázek na pozadí. 63
11.3.11 Snížení velikosti CSS stylů Při aplikaci RWD na stránky bylo přidáno mnoho stylů. Jedná se o jednotlivé soubory. Tyto soubory zvyšují mnoţství http poţadavků. Soubory je proto potřeba sloučit do jednoho. K tomu je moţné vyuţít například nástroj CSS Compressor. Ten vymaţe mezery a zmenší tak velikost CSS souboru. Druhou moţností je pomocí PHP (Hypertext Preprocessor) sloučit soubory a odstranit mezery přímo na serveru. Tato druhá metoda byla aplikována v případě stránek vsp-outdoor.cz. Soubory CSS, které umoţňují RWD, jsou zapsány: Jedná se o sedm souborů. Tyto odkazy jsou nahrazeny zápisem pomocí PHP: V souboru style.php probíhá seskupení všech sedmi souborů CSS do jednoho a jsou odstraněny mezery a komentáře. To umoţní krátký PHP kód:
', ' '), ' ', $buffer);
} ?>
11.3.12 Snížení velikosti JavaScriptu Na stránku byl jiţ dříve aplikován skript, který umoţňuje starším prohlíţečům Internet Explorer, neţli verze 9, spustit responzivní vzhled (viz kapitola 11.3.8. Internet Explorer). Tento skript je potřebný pouze pro tyto prohlíţeče a není jej potřeba načítat i pro prohlíţeče ostatní. Skript byl vloţen mezi podmíněné HTML komentáře, které zobrazí zápis pouze pro starší prohlíţeče IE (neţli verze 9). Další úpravou bylo sjednocení JavaScriptu a odstranění mezer stejným způsobem, jako soubory CSS. Princip je zcela analogický a jeho aplikací se dosáhne další úspoře přenášených dat.
11.3.13 Výsledek komprimace CSS a JavaScript souborů Pouhé sloučení souborů do jednoho a odstranění mezer sníţilo velikost titulní stránky o 305,3 kB, čas pro načtení stránky se zkrátil o 1,44 sekund a http poţadavky se zmenšily o 7 poţadavků (viz tabulka 7). 65
Poţadavky
Rychlost načítání
Velikost stránky
Před optimalizací
24
2,73 s
714,5 kB
Po optimalizaci
17
1,29 s
409,2 kB
Tabulka 7: Zmenšení počtu http poţadavků a sníţení velikosti a doby načítání stránky při pouţití komprimace souborů
11.3.14 Optimalizace obrázků Obrázky na stránkách znamenají velké mnoţství dat. Místo, které zabírají na webu, je zbytečně velké. Obrázky je proto vhodné optimalizovat. K tomuto účelu lze vyuţít různé grafické editory. Jedním z vhodných nástrojů je Kraken.io dostupný na https://kraken.io/webinterface. Tento nástroj je dostupný online a byl pouţit při optimalizaci obrázků na stránkách vsp-outdoor.cz. Pouţití je velmi jednoduché a rychlé. Obrázky stačí pouze nahrát na server a vybrat, jestli obrázky optimalizovat bezztrátově nebo se ztrátou kvality. Veškeré obrázky je moţné poté stáhnout v jednom zip archivu. Příklad úspory dat bude demonstrován na navigačním panelu, který je tvořen osmi obrázky. Po optimalizaci těchto osmi obrázků bylo ušetřeno 72 kB (viz tabulka 8).
66
Název souboru
Původní
Optimalizovaná
Úspora v kB
Úspora v %
velikost
velikost
zajezdy-kurzy.png
12,60 kB
3,84 kB
8,76 kB
69,52 %
uvod.png
12,31 kB
3,55 kB
8,76 kB
71,17 %
sportovni-kurzy.png
13,28 kB
3,86 kB
9,41 kB
70,89 %
pujcovna.png
12,63 kB
3,79 kB
8,84 kB
69,96 %
menu.png
12,57 kB
3,54 kB
9,03 kB
71,82 %
kontakty.png
12,93 kB
3,69 kB
9,24 kB
71,44 %
jednodenni-akce.png
12,81 kB
3,85 kB
8,96 kB
69,91 %
fotogalerie.png
12,75 kB
3,75 kB
9,01 kB
70,63 %
Celkem
101,88 kB
22,88 kB
72,00 kB
70,67 %
Tabulka 8: Datová úspora optimalizovaných obrázků v navigaci
11.3.15 Komprimace těla dokumentu Kompresí vlastního dokumentu lze ušetřit další přenesená data. Způsobů je opět více. V tomto modelovém případě bylo přistoupeno ke komprimaci pomocí zápisu v souboru .htaccess. Do souboru byl připsán kód: #Compress SetOutputFilter DEFLATE Tento kód značí, ţe všechny soubory s příponou php budou komprimovány. Po nahrání souboru na server byl proveden test, zda komprimace funguje. K tomuto účelu byl pouţit nástroj GIDZip test, dostupný na adrese http://www.gidnetwork.com/tools/gzip-test.php. Nástroj zobrazuje stav komprese (viz tabulka 9) a odpověď http hlaviček. Komprese
Typ komprese
Velikost před kompresí
Velikost po kompresi
Úspora v %
Ano
gzip
7,849 bitů
1,919 bitů
75,6 %
Tabulka 9: Test komprese
67
11.3.16 Zhodnocení zrychlení webové prezentace Po veškerých předešlých úpravách se načítání webových stránek ještě více zrychlilo. Pro zhodnocení výsledku zrychlení byl pouţit nástroj Pingdom Website Speed Test dostupný na adrese http://tools.pingdom.com/fpt/. Celkovým výsledkem bylo sníţení velikosti souborů, sníţení http poţadavků a zvýšení rychlosti načítání stránek. Vodopádový model načítání stránek je zobrazen k porovnání na obrázcích 24 a 25.
Obrázek 24: Vodopádový model před optimalizací
68
Obrázek 25: Vodopádový model po optimalizaci Z obrázků vyplývá, ţe došlo ke značné úspoře (viz tabulka 10). Před optimalizací
Po optimalizaci
Zlepšení
Počet http poţadavků
24
17
26,1 %
Velikost
700,6 kB
327,9 kB
53,2 %
Čas načtení
2,49 s
1,47 s
41 %
Tabulka 10: Srovnání načítání stránky před a po optimalizaci
69
12. Závěr Tato diplomová práce je zaměřena na přizpůsobení webových stránek pro mobilní prohlíţeče. V práci je nejprve pojednáno o mobilním internetu, mobilních zařízeních a pouţívaných prohlíţečích. Dále byl teoreticky prozkoumán způsob aplikace responzivního designu na webové stránky, jako moţnost, jak vhodně upravit webové stránky pro mobilní zařízení. Tento postup byl poté demonstrován v praxi na jiţ spuštěných stránkách. Nejednalo se tedy o vývoj na zelené louce, ale o re-design. Při postupném re-designu stránek byl kladen důraz na zachování celkového dojmu a grafického vzhledu ve všech velikostech zobrazení. V začátku práce byly popsány mobilní prohlíţeče a zařízení přistupující k síti internet. Byla vysvětlena jejich jednotlivá specifika a vyplývající omezení těchto zařízení. Dalším aspektem těchto zařízení je nejčastější metoda připojení – pomocí datových tarifů. K tomu je přidán fakt, ţe uţivatelé nejsou ochotni čekat na načtení webové stránky příliš dlouho. Z tohoto zjištění vyplývá, ţe stránky určené mobilním zařízením by měly být datově co nejméně náročné. V páté kapitole jsou popsána omezení, ale také přednosti, mobilních zařízení. Na tyto omezení je nutné při vývoji stránek pamatovat a jejich výhody lze naopak vhodným způsobem vyuţít. Dále bylo přistoupeno k vysvětlení postupu aplikace responzivního webu a byly rozebrány úskalí, která tento postup provází. V kapitole deváté jsou uvedeny moţnosti zrychlení webových stránek. Jedná se v prvé řadě o optimalizaci obrázků, kompresi kódu a sloučení fragmentů kódu do jednoho souboru. Důleţitá je kapitola pojednávající o praktické aplikaci responzivního designu na stránky. Součástí je i analýza kódu a zhodnocení postupu úpravy stránek na responzivní. Jelikoţ bylo v začátku práce zjištěno, ţe je třeba uţivateli poskytnout stránky, které budou rychlé a datově nenáročné je část diplomové práce zaměřena právě na optimalizaci stránek vzhledem k rychlosti načítání. Postupy sníţení náročnosti datového přenosu byly vysvětleny a demonstrovány na příkladech. Stránky se po aplikaci těchto postupů načítají kratší dobu. Tato diplomová práce shrnuje poznatky potřeb uţivatelů mobilních zařízení s moţnostmi úprav webových stránek pro zobrazení v mobilních zařízeních. Získané poznatky byly prakticky aplikovány a výsledkem je responzivní webová stránka, která je optimalizována pro různé typy zařízení a zároveň je zeštíhlená o nadbytečné datové přenosy pro rychlejší načítání stránky. 70
13. Citovaná literatura 10. Appleseed, Jamie. 8 Limitations When Designing For Mobile. Baymard Institute. [Online] 21. 3 2012. [Citace: 8. 2 2014.] http://baymard.com/blog/mobile-design-limitations. 20. Azad, Kalid. How To Optimize Your Site With GZIP Compression. Better Explained. [Online] 4. 4 2007. [Citace: 10. 4 2014.] http://betterexplained.com/articles/how-to-optimizeyour-site-with-gzip-compression/. 1. Buchta, Martin. Gartner: Rostoucí počet zařízení schopných přístupu k internetu podpoří síťový trh. ChannelWorld. [Online] 6. 5 2013. [Citace: 4. 2 2014.] http://channelworld.cz/zpravy/gartner-rostouci-pocet-zarizeni-schopnych-pristupu-kinternetu-podpori-sitovy-trh-8657. 14. Grigsby, Lyza Danger Gardner & Jason. Head Firs Mobile Web. místo neznámé : O'Reilly Media, 2011. 978-1-4493-0266-5. 17. Hruška, Daniel. Co to vlastně je Retina displej. Jablíčkář.cz. [Online] 18. 4 2012. [Citace: 7. 4 2014.] http://jablickar.cz/co-to-vlastne-je-retina-displej/. 15. Interval.cz. Trápení webdesignerů s viewporty. Interval.cz. [Online] 17. 09 2013. [Citace: 7. 4 2014.] http://interval.cz/clanky/trapeni-webdesigneru-s-viewporty/. 12. Jahoda, Bohumil. Jak na mobilní (responsivní) web. Je čas. [Online] 21. 6 2013. [Citace: 1. 4 2014.] http://jecas.cz/mobilni-web. 16. Jahoda, Bohumil. načka <meta name=viewport>. Je čas. [Online] 28. 6 2013. [Citace: 7. 4 2014.] http://jecas.cz/meta-viewport. 5. Kocman, Rostislav. LTE? Ţádnou mobilní revoluci nečekejte…. Internet pro všechny. [Online] 4. 12 2013. [Citace: 2. 23 2014.] http://www.internetprovsechny.cz/lte-zadnourevoluci-v-mobilnich-datech-neprinese/. 11. Macich, Jiří. Android zatím alternativním webovým prohlíţečům nesvědčí. Root.cz. [Online] 19. 6 2013. [Citace: 23. 2 2014.] http://www.root.cz/clanky/android-zatimalternativnim-webovym-prohlizecum-nesvedci/. 19. Maňák, Michal. Jak můţeme zrychlit své webové aplikace? Blog Michala Maňáka. [Online] 14. 10 2010. [Citace: 22. 4 2014.] http://www.manakmichal.cz/blog/optimalizace/jak-muzeme-zrychlit-sve-webove-aplikace/. 8. Martin, Jim. Netbooks vs tablets: which is best? PC Advisor. [Online] 4. 6 2013. [Citace: 14. 2 2014.] http://www.pcadvisor.co.uk/buying-advice/tablets/3450587/netbook-vs-tablet/.
71
7. Pinola, Melanie. Mobile Computing Devices. About.com. [Online] 6. 2 2014. [Citace: 14. 2 2014.] http://mobileoffice.about.com/od/mobile-devices/a/mini-computers-and-mobiledevices.htm. 18. Retina graphics. Retina graphics for your website. reitna.js. [Online] [Citace: 14. 4 2014.] http://retinajs.com/. 6. Slížek, David. ITU: Polovina světa je pokryta 3G sítěmi, v Česku mobilní broadband stagnuje. LUPA.cz. [Online] 7. 10 2013. [Citace: 12. 2 1214.] http://www.lupa.cz/clanky/itupolovina-sveta-je-pokryta-3g-sitemi-v-cesku-mobilni-broadband-stagnuje/. 3. Šimko, Martin. Přístupy z mobilních zařízení se za poslední rok více neţ zdvojnásobily. Robert Nemec. [Online] 12. 11 2013. [Citace: 4. 2 2014.] http://webovaanalytika.robertnemec.com/pristupy-mobilni-zarizeni-zdvojnasobeni/. 21. Ungr, Pavel. Jak svůj web připravíte na mobilní revoluci? Přichází čas pro mobilní SEO. Lupa.cz. [Online] 15. 10 2012. [Citace: 1. 4 2014.] http://www.lupa.cz/clanky/jak-svuj-webpripravite-na-mobilni-revoluci-prichazi-cas-pro-mobilni-seo/. 4. Vrbacký, Jakub. Technologie mobilního internetu – od CSD po LTE Advanced. mobilizujeme. [Online] 12. 2 2012. [Citace: 8. 2 2014.] http://mobilizujeme.cz/clanky/technologie-mobilniho-internetu-od-csd-po-lte-advancedvedecke-okenko/. 2. Vyleťal, Martin. Mobile Internet FORUM 2013: uţivatelé utěšeně rostou, následovat by měly peníze. LUPA. [Online] 11. 10 2013. [Citace: 4. 2 2014.] http://www.lupa.cz/clanky/mobile-internet-forum-2013-uzivatele-utesene-rostou-nasledovatby-mely-i-penize/. 13. W3C Consorcium. Media Queries. W3C Recommendation. [Online] W3C, 19. 6 2012. [Citace: 16. 3 2014.] http://www.w3.org/TR/css3-mediaqueries/#orientation. 9. Wroblewski, Luke. Mobile first. New York : A Book Apart, 2011. 19-375-5702-2.
