}w!"#$%&'()+,-./012345<ya

Transkript

1 Masarykova univerzita Fakulta informatiky }w!"#$%&'()+,-./012345<ya Použití responzivního designu při návrhu webových rozhraní Diplomová práce Martin Svoboda Brno, Jaro 2014

2 Prohlášení Prohlašuji, že tato diplomová práce je mým původním autorským dílem, které jsem vypracoval samostatně. Všechny zdroje, prameny a literaturu, které jsem při vypracování používal nebo z nich čerpal, v práci řádně cituji s uvedením úplného odkazu na příslušný zdroj. Vedoucí práce: doc. Ing. Jiří Sochor, CSc. ii

3 Poděkování Děkuji doc. Ing. Jiřímu Sochorovi, CSc. za vedení mé diplomové práce. Děkuji své rodině za lásku a podporu, kterou mně věnovali. iii

4 Shrnutí Práce shrnuje zásady tvorby responzivních webových rozhraní navržených pro různé typy zobrazovacích zařízení. Obsahuje nejčastěji používané vzory pro dispoziční úpravu rozložení webu a zobrazení navigace. Představuje frameworky pro tvorbu responzivních webových rozhraní. Praktická část popisuje návrh responzivního rozhraní již existujícího webu a zachycuje testování nově navrženého rozhraní. iv

5 Klíčová slova Responsive design, přizpůsobivá webová rozhraní, použitelnost webu, mobilní zařízení, media queries, návrhové vzory v

6 Obsah 1 Úvod Revoluce v telekomunikačním průmyslu Zobrazovacích zařízení Charakteristiky zařízení Velikost zobrazovací plochy Způsob interakce Připojení k internetu Typy zobrazovacích zařízení Osobní počítač Dotykový mobilní telefon Počítačový tablet Možnosti rozvržení webových rozhraní Statické rozvržení Flexibilní rozvržení Adaptivní rozvržení Responzivní rozvržení Tvorba responzivního rozvržení Flexibilní mřížka Flexibilní obrázky Zmenšování obrázků Ořezávání obrázků Použití elementu picture Media queries Media types Media features Použití media queries Vzory pro responzivní rozvržení Dispoziční úprava rozložení Zužování sloupců Rušení sloupců vi

7 6.1.3 Přeskládání Přirozené zužování Skrytí mimo obrazovku Vzory pro zobrazení navigace Hlavičková navigace Drop-down navigace Patičková navigace Rozbalovací navigace Responzivní frameworky ZURB Foundation Twitter Bootstrap Semantic UI Implementace responzivního webu Nedostatky předchozího návrhu Typy návštěvníků Hledající návštěvníci Zvědaví návštěvníci Nadšení návštěvníci Informační architektura Rozvržení vzhledu a jednotlivých bloků Hlavička a patička Navigační prvky Komponenty obsahu Stránkování Inzerce Obsah stránek Implementace Testování Testování na různých mobilních zařízeních Uživatelské testování Podmínky a průběh Výsledky A/B testování Doporučení změn Nejednoznačná tlačítka akcí Nejasný význam statistických údajů u autora Nevýrazné stránkování Výraznější tlačítko pro vyhledávání vii

8 9.4.5 Přehlednější výsledky vyhledávání Seznam autorů podle abecedy Odlišení reklamy od obsahu Závěr A Obrazová příloha B Zápisy z uživatelského testování B.1 Stanislav B.2 Irina B.3 Libor B.4 Tomáš B.5 Jana C Seznam elektronických příloh viii

9 Kapitola 1 Úvod V posledních několika letech postupně vzrůstá podíl návštěv webových stránek z mobilních zařízení. Do roku 2015 by mělo více návštěvníků přistupovat k internetu pomocí mobilních telefonů a tabletů než pomocí osobních počítačů [3]. Specifické charakteristiky těchto nově používaných zařízení vyžadují přizpůsobení na straně webových stránek. Jedním ze způsobů je použití responzivních webových rozhraní, které dokážou přizpůsobit vzhled webové stránky použitému zobrazovacímu zařízení. Hlavním cílem této diplomové práce je shrnout teoretické základy potřebné k návrhu a implementaci responzivních webových rozhraní. V teoretické části jsou definovány specifické charakteristiky zobrazovacích zařízení a popsány nejčastěji používané typy zařízení. Dále jsou představeny základní možnosti rozvržení webových rozhraní a vhodnost jejich použití pro nejběžnější typy zobrazovacích zařízení. Čtvrtá kapitola je věnována detailnějšímu vysvětlení principů tvorby responzivního rozvržení. Důraz je kladen na tvorbu flexibilní mřížky, práci s obrázky a použití media queries. Dále jsou v práci probrány nejčastěji používané vzory pro dispoziční úpravu rozložení webu a zobrazení navigace. Zmiňovány jsou také již předpřipravené frameworky pro tvorbu responzivních webových rozhraní. Praktická část práce se zabývá návrhem responzivního rozhraní již existujícího webu. Výsledný návrh je podroben třem typům testování, konkrétně testování na různých mobilních zařízeních, uživatelskému testování a A/B testování. Na závěr jsou shrnuta doporučení pro zlepšení navrženého webu vyplývající z poznatků získaných v průběhu testování. 1

10 Kapitola 2 Revoluce v telekomunikačním průmyslu Jsme svědky revoluce v telekomunikačním průmyslu. Klasické mobilní telefony dlouho dominovaly trhu s mobilními zařízeními. Situace se změnila s představením prvního modelu Apple iphone v roce Došlo k rozmachu tzv. chytrých telefonů, univerzálních minipočítačů šitých na míru každému jednotlivci. Statistiky dlouhodobě ukazují vzrůstající prodeje a používání chytrých telefonů. V roce 2012 chytré telefony tvořily 40,7 % z celkového prodeje mobilních telefonů [4]. Používání chytrých telefonů postupně mění chování uživatelů, kteří čím dál častěji využívají pro procházení internetu svůj chytrý mobilní telefon. Vývoj přístupů na webové stránky z jednotlivých zařízení je zachycen na obrázku 2.1. V dubnu 2014 tvořily přístupy z chytrých telefonů a tabletů téměř třetinu z celkové návštěvnosti internetu [8]. Vzrůstá i počet lidí, kteří pro přístup na internet upřednostňují použití chytrého telefonu před počítačem nebo notebookem. V roce 2012 upřednostňovalo chytré telefony 31 % Američanů vlastnících telefon s mobilním přístupem na internet [30]. Třetina z nich dokonce ve svých domovech neměla širokopásmové připojení k internetu [34]. Pro velkou část lidí je tak mobilní telefon jediným přístupovým bodem k internetu. Tento trend je vzhledem k nízké ceně chytrých telefonů typický pro rozvojové země [10]. Podle odhadů [3] by do roku 2015 mělo více Američanů přistupovat k internetu pomocí mobilních zařízení než počítačů. Někteří z těchto lidí budou mít stále možnost přístupu k internetu pomocí svého počítače, ale z důvodu snadnosti raději sáhnou po svém mobilním telefonu. Pro ostatní se stane chytrý telefon jedinou možnou cestou k procházení internetem [26]. 2

11 2. Revoluce v telekomunikačním průmyslu Obrázek 2.1: Vývoj přístupů na webové stránky pomocí jednotlivých typů zobrazovacích zařízení [8] 3

12 Kapitola 3 Zobrazovacích zařízení Vzhledem k rozmachu mobilních zařízení popsaném v předchozí kapitole, je doporučováno při návrhu webových rozhraní brát v úvahu specifika a omezení jednotlivých typů zařízení, které uživatelé používají. V první části této kapitoly jsou definovány základní charakteristiky zobrazovacích zařízení. V druhé části jsou popsány nejčastější typy zobrazovacích zařízení. 3.1 Charakteristiky zařízení Pro účely návrhu použitelného webového rozhraní jsou zdůrazňovány tři základní charakteristiky zobrazovacích zařízení. Zařízení se liší ve velikosti zobrazovací plochy, způsobu interakce a rychlosti připojení k internetu [33] Velikost zobrazovací plochy Při návrhu použitelného webového rozhraní je klíčová velikost zobrazovací plochy, na kterou se internetová stránka vykresluje. Velikost zobrazovací plochy závisí na třech charakteristikách fyzické velikosti, rozlišení a hustotě obrazových bodů obrazovky [19]. První charakteristikou je fyzická velikost obrazovky, na které je stránka vykreslována. Přirozeně se fyzická velikost významně liší mezi kapesními mobilními zařízeními a počítači. Druhou charakteristikou je rozlišení obrazovky. Tím je myšlen počet zobrazovacích bodů (tzv. pixelů), které je možné vykreslit na šířku a výšku obrazovky. Poslední charakteristikou je hustota obrazových bodů. Každé zařízení má stanoveno své vlastní hodnoty, vyjádřené v jednotkách DPI 1. DPI určuje 1. Dots per inch body na palec 4

13 3. Zobrazovacích zařízení počet obrazových bodů obsažených v délce jednoho palce. Velké rozdíly ve velikosti zobrazovací plochy kladou před designéry výzvu, jak se vypořádat se zobrazením na jednotlivých typech zařízení. Díky zmíněným charakteristikám mohou designéři určit skutečnou velikost prvků na obrazovce uživatele Způsob interakce Způsoby interakce člověka s počítačem jsou založeny na různých typech uživatelského vstupu. Na základě nejběžnějších způsobů můžeme zařízení rozčlenit do dvou skupin. První skupinou jsou zařízení, která jsou ovládána pomocí volného pohybu kurzoru po ploše. V jejich případě uživatel pro interakci používá myš, touchpad, grafický tablet nebo trackball. Druhou skupinou jsou dotyková zařízení, která uživatel ovládá dotykem obrazovky, buď pomocí konečků prstů nebo pomocí stylusu. Zadávání textového vstupu může u obou těchto skupin být uskutečněno pomocí hardwarové nebo softwarové klávesnice. Softwarová klávesnice se zobrazuje přímo na obrazovce ovládaného zařízení. V závislosti na kontextu použití se u tohoto typu klávesnice můžeme setkat s několika druhy rozložení kláves. Příklady různých rozložení jsou na obrázku 3.1. Volbou vhodného rozložení je možné uživatelům ulehčit zadávání textového vstupu Připojení k internetu Způsob, jakým je zařízení připojeno k internetu, ovlivňuje uživatelský prožitek při návštěvě webu. Při použití širokopásmového připojení nemusí uživatel zaznamenat žádný problém, ale při přístupu přes pomalé mobilní připojení může být doba načítání natolik dlouhá, že návštěvník webovou stránku opustí. Uživatelé pomalé načítání vnímají negativně. Ve výzkumu z roku 2012 [1] uvedlo 66 % respondentů, jako svoji poslední negativní zkušenost při používání mobilního telefonu, právě pomalé načítání webových stránek. 44 % respondentů očekávalo načtení webové stránky do 3 sekund. Tato nepříznivá čísla jsou způsobena tím, že webové stránky často nejsou přizpůsobené uživatelům, kteří se připojují k internetu pomocí pomalého připojení. Podle statistik telefonních operátorů je většina 5

14 3. Zobrazovacích zařízení Obrázek 3.1: Různé typy klávesnic zobrazovaných na obrazovce dostupné na ios [28] území ČR stále pokryta pomalejším 2G signálem 2. Rychlým 3G 3 je pokryto 35 % území. Když se vezme v úvahu nerovnoměrná hustota osídlení, 79 % obyvatelstva má přístup k připojení přes 3G [6]. Vzhledem k popsanému očekávání uživatelů a stavu současné telekomunikační sítě by mělo být snahou vývojářů urychlit načítání webových stránek. Urychlení je možné realizovat například snížením počtu požadavků na server nebo zmenšením datového objemu. 3.2 Typy zobrazovacích zařízení V dnešní době existuje mnoho typů zařízení používaných k procházení webových stránek. Nejrozšířenější typy zařízení je vhodné brát v úvahu při tvorbě dobře použitelných webových rozhraní. Hlavními typy zobrazovacích zařízení jsou osobní počítače, chytré telefony a počítačové generace mobilního připojení k internetu generace mobilního připojení k internetu 6

15 3. Zobrazovacích zařízení tablety Osobní počítač Do kategorie osobních počítačů spadají stolní a přenosné počítače. Velikosti obrazovek stolních počítačů se pohybují v rozmezí 19 až 30 palců od rozlišení do pixelů [16]. U přenosných počítačů jsou s ohledem na mobilitu preferovány menší rozměry obrazovek pohybující se v rozmezí od 9 do 17 palců. Rozlišení jsou podobné jako u stolních počítačů. Typická hodnotou DPI pro osobní počítače spadá do rozmezí od 72 až 120 dpi [17]. Interakce uživatele je prováděna pomocí kurzoru s volným pohybem po ploše a hardwarové klávesnice. Osobní počítače jsou typicky připojeny k internetu pomocí vysokorychlostního připojení. Běžným prostředím pro užití osobních počítačů jsou domácnosti, kanceláře a školy. Typicky jsou počítače umístěny ve stabilní poloze, která uživatelům umožňuje pohodlné používání s poměrně velkou přesností. Vzhledem k umístění a použití osobních počítačů uživatelé nejsou pod časovým tlakem a mají dostatek času pro vykonávání zvolené činnosti Dotykový mobilní telefon Chytré telefony se od klasických telefonů vyznačují absencí hardwarové klávesnice, jejíž prostor zabírá dotyková obrazovka. Rozměry obrazovky se pohybují od 2 do 5 palců při rozlišení od pixelů až do pixelů [8]. Hodnoty DPI se mezi jednotlivými přístroji výrazně liší, na pozadí prohlížeče proto probíhá sjednocení na hodnotu okolo 160 DPI [31]. Interakce uživatele s přístrojem probíhá pomocí dotykového ovládání a softwarové klávesnice. Stejně jako osobní počítače mohou chytré telefony využívat širokopásmové připojení tam, kde je k dispozici. Mimo tato místa chytré telefony běžně využívají připojení k internetu pomocí mobilní sítě. Díky mobilitě jsou chytré telefony používány v různorodých situacích. Uživatelé uvádějí, že telefon používají i při vykonávaní jiné činnosti, například čekání ve frontě, při jídle či nakupování [19]. Uživatelé používají chytré telefony v rušném, měnícím se prostředí s mnoha okolními vlivy. Obecně lze říct, že chytré telefony uživatelům 7

16 3. Zobrazovacích zařízení slouží pro rychlé hledání informací, kdy v danou chvíli nemají přístup k osobnímu počítači. Nicméně jsou čím dál častěji před osobními počítači upřednostňovány [30] Počítačový tablet Tablety se dají považovat za přechod mezi osobními počítači a chytrými telefony. Na první pohled vypadají tablety jako zvětšené chytré telefony, ale kontext jejich použití spíše odpovídá osobním počítačům. Rozměry tabletů se nejběžněji pohybují v rozmezí od 7 do 10 palců [18], nejčastější je rozlišením pixelů [8]. Interakce uživatele s přístrojem probíhá stejně jako u chytrých telefonů pomocí dotykové obrazovky. Při procházení webových stránek uživatelé tablety používají k podobným účelům jako osobní počítače. Rozdílem je, že je většinou nepoužívají k práci, ale spíše k zábavě a relaxaci. Na webových stránkách očekávají podobný vzhled a stejné informace, jako kdyby pracovali na svém počítači. 8

17 Kapitola 4 Možnosti rozvržení webových rozhraní V této kapitole jsou popsány možnosti rozvržení webových rozhraní a vhodnost jejich použití pro nejběžnější typy zobrazovacích zařízení uvedených v předchozí kapitole. Klíčovým faktorem při posuzování rozdílů v zobrazení na různých zařízeních je šířka jejich zobrazovací plochy určená počtem pixelů. Je možné rozlišit dvě základní kategorie druhů rozvržení webu podle toho, zda se nepřizpůsobují šířce obrazovky zobrazovacího zařízení (statické rozvržení) nebo naopak přizpůsobují (rozvržení flexibilní, adaptivní a responzivní) [29]. Statické webová stránka má pevně nastavenou velikost Flexibilní webová stránka má relativně nastavenou velikost Adaptivní webová stránka má definováno více rozvržení pro různá rozlišení Responzivní kombinace flexibilního a adaptivního rozvržení Názorně je možné porovnat rozdíly mezi těmito rozvrženími na ukázkovém webu Liquidapsive 1. Na něm je možné otestovat chování těchto druhů rozvržení při různých velikostech zobrazovací plochy Statické rozvržení Statické rozvržení, někdy označované jako fixní, je rozvržení, které má napevno určenou šířku stránky v pixelech [23]. Stránka se vždy zobrazí Různé velikosti zobrazovací plochy lze jednoduše dosáhnout změnou velikosti okna webového prohlížeče 9

18 4. Možnosti rozvržení webových rozhraní tak, jak ji designér navrhnul bez ohledu na zařízení, na kterém ji uživatel prohlíží. Obrázek 4.1 ilustruje chování staticky navržené stránky na zařízeních s různou velikostí zobrazovací plochy. Obrázek 4.1: Statické rozvržení stránky se nepřizpůsobuje různým rozlišením obrazovky Z pohledu vývoje je velkou výhodou staticky navržených webových stránek snadnost jejich vytvoření a provádění pozdějších úprav. Protože šířka stránky je stejná na každém zařízení, vzniká méně potíží s umístěním obsahu s pevnou šířkou (obrázky, video). Pokud je stránka rozumně široká, je staticky navržené web dobře použitelný na osobním počítači. Při načtení na mobilním zařízení je uživateli zobrazen zmenšený náhled, který může uživatel přibližovat a pohybovat se na stránce [31]. Nevýhodou staticky rozvržených stránek je, že se nepřizpůsobují rozlišení obrazovky. Proto na zařízeních s velkou zobrazovací plochou může webová stránka působit jako úzký pruh ve středu obrazovky, což může působit rušivý estetický dojem. Naopak při malém rozlišení si uživatel zobrazí pouze malý výsek stránky, což může vést k horší orientaci na stránce. Tak se snadno se může stát, že uživatel některou část stránky přehlédne. Z těchto důvodů je možné hodnotit staticky rozvržené stránky jako hůře použitelné. 4.2 Flexibilní rozvržení Flexibilní rozvržení, také označované jako fluidní, definuje rozměr komponent stránky procentuálním poměrem k velikosti zobrazovací plochy. Tak, je docíleno efektu, kdy se rozvržení přizpůsobuje šířce zobrazovací 10

19 4. Možnosti rozvržení webových rozhraní plochy, jak je znázorněno na obrázku 4.2. V tomto případě se rozvržení přizpůsobuje tak, aby vždy vyplnilo celou plochu. Flexibilní rozvržení je uživatelsky přívětivější než statické rozvržení, protože se přizpůsobuje zařízení. Nevýhodou je, že designér má méně kontroly nad výsledným vzhledem. Mohou tak vzniknout problémy související se zobrazením na obrazovkách s netradičními charakteristikami. Například při zobrazení stránek na zařízení s velmi velkou zobrazovací plochou může velká šířka prvků roztáhnout texty tak, že stránka najednou působí prázdně. Naopak při zobrazení na zařízeních s malým rozlišením mohou texty přetékat z úzkých prvků, protože nejsou dostatečně široké. V obou případech může stránka působit nejen neesteticky, ale může být pro uživatele i velmi obtížně čitelná. Obrázek 4.2: Flexibilní rozvržení se přizpůsobuje rozlišení obrazovky a zachovává poměr jednotlivých prvků 4.3 Adaptivní rozvržení Adaptivní rozvržení se vyhýbá nevýhodám flexibilního rozvržení, ale zároveň zachovává největší výhodu, tedy schopnost přizpůsobit se rozlišení obrazovky. Při využití adaptivního rozvržení designér navrhne několik staticky rozvržených variant webu pro různá zařízení. Prohlížeč vhodnou variantu zvolí na základě definovaných podmínek, nejčastěji šířky zobrazovací plochy. Při tomto přístupu se využívají media queries, které jsou součástí standardu CSS3 [12]. Pomocí nich je možné v kódu odlišit, které kaská- 11

20 4. Možnosti rozvržení webových rozhraní dové styly se aplikují za jakých podmínek. Media queries jsou detailněji popsány v sekci 5.3. Stránka vytvořená pomocí adaptivního rozvržení je ilustrována na obrázku 4.3. Při menší šířce jsou sloupce přeskládány pod sebe tak, aby obsah ve sloupcích byl i na menších zařízeních dobře čitelný. Obrázek 4.3: Adaptivní rozvržení skokově upravuje rozvržení stránky Velkou výhodou je možnost přizpůsobení vzhledu stránky vlastnostem zařízení. Tak je možné zaručit, že webová stránka bude pro většinu uživatelů dobře použitelná. Nicméně tím, že adaptivní rozvržení využívá několika staticky rozvržených variant webu, navržených pro nejčastěji používaná zařízení, nemusí být pro uživatele méně častých zařízení, žádná z těchto variant zcela optimální [2]. 4.4 Responzivní rozvržení Webová stránka vytvořená pomocí responzivního rozvržení se přizpůsobuje rozměrům obrazovky s cílem optimálního využití celé její plochy. Jedná se o kombinaci flexibilního a adaptivního rozvržení. Stejně jako u adaptivního rozvržení jsou základem media queries, které umožňují zobrazit různá rozvržení pro různá zařízení. Navíc se responzivní rozvržení flexibilně přizpůsobuje obrazovce, aby optimálně využilo celou její plochu. To je zvláště důležité u mobilních zařízení, u kterých je nutné malý prostor využívat co nejefektivněji. Nejsilnější výhodou použití responzivního rozvržení je optimální použitelnost na všech typech zařízení. Ale stejně jako u adaptivního 12

21 4. Možnosti rozvržení webových rozhraní rozvržení je i výroba webové stránky využívající responzivní rozložení náročnější než při použití statického nebo flexibilního rozvržení. Tvorbu mohou ulehčit předpřipravené frameworky popsané v sekci 7. 13

22 Kapitola 5 Tvorba responzivního rozvržení Tato kapitola detailněji vysvětluje principy tvorby responzivního rozvržení, představeného v předchozí kapitole. Autor myšlenky responzivního designu Ethan Marcotte poprvé tento přístup k tvorbě webu představil ve svém článku Responsive Web Design [25] v roce V návaznosti na úspěch článku později vydal i stejnojmennou knihu [24]. Základní myšlenkou je vytvářet webové stránky tak, aby byly schopné se přizpůsobit jakémukoli zařízení, na kterém jsou zobrazovány. Základními principy pro vytvoření takové stránky jsou: Flexibilní mřížka Flexibilní obrázky Media queries 5.1 Flexibilní mřížka Prvním krokem při tvorbě responzivního rozvržení je vytvoření flexibilní mřížky. Jedná se o rozdělení webové stránky na síť sloupců a řádků, v které jsou rozmisťovány jednotlivé komponenty. Aby mřížka byla flexibilní, musí se přizpůsobovat velikosti zobrazovacího zařízení. Toho je dosaženo udáváním rozměrů v jednotkách relativních k velikosti zobrazovací plochy, stejně jako při tvorbě flexibilního rozvržení 4.2. Grafické nástroje, které se používají pro návrh vzhledu webu, nicméně pracují s pevnými jednotkami pixely. Pro získání relativních jednotek je nutné rozměry udané v pixelech přepočítat. Pro přepočet se využívá vzorec cíl / kontext = výsledek. Platí, že cíl je vnitřní prvek, kontext je vnější prvek a výsledek je relativní velikost vnitřního prvku vzhledem k vnějšímu v procentech. 14

23 5. Tvorba responzivního rozvržení Přepočet staticky rozvrženého webu na flexibilní je ilustrován na obrázku 5.1. V první části obrázku jsou šířky prvků zadány pevně v pixelech. Druhá část obrázku již udává rozměry přepočítané na relativní jednotky procenta. Popsaným způsobem není možné spočítat hlavní rozměr stránky, protože neexistuje žádný nadřazenější prvek. Šířka je proto stanovena na 90 %. Obrázek 5.1: Převod rozměrů mřížky z pixelů na procenta [24] 15

24 5. Tvorba responzivního rozvržení Pro vytvoření flexibilního rozvržení, které se bude přizpůsobovat velikosti okna prohlížeče a přitom zachovávat rozložení prvků, je nutné tímto způsobem přepočítat všechny hodnoty udané v pevných jednotkách. To znamená nejen rozměry prvků, ale i velikost jejich odsazení, velikosti obrázků i velikost písma. Tak je dosaženo dokonalého zachování kompozice prvků při jakékoli změně velikosti okna prohlížeče. Moderní frameworky pro tvorbu responzivních webů mohou práci s přepočítávání rozměrů výrazně ulehčit. Například framework Foundation nabízí předpřipravenou flexibilní mřížku. Pomocí již hotových CSS tříd, které framework definuje, je možné jednoduše udávat rozměry prvků a bez nutnosti přepočítávání rozměrů. Ukázka mřížky ve frameworku Foundation je na obrázku 5.2. Responzivní frameworky jsou detailněji popsány v kapitole 7. Obrázek 5.2: Předpřipravená flexibilní mřížka ve frameworku Foundation [22] 5.2 Flexibilní obrázky Pomocí flexibilní mřížky lze umisťovat na stránku prvky tak, aby se jejich rozměry měnily v závislosti na velikosti zobrazovací plochy. Pro změnu velikosti obrázků je v současné době možné uplatnit tři postupy zmenšování, ořezávání a použití elementu picture Zmenšování obrázků Obrázky dostatečně velkých rozměrů je možné zmenšovat, tak aby jejich velikost odpovídala ostatním prvkům ve flexibilní mřížce. Zmenšování 16

25 5. Tvorba responzivního rozvržení se doporučuje řešit jejich vložením do kontejneru, který má nastavenou šířku v relativních jednotkách [24]. Samotnému obrázku se potom nastaví CSS vlastnost max-width: 100%, která zajistí, že se obrázek roztáhne na celou velikost jeho kontejneru. Toto řešení se hodí pro obrázky, které je potřeba zobrazit celé, protože při oříznutí by uživatel nemusel pochopit význam obrázku. Příkladem mohou být ilustrační obrázky v textu. Při využití popsané metody pro zmenšování obrázků je nutné myslet na podporu v Internet Exploreru. U IE 7 a nižších verzí se projevuje nízká kvalita zmenšených obrázků. Řešením je použití proprietárního CSS filtru AlphaImageLoader. Vliv jeho použití je zachycen na obrázku 5.3. Velkou nevýhodou použití postupu zmenšování obrázků je nutnost na malých zařízeních stahovat obrázky v originální velikosti určené pro velká zařízení. Tím se zbytečně prodlužuje načítání webové stránky. Obrázek 5.3: Nízká kvalita zmenšených obrázků objevující se v IE 7 a řešení využitím filtru AlphaImageLoader [24] Ořezávání obrázků Další metodou pro práci s obrázky v responzivním rozvržení je jejich ořezávání. Při ořezávání je obrázek vložen do kontejneru s flexibilní šířkou, ale navíc má nastavenu CSS vlastnost overflow: hidden. Ta zajistí, že část obrázku, která z kontejneru přetéká, nebude zobrazena. Toto řešení, není tak užitečné jako zmenšování obrázků, ale hodí se například pro obrázky na pozadí nebo v hlavičce stránky. 17

26 5.2.3 Použití elementu picture 5. Tvorba responzivního rozvržení Ve standardu HTML 5 je zařazen element picture, pomocí kterého je možné definovat pro různá zařízení různé varianty obrázků [5]. Tak je možné flexibilněji používat obrázky při návrhu responzivního rozhraní. Navíc je velkou výhodou tohoto postupu možnost optimalizace velikosti obrázků pro malá zařízení tak, aby například nedocházelo ke zbytečnému stahování nepotřebných dat. Element picture zatím není implicitně podporovaný prohlížeči. Je možné použít JavaScriptovou knihovnu Picturefill 1, která podporu v prohlížečích emuluje. 5.3 Media queries Na základě postupů z předchozích dvou sekcí je možné vytvořit kvalitní flexibilní rozvržení webu. Jak je zmiňováno v sekci 4.2, flexibilní rozvržení má několik nedostatků. Lze je odstranit pomocí media queries, které jsou posledním prvkem nutným pro tvorbu responzivních webových stránek. Media queries jsou součástí standardu CSS3 [12] a umožňují přizpůsobit vykreslování webových stránek parametrům zobrazovacího zařízení. V CSS kódu je možné odlišit, které kaskádové styly se aplikují za jakých podmínek. Lze tak vytvořit webovou stránku, které se optimálně přizpůsobuje libovolnému zařízení. Pro definování podmínek, za kterých se mají styly použít, je možné použít media types a media features Media types Předchůdcem media queries byla specifikace media types, definovaná ve standardu CSS 2.1 [11]. Media types umožňují rozlišovat typ zařízení, na kterém je webová stránka zobrazována. Tak je možné aplikovat vybrané kaskádové styly pouze pro konkrétní typ zařízení. Standardem definované typy zařízení jsou uvedeny v tabulce 5.1. Zobrazovací zařízení použije při vykreslování pouze CSS styly, které odpovídají jeho typu. Například pro zařízení s barevnou obrazovkou se použijí styly určené pro obrazovky (tj. screen), a budou ignorovány styly určené tiskárnám (tj. print)

27 5. Tvorba responzivního rozvržení Media type all braille embossed handheld print projection screen speech tty tv Popis zařízení všechna zařízení dotyková zařízení pracující s Braillovým písmem tiskárny Braillova písma mobilní zařízení, typicky s malou obrazovkou a limitovaným internetovým připojením tiskárny datové projektory barevné obrazovky osobních počítačů syntezátory řeči zařízení s pevně definovanou mřížkou pro znak nebo omezenou kapacitou zobrazovacího zařízení, např. textové terminály, teletext televizní zařízení, zařízení s nízkým rozlišením a omezenou posouvatelností obrazu Tabulka 5.1: Typy zařízení definované specifikací media types [11] 19

28 5. Tvorba responzivního rozvržení Media features Pomocí media types není možné odlišit zařízení podle jeho specifických vlastností. Například pro přenosné zařízení je možné použít typ handheld, ale nelze odlišit, zda se jedná o tablet, chytrý telefon nebo klasický mobilní telefon. Proto byly do standardu CSS3 zařazeny media features [12]. Pomocí nich lze identifikovat fyzickou charakteristiku zobrazovacího zařízení. Standardem jsou definovány charakteristiky uvedené v tabulce Použití media queries Media queries kombinují media types a media features, pro sestavení kritérií definujících za jakých podmínek dané CSS styly použít. Prohlížeč se rozhoduje, zda dané styly vykreslí, na základě toho, zda zobrazovací zařízení určená kritéria splňuje. Definici media queries je možné uvádět přímo v CSS za použití jak je ukázáno ve zdrojovém kódu 5.1, nebo při připojování CSS souborů v HTML viz zdrojový kód 5.2. (max-width: 768px) { 2 /* pouze pro zarizeni s~obrazovkou mensi 3 nez 768 pixelu */ 4 } 5 screen and (min-width: 768px) { 7 /* pouze pro zarizeni s~barevnou obrazovkou 8 vetsi nez 768 pixelu */ 9 } 10 screen and (color), projection and (color) { 12 /* pouze pro barevne obrazovky 13 nebo barevne projektory */ 14 } Zdrojový kód 5.1: Použití media queries v CSS dokumentu Při tvorbě responzivního rozvržení se media queries nejčastěji používají pro kritéria specifikující minimální a maximální šířku. Tak je možné 20

29 5. Tvorba responzivního rozvržení Media feature width height device-width device-height Prefix Popis Ano Ano šířka nebo výška plochy určené pro zobrazení obsahu šířka nebo výška celé obrazovky orientation Ne orientace obrazovky (landscape nebo portrait) aspect-ratio Ano poměr šířka:výška plochy určené pro zobrazení obsahu device-aspect-ratio Ano poměr šířka:výška celé obrazovky color Ano počet bitů pro jednu barevnou komponentu v reprezentaci pixelu color-index Ano počet barev zobrazitelných na zařízení monochrome Ano počet bitů na pixel u černobílých obrazovek resolution Ano hustota zobrazovacích bodů zařízení scan Ne prokládané/progresivní řádkování (pro media typ tv) grid Ano zobrazení v pevné vykreslovací mřížce (pro media typ tty) Tabulka 5.2: Charakteristiky zařízení definované specifikací media queries. Sloupec prefix označuje, zda je u charakteristiky možné použít prefixy min- a max- pro udání minimálních a maximálních hodnot. [12] 21

30 5. Tvorba responzivního rozvržení 1 <link rel="stylesheet" href="paper.css" media="print" /> 2 <link rel="stylesheet" href="wide.css" 3 media="screen and (min-width: 1024px)" /> Zdrojový kód 5.2: Použití media queries při připojování CSS stylů v HTML dokumentu Šířka Typické zařízení 320 px Malá zařízení s obrazovkou na výšku chytré telefony 480 px Malá zařízení s obrazovkou na šířku chytré telefony 600 px Menší tablety s obrazovkou na šířku například Amazon Kindle 768 px Tablety s obrazovkou na výšku například ipad 1 a px Notebooky, stolní monitory, tablety při obrazovce na šířku 1200 px Velké obrazovky, převážně notebooky a stolní monitory Tabulka 5.3: Seznam bodů zlomu podle šířky obrazovky [24] definovat body zlomu, v angličtině breakpoints. Jedná se o hranice, po jejichž překročení se obsah na stránce přeskupí pro dosažení optimální použitelnosti na použitém zařízení. Body zlomu jsou určovány na základě nejtypičtějších rozlišení zobrazovacích zařízení. Ethan Marcotte [24] doporučuje hodnoty v uvedené v tabulce 5.3. Moderní prohlížeče na počítačích a mobilních zařízeních media queries podporují. Největší problémy působí absence podpory v Internet Exploreru 8 a nižších verzích. V tom případě lze použít JavaScriptové knihovny, které media queries emulují. Jedná se například o knihovny css3-mediaqueries.js 2 nebo respond.js

31 Kapitola 6 Vzory pro responzivní rozvržení Pomocí principů responzivního rozvržení představených v předchozí kapitole je možné vytvořit rozložení webových stránek, které se přizpůsobuje různým zobrazovacím zařízením. Tato kapitole obsahuje nejčastější vzory pro dispoziční úpravu rozložení webu a zobrazení navigace na zařízeních s malou zobrazovací plochou. 6.1 Dispoziční úprava rozložení Při přizpůsobování rozložení webu zařízením s menší zobrazovací plochou je potřeba zajistit konzistenci jednotlivých verzí. Změny dispozičního rozložení webu shrnul Luke Wroblewski [32] do pěti nejpoužívanějších vzorů postupně představených v této sekci. Tyto vzory různým způsobem řeší problém, jak z vícesloupcového rozložení vytvořit rozložení jednosloupcové, které je vhodné pro mobilní zařízení. Obecnou charakteristikou těchto vzorů je přesun nejdůležitějších informací tj. hlavního obsahu co možná nejblíže horní části stránky. Cílem je, aby uživatel na mobilním zařízení snadno získal důležité informace, které na webové stránce hledá Zužování sloupců Vzor zužování sloupců upravuje šířku sloupců podle velikosti zobrazovací plochy. Jak je znázorněno na obrázku 6.1, jsou sloupce postupně zužovány až na nejnižší přijatelnou hranici. Po překročení této hranice by byly sloupce vzhledem k obsahu příliš úzké a dojde proto k jejich přeuspořádání pod sebe. 23

32 6. Vzory pro responzivní rozvržení Obrázek 6.1: Zužování sloupců Rušení sloupců Vzor rušení sloupců udržuje absolutní šířku sloupců stále stejnou. Při zmenšování šířky zobrazovací plochy jsou postupně sloupce přeuspořádány pod sebe podle jejich priority. Jak je vidět na obrázku 6.2, při zmenšení zobrazovací plochy dojde nejprve k zrušení nejméně důležitého modrého sloupce a až při dalším zmenšování ke zrušení sloupce oranžového. Obrázek 6.2: Rušení sloupců 24

33 6. Vzory pro responzivní rozvržení Přeskládání Oproti předešlým vzorům dochází při použití přeskládání ke komplexnějším úpravám rozložení. Na obrázku 6.3 představuje zelený blok hlavní obsah a oranžový blok navigační sloupec. Bloky označené modrou a fialovou barvou obsahují doplňkový obsah. Při postupném zmenšování jsou nejprve přeskládány bloky s doplňkovým obsahem. Až při dalším zmenšování je navigační blok přesunut na vhodné umístění do horní části stránky. Obrázek 6.3: Přeskládání Přirozené zužování Vzor přirozené zužování vychází z použití jednosloupcového rozložení už ve verzi pro zařízení s velkou zobrazovací plochou. Takto jednoduché rozložení podstatně ulehčuje celý proces přizpůsobení menším zařízením. Jsou nutné spíše drobné změny jako například úpravy velikosti fontů a obrázků. Chování tohoto vzoru je znázorněno na obrázku Skrytí mimo obrazovku Dalším vzorem je skrytí bloku mimo obrazovku. Použití tohoto vzoru je časté u nativních aplikací. Na webových stránkách se skrytí mimo obrazovku převážně používá pro skrytí navigačních položek. Chování vzoru je znázorněno na obrázku 6.5. Zelený blok představuje hlavní obsah, oranžový je navigační blok a modrou barvou je označen doplňkový 25

34 6. Vzory pro responzivní rozvržení Obrázek 6.4: Přirozené zužování obsah. Při postupném zužování stránky jsou bloky pro doplňkový obsah a navigaci postupně skryty. Jejich zobrazení je možné pomocí ovládacích prvků přítomných na stránce. Obrázek 6.5: Skrytí mimo obrazovku 6.2 Vzory pro zobrazení navigace Hlavní navigace je jednou z nejdůležitějších komponent webu. Umožňuje uživateli získat přehled o informační architektuře a ulehčuje mu pohyb po webu. Na webových stránkách zobrazených na osobním počítači je navigace typicky umístěna v horní nebo levé části stránky. Z důvodu menšího prostoru na obrazovkách mobilních zařízení je nutné umístění navigace upravit. Brad Frost [21] shrnul několik základních přístupů pro zobrazení navigace na mobilních zařízeních. Ukázky jednotlivých přístupů jsou na obrázku

35 6.2.1 Hlavičková navigace 6. Vzory pro responzivní rozvržení Nejjednodušší cestou pro řešení navigace je její ponechání v horní části stránky. Toto řešení je použito u velké části responzivních webů. Nevýhody jsou patrné s přibývajícím množstvím položek v navigaci, kdy na mobilním zařízení začne navigace zabírat nezanedbatelné množství místa. Tento problém lze vyřešit skrytím méně důležitých položek [20] Drop-down navigace Další možností, jak umístit navigaci, je její přeměna na formulářový prvek drop-down 1. Výhodou je úspora místa v horní části stránky. Nevýhodou jsou malé možnosti úpravy vzhledu použitého formulářového prvku. Navíc pro uživatele může být použití drop-down menu matoucí, protože se s tímto prvkem setkávají u formulářů Patičková navigace V případě patičkové navigace je menu umístěno u patičky webové stránky. V hlavičce je ponechán jen odkaz, pomocí kterého může uživatel přeskočit do dolní části stránky, kde je menu umístěné. Oproti hlavičkové navigaci je výhodou tohoto řešení uvolnění prostoru v hlavičce stránky. Jedná se o velice snadný přístup k vytvoření mobilní navigace, nicméně skok do dolní části stránky může být pro uživatele matoucí Rozbalovací navigace Rozbalovací navigace je nejpokročilejší z představovaných řešení zobrazení navigace na mobilních zařízeních. Svým způsobem je velmi podobná patičkové navigaci. V hlavičce je umístěn ovládací prvek, pomocí kterého může uživatel zobrazit nebo skrýt menu. Rozdíl tedy spočívá v tom, že menu je uživateli přímo rozbaleno bez odskoku do spodní části stránky. Výhodou je, že tento přístup nevede k dezorientaci uživatele a působí elegantním dojem, zvláště pokud je zobrazení a skrytí provázeno animací. 1. také se označuje jako select box nebo rozbalovací nabídka 27

36 6. Vzory pro responzivní rozvržení (a) Hlavičková navigace (b) Drop-down navigace (c) Patičková navigace (d) Rozbalovací navigace Obrázek 6.6: Ukázky užití různých vzorů pro umístění navigace [21] 28

37 Kapitola 7 Responzivní frameworky Základem tvorby responzivního rozvržení jsou principy popisované v kapitole 5. Pro usnadnění tvorby je možné použít předpřipravené frameworky například ZURB Foundation, Twitter Bootstrap nebo Semantic UI. Každý z těchto frameworků usnadňuje vývoj webu tím, že definuje flexibilní mřížku, normalizuje rozdíly mezi jednotlivými prohlížeči a poskytuje sadu předpřipravených komponent. 7.1 ZURB Foundation Framework Foundation 1 je vyvíjen společností ZURB, která jeho první verzi uveřejnila v roce Poslední jeho verze Foundation 5 byla vypuštěna v listopadu roku Cílem frameworku je poskytnout pevné základy při tvorbě webových rozhraní. Jeho základem je flexibilní mřížka a sada předpřipravených komponent. [14] 7.2 Twitter Bootstrap Twitter Bootstrap 2 vyvinul Mark Otto a Jacob Thornton jako framework, který měl sjednotit a ve výsledku i urychlit návrh a implementaci interních nástrojů vyvíjených ve společnosti Twitter. První verze frameworku byla veřejnosti představena v srpnu roku 2011, poslední verze Bootstap 3 byla zveřejněna v srpnu roku [13] Z hlediska responzivního rozvržení framework Bootstrap nepoužívá plně flexibilní mřížku jako například framework Foundation. Z hlediska typu rozvržení Bootstrap stojí mezi adaptivním a responzivním rozvrže

38 7. Responzivní frameworky ním. Mřížka se flexibilně přizpůsobuje pouze malým zařízením s šířkou zobrazovací plochy menší než 768 pixelů, u zařízení s větší zobrazovací plochou se mřížka mění skokově. Díky široké paletě předpřipravených komponent je framework oblíbený pro urychlení tvorby administračních webů, intranetů a při vytváření prototypů webových stránek [27]. Kladem frameworku Bootstrap je také jeho široká komunita, která stojí za jeho vývojem. [13] 7.3 Semantic UI Semantic UI 3 je mladý framework představený v roce Oproti jiným frameworkům zaujme líbivým vzhledem předpřipravených komponent a důrazem na sémantické pojmenování. Komponenty jsou pojmenovávány přirozenými názvy tak, aby zdrojový kód byl pro vývojáře lépe čitelný. Framework nabízí plně flexibilní mřížku a podobnou sadu komponent jako framework Bootstrap. [7]

39 Kapitola 8 Implementace responzivního webu Pro praktickou část práce jsem zvolil implementaci responzivního rozhraní webové sbírky citátů Citáty.net 1. Stránky jsou primárně určeny jako zdroj inspirace pro čtenáře, umožňují procházení citátů podle jejich autorů, tematického zařazení a oblíbenosti. Mimo citáty web obsahuje sbírku přísloví, Murphyho zákonů a umožňuje čtenářům přidávat jejich vlastní myšlenky do sekce myšlenky čtenářů. Web jsem původně založil v roce 2007 a do jeho současné podoby několikrát přepracoval. V roce 2013 jsem web lokalizoval do dalších jazykových mutací. Návštěvnost české verze je kolem 5500 unikátních návštěvníků denně a web se tak řadí mezi nejnavštěvovanějších české weby o citátech [9]. Důvodem vývoje responzivního rozhraní byly zvyšující se počty přístupů a nedostatečná použitelnost webu na mobilních zařízeních. Trend vývoje návštěvnosti z mobilních zařízení je viditelný na obrázku 8.1. Za poslední dva roky podíl navštívených stránek z mobilních zařízení několikanásobně vzrostl. Za měsíc duben 2014 byl celkový počet navštívených stránek z mobilních zařízení (tablety a chytré telefony) 29 %. Pro splnění potřeb návštěvníků přicházejících na web z mobilních zařízení jsem zvažoval mezi vytvořením odlišných samostatných verzí pro osobní počítače a mobilní zařízení, a vytvořením jednotné responzivní verze. Samostatná mobilní verze vzhledem ke grafické jednoduchosti webu a převážně textovému obsahu nepřináší výraznější výhody pro uživatele. Responzivní verzi vzhledu jsem zvolil z důvodu předpokládaných nižších nákladů na vytvoření, udržovatelnost a další rozvoj webu

40 8. Implementace responzivního webu Obrázek 8.1: Vývoj počtu zobrazených stránek na webu Citáty.net podle typů zařízení. Zdrojem dat je nástroj Google Analytics 8.1 Nedostatky předchozího návrhu Cílem nového návrhu bylo zlepšit použitelnost webu na mobilních zařízeních. Hlavní nedostatky webu na mobilních zařízeních jsou viditelné na obrázku 8.2, který zobrazuje původní verzi webu zobrazenou na mobilním zařízení. Trpí základními nedostatky statického rozvržení, které není přizpůsobené mobilním zařízením. Navigační prvky mají malou velikost a bez přiblížení jsou těžko čitelné a použitelné. Čitelnost citátů zlepšuje použitý prohlížeč, který automaticky zvětšuje písmo textových bloků. Tlačítka akcí pro hodnocení citátu a sdílení jsou zobrazena po najetí kurzoru nad citát. Tento způsob je pro mobilní zařízení s dotykovou obrazovkou nevhodný z důvodu chybějícího kurzoru. Předpokládám, že zlepšení použitelnosti webu by se následně u přístupů z mobilních zařízení mělo projevit na sledovaných KPI 2 : Snížit míru okamžitého opuštění Zvýšit míru interakce uživatele se webem - sdílení a hodnocení citátů Zvýšit počet shlédnutých stránek za jednu návštěvu 2. Key performace indicator 32

41 8. Implementace responzivního webu Obrázek 8.2: Ukázka zobrazení původní verze webu Citáty.net na mobilním zařízení 8.2 Typy návštěvníků Na základě analýzy zdrojů návštěvnosti a vstupních stránek jsem rozdělil návštěvníky do tří skupin na hledající, zvědavé a nadšené. Tyto skupiny se od sebe vzájemně liší v motivaci, proč web navštěvují. Určení typů návštěvníků mi pomohlo validovat aktuální informační architekturu webu. Podle jednotlivých typů jsem mohl uzpůsobit obsah, aby lépe odpovídal požadavkům návštěvníků a byl tak pro ně atraktivnější Hledající návštěvníci Hledající návštěvníci vyhledávají citáty na konkrétní téma nebo od konkrétního autora. Tito návštěvníci přicházejí primárně přímo z vyhledávačů. Jako vyhledávací frázi používají například Albert Einstein citáty nebo citáty o lásce. 33

42 8. Implementace responzivního webu Protože tito uživatelé přesně specifikovali, co hledají, měl by jim web hledané informace přehledně poskytnout. Aby nedošlo k odchodu návštěvníka, hned potom co hledané informace získá, měl by ho web zaujmout dalším souvisejícím obsahem. Doplňkový obsah návštěvníka láká, aby na stránkách zůstal déle a navštívil více stránek Zvědaví návštěvníci Zvědaví návštěvníci přichází ze sociálních sítí nebo z odkazu na jiných stránkách. Může se jednat o nové návštěvníky, kteří netuší, co jim web může nabídnout. Chtějí se pobavit nebo dozvědět zajímavé informace. Protože tito návštěvníci narazili na web náhodou, nemají jasnou představu, co na webu mohou nalézt. Musí se na stránkách rychle zorientovat a najít obsah, který je zaujme. V opačném případě ze stránky odchází. K rychlé orientaci by jim měla pomoci přehledně vytvořená navigace a struktura obsahu Nadšení návštěvníci Nadšení návštěvníci mají rádi citáty a dlouhodobě se o ně zajímají. Na webu hledají inspiraci a moudré myšlenky, které by jim zpříjemnily volné chvilky nebo pomohly v jejich aktuálních životních situacích. Tito uživatelé přichází rovnou na hlavní stránku webu buď přímým zadáním adresy weby, nebo přes vyhledávače, kde použijí obecnou frázi jako například citáty, slavné výroky. Těmto uživatelům by web měl nabídnout možnosti jak jednoduše objevovat zajímavý a kvalitní obsah. 8.3 Informační architektura Na základě definice typů návštěvníků jsem provedl validaci aktuální informační architektury. Výsledkem je její celkové zjednodušení. Původní web byl rozdělen na sekce citáty, přísloví, Murphyho zákony a myšlenky čtenářů. Sekce nebyly na webu striktně oddělené a vzájemně se překrývaly. Nedůsledné oddělení bylo patrné zvláště v sekundární navigaci a doplňkovém obsahu, který mířil z ostatních sekcí do sekce citátů. Jelikož hlavní tématem webu jsou citáty a návštěvnost ostatních sekcí byla minoritní, došlo v nové verzi k odstranění ostatních sekcí. 34

43 8. Implementace responzivního webu Výsledná architektura je znázorněna na diagramu 8.3, kde jsou zachyceny jednotlivé stránky a jejich logická návaznost. Složky detail autora a detail tématu představují zobecnění jednotlivých stránek jako například citáty od Jana Husa nebo citáty o životu. Obrázek 8.3: Informační architektura 8.4 Rozvržení vzhledu a jednotlivých bloků Při návrhu nového responzivního rozvržení jsem výrazně přepracoval rozložení jednotlivých bloků na stránce. Rozložení v původní a responzivní verzi je znázorněno pomocí drátěných modelů na obrázku 8.4. Pro lepší vizualizaci rozložení jsou jednotlivé typy bloků barevně odlišeny. Na původní verzi webu je použito statické rozvržení o neměnné šířce 1070 pixelů. Obsah je uspořádán do dvou sloupců, levý obsahuje 35

44 8. Implementace responzivního webu navigační elementy a doplňkový obsah. Pravý obsahuje hlavní obsah webu. Nejvýraznější změnou responzivní verze oproti původní je nahrazení dvousloupcového uspořádání bloků jednosloupcovým. Jednosloupcové uspořádání jsem zvolil z důvodu zpřehlednění vzhledu a upřednostnění hlavní obsahu oproti doplňkovému obsahu a navigačním elementům. Uživatel by tak měl přehledněji získat informace, kvůli kterým na web přišel. Aby jednosloupcové uspořádání působilo vzhledem ke krátké textové délce citátů konzistentně, zvolil jsem pro zařízení s šířkou zobrazovací plochy větší než 768 pixelů statické rozvržení, které má šířku 768 pixelů. Proto může být na osobních počítačích i tabletech použito stejné rozložení. Na zařízeních s menší zobrazovací plochou se rozvržení přizpůsobuje pomocí vzoru přirozené zužování, až do minimální šířky 320 pixelů. Obrázek 8.4: Rozdíly v rozvržení jednotlivých bloků na původní a responzivní verzi webu 36

45 8. Implementace responzivního webu (a) Stará verze (b) Nová verze Obrázek 8.5: Rozdíl hlavičky mezi původní a responzivní verzí webu Hlavička a patička Obrázek 8.5 porovnává původní a responzivní verzi hlavičky webu. Hlavička byla v nové verzi výrazně zjednodušena a zmenšena, tak aby se obsah mohl posunout na stránce výše. Hlavička je totožná pro osobní počítače i mobilní zařízení, obsahuje logo stránek, název a vyhledávání. Samotnému zjednodušení přispělo i odstranění sekcí přísloví, murphyho zákony a myšlenky čtenářů. Patička by měla poskytovat dodatečné informace o webu. Na osobních počítačích obsahuje odkazy na profily na sociálních sítích, odkazy na dodatečné informace o projektu a odkazy na jazykové mutace. Oproti tomu je pro mobilní zařízení použita minimalistická verze patičky, která obsahuje pouze odkaz na hlavní stránku a kotvu pro přechod zpět do horní části stránky. Po čas testování je nasazena patička převzatá z předchozí verze webu. Před její výměnou čekám na schválení změn od partnerských webů Navigační prvky Hlavní navigace zobrazená na obrázku 8.6 obsahuje odkazy do hlavních sekcí webu. Tedy na sekce citáty, autoři, témata a náhodný citát. Navigační odkazy jsou doplněny výraznými ikonami, které podtrhují jejich význam. Hlavní navigace je zobrazena i v mobilní verzi, jediným rozdílem je zarovnání textu pod ikony. Sekundární navigace je použita pouze v některých sekcích a obsahuje odkazy vedoucí ke specifickým stránkám konkrétní sekce. Vzhled sekundární navigace je na osobních počítačích i mobilních zařízeních 37

46 8. Implementace responzivního webu totožný. Obrázek 8.6: Zobrazení navigace na počítači a mobilním telefonu Komponenty obsahu Obsah na webu je možné rozdělit na prostor pro hlavní a pro doplňkový obsah. Pro zaplnění je využíváno několika unifikovaných komponent citát, ukázka autora, seznam autorů a seznam témat. Vzhledem k zaměření webu je hlavní obsah nejčastěji vyplňován citáty. Ostatní komponenty jsou použité v doplňkovém obsahu, aby uživateli poskytly související obsah k hlavnímu obsahu. Nejdůležitější komponentou webu je komponenta citát, protože každý citát na webu je zobrazen pomocí ní. Obsahuje samotný citát, jméno autora, jeho fotku a základní statistické údaje. Důležitou součástí komponenty jsou tlačítka akcí. Pomocí nich může uživatel ohodnotit citát a sdílet ho. Vzhled komponenty se liší podle velikosti zobrazovací plochy zařízení. Na obrázku 8.7 je pro zařízení s velkou zobrazovací plochou, kde se tlačítka akcí objeví až po najetí myší nad citát. Pro dotyková zařízení je tato událost nevhodná [33], proto jsou v mobilní verzi tlačítka akcí zobrazena přímo pod citátem. 38

47 8. Implementace responzivního webu (a) Citát na osobním počítači (b) Citát na mobilním zařízení Obrázek 8.7: Zobrazení citátu Ostatní komponenty ukázka autora, seznam autorů a seznam témat jsou použité převážně pro doplňkový obsah. Jejich vzhled je zobrazen na obrázku 8.8. Vzhledem k jednoduchosti těchto komponent je možné je bez problému použít pro všechny typy zařízení Stránkování V nové verzi webu Citáty.net došlo k výraznému zjednodušení stránkování seznamů viz obrázek 8.9. V původní verzi bylo použito stránkování umožňující přechod na několik předchozích a následujících stránek, navíc doplněné o velké tlačítko pro přechod na další stránku. Tento druh stránkování není vhodný pro malá dotyková zařízení, protože odkazy na jednotlivé stránky jsou malé a obtížně se vybírají. Na základě výsledků z analytických nástrojů většina návštěvníků přechází pouze na následující stránku pomocí odkazu s číslem. Velké tlačítko pro přechod není téměř používané. Proto jsem zvolil zjednodušenou verzi stránkování, která poskytuje pouze možnost pohybu na předchozí a následující stránku. 39

48 8. Implementace responzivního webu (a) Ukázka autora (b) Seznam autorů (c) Seznam témat Obrázek 8.8: Komponenty pro doplňkový obsah (a) Původní verze (b) Responzivní verze Obrázek 8.9: Změny stránkování seznamů 40

49 8. Implementace responzivního webu Inzerce Finančním zdrojem webu Citáty.net je inzertní činnost. Na web jsou umístěny inzertní plochy zobrazující textovou i bannerovou reklamu pomocí služby Google Adsense 3. Jedná se o službu, která zprostředkovává reklamu pro majitele stránek. V responzivní verzi webu je využito reklamních ploch, které se přizpůsobují velikosti volného prostoru. Podle velikosti služba automaticky vybírá nejvhodnější reklamní formáty. Vzhledem k rozvržení webu jsou nejčastěji využívány reklamní jednotky o velikostech pixelů a pixelů. Na mobilních zařízeních jsou nejčastěji využívány menší jednotky velikosti pixelů a pixelů. V responzivní verzi webu jsou využity tři reklamní prostory umístěné v horní části stránky, pod stránkováním a uvnitř hlavního obsahového bloku, pokud obsahuje výpis citátů. 8.5 Obsah stránek Obsah stránek je složený z jednotlivých bloků a komponent popsaných v předchozí sekci 8.4. Tato sekce popisuje kompozici bloků na nejdůležitějších stránkách webu Citáty.net. Výběr komponent a jejich obsahu odpovídá profilům návštěvníků, které byly popsány v sekci 8.2. Z důvodu přehlednosti jsou snímky obrazovky jednotlivých stránek uvedeny v příloze. Hlavní strana by měla obsahovat kvalitní a ověřený obsah, aby návštěvník mohl jednoduše přejít k nejoblíbenějším sekcím webu. Proto v horní části stránky je náhodně vybraný autor z prvních 30 nejlépe hodnocených autorů, výpis pěti nejlépe hodnocených autorů a výpis pěti nejoblíbenějších témat. Dále následuje výpis šestnácti naposledy hodnocených citátů, aby se na hlavní straně obměňovaly citáty, které se návštěvníkům líbí. Důležité jsou stránky vypisující citáty, na které návštěvníci přicházejí přímo z vyhledávačů. Jedná se stránky detail autora (např. Seneca citáty, John Lennon citáty) a detail tématu (např. citáty o lásce, citáty o životě). Protože na tyto stránky velká část návštěvníků přichází z vyhledávačů, je na nich zobrazován související obsah, který by mohl návštěvníka

50 8. Implementace responzivního webu zajímat. Proto je pod výpisem citátů zobrazeno pět souvisejících témat a dvě upoutávky na autory, kteří se objevují ve výpisu citátů. 8.6 Implementace Pro implementaci webového rozhraní jsem použil framework Twitter Bootstrap. Návrh jsem převedl do HTML a napojil na serverovou část webu. Ta je napsána pomocí frameworku Django, který využívá programovacího jazyka Python. V serverové části jsem provedl pouze menší změny, většinu kódu jsem použil v nezměněné podobě. Pro provedení A/B testování jsem implementoval nový modul, který nově příchozím návštěvníkům zobrazí buď původní verzi webu, nebo novou responzivní. Po celou dobu návštěvy je zobrazena vybraná verze, tak aby nedocházelo k zmatení uživatelů. 42

51 Kapitola 9 Testování Pro otestování vytvořené responzivní verze webu jsem využil několika druhům testování. Cílem bylo ověřit, že vytvořený web je z pohledu použitelnosti dobře navržený. Postupně jsem provedl tři metody testování. První metodou bylo testování na různých mobilních zařízeních tak, abych odhalil nedostatky ve vzhledu a chování webu na různých zařízeních. Druhou metodou bylo uživatelské testování, které mělo odhalit nedostatky v použitelnosti webu na mobilních zařízeních. Poslední metodou bylo A/B testování, které mělo za cíl kvantitativně porovnat rozdíly v chování uživatelů v původní a responzivní variantě webu. Nedostatky nalezené během testování a související doporučení shrnuji v sekci Testování na různých mobilních zařízeních Abych minimalizoval problémy s přizpůsobením různým zařízením, průběžně jsem při vývoji testoval zobrazení webu při různých velikostech okna prohlížeče. Taktéž jsem využíval svého mobilního telefonu. Po dokončení nové responzivní varianty webu jsem otestoval vzhled a chování webu na různých zobrazovacích zařízeních. Cílem bylo objevit případné nedostatky v zobrazovaných grafických elementů a chování interakčních prvků. Pro testování jsem zvolil dva zástupce vyšších modelových řad mobilních telefonů Apple iphone 5 a Samsung Galaxy III. Jako zástupce nižších modelových řad jsem zvolil Samsung S5830 Galaxy Ace. Při testování vzhledu nebyly objeveny podstatnější rozdíly. Opravil jsem sekundární navigaci v sekci Citáty, která se na Samsung S5830 Galaxy Ace zalamovala na dva řádky. Při testování funkcionality byl odhalen rozdíl v chování telefonů s operačním systémem ios (iphone) a Android (oba Samsungy). Rozdíl je ve zpracování událostí vyvolaných 43

52 9. Testování při najetí myší. Na systému ios jsou tyto akce vyvolány po klepnutí, na systému Android jsou ignorovány. Vzhledem k tomu, že k akčním tlačítkům u citátu byl přidán informační box zobrazovaný po najetí myší, bylo na iphone 5 nutné pro přidání citátů do oblíbených poklepat. Protože toto chování není pro webové stránky typické, informační boxy jsem odstranil, aby bylo na mobilních zařízeních zachováno jednotné chování napříč operačními systémy. 9.2 Uživatelské testování Jedním ze způsobů odhalení nedostatků nově navrhnutého rozhraní je provedení uživatelského testování. Uživatelské testování bylo u webu Citáty.net provedeno pouze na mobilní verzi a jeho primárním cílem bylo získání podkladů pro další úpravy webu. Sekundárním cílem bylo porovnat rozdíly v použitelnosti mezi původní a responzivní variantou webu a zjistit, kterou účastníci testování preferují. Při testování byli účastníci požádání o provedení stejných scénářů na obou verzích a zodpovězení doplňkových otázek. Zvolené scénáře a doplňkové otázky odráží reálné použití a zkoumají použitelnost nejdůležitějších ovládacích prvků webu. Pro objektivitu byly verze prezentovány jako rovnocenné, původní jsem označil jako verzi A, responzivní jako verzi B. Scénář 1: Zobrazte citáty o přátelství a na druhé straně označte jeden z citátů jako oblíbený. Scénář 2: Přejděte na hlavní stránku webu. Scénář 3: Zobrazte citáty od Jana Husa a jeden z jeho citátů sdílejte na sociální síti Facebook. Doplňková otázka 1: Můžete popsat co ve verzi B podle vás znamenají číselné údaje a ikony u citátů? Doplňková otázka 2: Můžete určit, kterou z verzí byste chtěli používat na svém mobilním telefonu? Podmínky a průběh Pro testování bylo zvoleno klidné místo bez rušivých okolních vlivů. Účastníci pracovali na svých vlastních mobilních zařízeních, tudíž byli 44

53 9. Testování obeznámeni s jejich ovládáním. V roli moderátora a pozorovatele jsem vystupoval sám. Délka jednoho sezení se pohybovala v rozmezí mezi 15 a 20 minutami. Každý účastník byl po příchodu přivítán, seznámen s průběhem testování a testovacím záměrem. Bylo zdůrazněno, že cílem testování je zjišťování chyb v použitelnosti webové stránky, nikoliv testování samotného účastníka. Poté byl každý účastník požádán o použití svého mobilního telefonu pro přechod na rozcestník 1, kde se nacházely odkazy na obě testované verze. Každý účastník provedl sadu scénářů nejprve na jedné, poté na druhé verzi. Pořadí, v kterém byly verze účastníkům předkládány se střídalo. Po provedení scénářů na obou verzích byly položeny doplňující otázky. Poté byl dán účastníkům prostor pro vyjádření dalších komentářů a položení dodatečných otázek. Po ukončení této fáze bylo účastníkům poděkováno a následně bylo sezení ukončeno Výsledky Testováním se celkem zúčastnilo 5 účastníků ve věkové skupině 20 až 30 let. Mezi účastníky testování byli 3 muži a 2 ženy. Rozdíl při testování mezi muži a ženami nebyl patrný. Účastníci při testování používali svůj vlastní mobilní telefon, s jeho ovládání měli zkušenosti. Všichni účastníci uvedli, že svůj mobilní telefon používají také pro procházení internetu. Kompletní zápis scénářů uživatelů je v příloze B. Při vyhodnocování uživatelského testování jsem se primárně soustředil na nedostatky responzivně navrženého rozhraní. Přesto chci zmínit nedostatky, které účastníky testování trápily i v původní verzi. Tyto nedostatky obecně vyplývají z použitého statického rozvržení webu a využívání pozice kurzoru pro zobrazování tlačítek pro hodnocení a sdílení citátů. Účastníci si stěžovali na malou velikost písma a nutnost přibližování. S provedením scénářů, které obsahovaly hodnocení a sdílení citátů, měli problém 2 účastníci. Pozitivním výsledkem testování, je že čtyři účastníci hodnotili responzivní verzi stránek jako tu, kterou by na mobilním telefonu chtěli používat. Jedna účastnice uvedla, že původní verze je pro ni z pohledu přehlednosti a odlišení reklam od obsahu přijatelnější, nicméně nová verze se jí lépe ovládá

54 9. Testování Nakonec bych chtěl uvést i několik chyb, kterých jsem se při testování dopustil. Při testování jsem byl současně v roli pozorovatele a moderátora. Několikrát jsem měl pocit, že nestíhám zaznamenat všechny detaily. Pro příště bych doporučoval k testování pozvat dalšího pozorovatele nebo sezení nahrávat. Původně jsem chtěl, aby účastníci na stupnici 1-5 hodnotili použitelnost a přehlednost každé verze. Toto ohodnocování působilo účastníkům problémy a raději místo odpovědi odbočovali k dalším komentářům. Proto jsem po několika neúspěších toto hodnocení od účastníků nepožadoval a spokojil se s vyjádřením, kterou verzi by raději používali. 9.3 A/B testování Použitelnost webu byla také analyzována pomocí A/B testování. Metoda spočívá ve vytvoření několika testovacích variant, které se za běžného provozu webu předkládají odděleným skupinám uživatelů [15]. Na základě získaných statistických výsledků je vybrána varianta, která lépe splňuje stanovené cíle. Při testování na webu Citáty.net byly porovnávány rozdíly v chování uživatelů na původní a responzivní verzi webu. Předpokladem bylo, že nová verze bude mít na mobilních zařízeních nižší míru okamžitého opuštění 2, vyšší průměrný počet shlédnutých stránek za jednu návštěvu 3 a návštěvníci budou více hodnotit a sdílet citáty. Uvedené výsledky jsou získané z testování probíhajícího po dobu 14 dní, na vzorku téměř 80 tisíc návštěv webu. Pro analýzu výsledků byl použit nástroj Google Analytics 4. Výsledky testování jsou v tabulce 9.1. Za nejdůležitější výsledky z tohoto testování považuji vyšší počet shlédnutých stránek a provedených událostí (hodnocení a sdílení citátů) u responzivní verze oproti verzi původní. Nárůst je zvláště patrný u mobilních zařízení. Z toho vyvozuji, že se uživatelům používajících mobilní zařízení s webem lépe pracuje. Dále je možné z výsledků vyčíst menší rozdíly v míře opuštění webu. 2. Míra okamžitého opuštění je procentuální podíl návštěv jen jedné stránky (tj. návštěv, při kterých uživatel opustil web už na vstupní stránce, aniž by uskutečnil interakci) 3. Průměrný počet stránek na návštěvu je průměrný počet stránek zobrazených během návštěvy. Započítávají se i opakovaná zobrazení jedné stránky

55 Původní verze 9. Testování Responzivní verze Metrika PC Mobil PC Mobil Počet návštěv Míra opuštění 43,97 % 51,81 % 45,04 % 49,51 % Počet stránek na 1 návštěvu Počet událostí na 1 návštěvu 4,55 3,69 4,77 4,21 2,32 1,59 2,41 2,87 Tabulka 9.1: KPI naměřené během A/B testování. Data jsou získána z nástroje Google Analytics. Rozdíly nejsou významné, přičítám je faktu, že uživatelé nejsou zvyklí na nové rozvržení a hledají původní variantu webu. 9.4 Doporučení změn Na základě nedostatků nalezených při uživatelském a A/B testování jsem sestavil seznam změn, které doporučuji na webu provést Nejednoznačná tlačítka akcí Byl pozorován problém s nejednoznačností tlačítek akcí u citátu. Někteří z respondentů uváděli, že jim tyto prvky nepřipomínají tlačítka. Ikona pro sdílení nebyla pro několik účastníků jednoznačná. Někteří ji neznali nebo očekávali jinou funkcionalitu. Doporučoval bych proto více zdůraznit, že se jedná o tlačítka akcí. Dále doporučuji vybrat jinou ikonu pro sdílení nebo tu současnou doplnit textovým popisem Nejasný význam statistických údajů u autora Účastníkům nebyl jasný význam statistických údajů u autora ukázaných na obrázku 9.1. Převážně si mysleli, že se údaje vztahují k citátu. Jeden z účastníků přímo vyjádřil, že by tyto údaje nemusely být přítomné. Několik účastníků také uvedlo, že by číselné údaje měly být uvedeny 47

56 9. Testování podle českých typografických zásad. Aby nedocházelo ke zbytečnému matení uživatele, doporučoval bych tyto údaje odstranit. Obrázek 9.1: Zvýrazněná oblast označuje pro uživatele nejasné statistické údaje vyjadřující počet citátů a oblíbenost autora Nevýrazné stránkování Účastníci uživatelského testování ve výpisu citátů u responzivní verze hledali tlačítko pro přechod na další stránku. Nevýrazné tlačítko pro přechod na další stránku naznačují i výsledky z A/B testování. Vyplývá z nich, že u původní varianty přechází z první na druhou stránku více uživatelů, než u responzivní verze. Fakt, že uživatelé nenaleznou tlačítko pro přechod na další stránku, může u responzivní verze snižovat počet navštívených stránek za 1 návštěvu. Doporučuji tlačítko pro přechod na další stránku zvýraznit, tak aby bylo pro uživatele zřetelné a nebylo zastíněno textovou reklamou, jak je ukázáno na obrázku 9.2. Obrázek 9.2: Ukázka zastínění tlačítka pro přechod na další stránku textovou reklamou Výraznější tlačítko pro vyhledávání Někteří účastníci uživatelského testování si na první pohled nevšimli tlačítka pro vyhledávání. I z výsledků A/B testování vyplývá, že vy- 48

57 9. Testování hledávání lidé v responzivní verzi využívali o polovinu méně než ve verzi původní. Doporučoval bych zvýraznit tlačítko pro vyhledávání. Na mobilních zařízeních zvolit v jeho okolí více volného prostoru, na počítačích zobrazit místo ikony lupy rovnou textové pole pro vložení hledaného textu Přehlednější výsledky vyhledávání Několik účastníků ve vyhledávání přehlédlo informační box obsahující odkaz přímo na autora. Vzhled informačního boxu je na obrázku 9.3. Doporučoval bych zvýraznit výsledky vyhledávání, případně použít našeptávač, který by umožnil uživatelům přímo přejít na hledaného autora. Obrázek 9.3: Nevýrazný infobox s přímým odkazem na autora při vyhledávání fráze Jan Hus Seznam autorů podle abecedy Několik uživatelů na stránce autorů podle abecedy rolovalo na konec stránky, aby našli toho správného autora. Výpis, ale obsahuje pouze autory s příjmením od písmene A nikoliv další autory. Účastníci si to uvědomili až na konci stránky a byli nuceni rolovat zpět. Doporučoval bych proto při přechodu implicitně nezobrazovat autory od písmena A, ale nechat uživatele vybrat požadované počáteční písmeno. Případně na konec seznamu přidat menu pro výběr počátečního písmene příjmení autorů. Dále velikost písma a bílého prostoru ve výpisu autorů podle abecedy neodpovídá požadavkům dotykových zařízení. Uživatelé si stěžovali, že 49

58 9. Testování jména autorů jsou malá a špatně se vybírají. Doporučuji proto zvětšit písmo a bílý prostor mezi jednotlivými položkami výpisu Odlišení reklamy od obsahu Několik uživatelů negativně reagovalo na přítomnost reklam, docházelo i k záměně ovládacích prvků stránky s reklamou. Doporučoval bych proto reklamu vhodně odlišit. 50

59 Kapitola 10 Závěr Práce splňuje cíle, které byly vytyčeny v zadání. V teoretické části jsou popsány základní rozdíly jednotlivých typů zařízení, které se v dnešní době používají k procházení webových stránek. Představeny jsou možnosti rozvržení webových rozhraní a vhodnost jejich použití pro popisované typy zařízení. Detailněji jsou vysvětleny principy tvorby responzivních webových rozhraní. V práci jsou popsány základní používané vzory pro dispoziční úpravu rozložení webu a zobrazení navigace. Zmiňovány jsou také předpřipravené frameworky pro tvorbu responzivních webových rozhraní. Praktická část práce je demonstrována na již existujícím webu Citáty.net. Nejprve jsou zmíněny nedostatky v použitelnosti stávajícího webu na mobilních zařízeních. Na základě definice typů návštěvníků je validována informační architektura. Je navrženo nové responzivní rozhraní, které se přizpůsobuje různým typům zobrazovacích zařízení. Představené rozhraní respektuje principy návrhu popsané v této práci. Výsledný návrh je implementován a podroben třem typům testování, konkrétně testování na různých mobilních zařízeních, uživatelskému testování a A/B testování. Z testování vyplývá, že rozhraní je dobře použitelné na různých typech zobrazovacích zařízení. Na závěr jsou shrnuta doporučení pro zlepšení navrženého rozhraní vyplývající z poznatků získaných v průběhu testování. 51

60 Literatura [1] 2012 Mobile User Survey [online]. Keynote, [cit ]. Dostupné z: Mobile-User-Survey.pdf. [2] Adaptive and Fluid Approach in Responsive Web Design [online]. 1stwebdesigner. [cit ]. Dostupné z: [3] Consumers Increasingly Using Mobile Devices as Their Default Gateway to the Internet [online]. International Data Corporation, [cit ]. Dostupné z: jsp?containerid=prus [4] Global mobile statistics 2014 Part A: Mobile subscribers; handset market share; mobile operators [online]. mobithinking, [cit ]. Dostupné z: [5] The picture Element [online]. World Wide Web Consortium. [cit ]. Dostupné z: [6] Pokrytí 3G signálem podle ČTÚ [online]. ADSL.cz, [cit ]. Dostupné z: [7] Introduction [online]. Semantic UI. [cit ]. Dostupné z: [8] Internet Global Statistics [online]. StatCounter Global Stats, Dostupné z: 52

61 10. Závěr [9] Audit návštěvnosti webových stránek [online]. Toplist. [cit ]. Dostupné z: cit%e1ty&a=s. [10] Using mobile Web-based research to deliver insights into the mobile-only generation: interview with On Device Research [online]. mobithinking, [cit ]. Dostupné z: http: //mobithinking.com/mobile-research-casestudy. [11] Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification [online]. World Wide Web Consortium, [cit ]. Dostupné z: [12] Media Queries [online]. World Wide Web Consortium, [cit ]. Dostupné z: mediaqueries/#media1. [13] About [online]. Bootstrap. [cit ]. Dostupné z: http: //getbootstrap.com/about/. [14] History of Foundation [online]. Foundation. [cit ]. Dostupné z: [15] A/B testování [online]. Wikipedia. [cit ]. Dostupné z: [16] Display resolution [online]. Wikipedia. [cit ]. Dostupné z: [17] DPI [online]. Wikipedia. [cit ]. Dostupné z: wikipedia.org/wiki/dpi. [18] Tablet computer [online]. Wikipedia. [cit ]. Dostupné z: [19] COUFAL, J. Design webového rozhraní pro různé typy zobrazovacích zařízení [online]. Diplomová práce. Masarykova univerzita, Fakulta informatiky, [cit ]. Dostupné z: 53

62 10. Závěr [20] FROST, B. Complex Navigation Patterns for Responsive Design [online] [cit ]. Dostupné z: [21] FROST, B. Responsive navigation patterns [online] [cit ]. Dostupné z: web/responsive-nav-patterns/. [22] KELNAR, M. Responsivní webdesign komplexně [online]. [cit ]. Dostupné z: responsivni-webdesign-komplexne/. [23] KNIGHT, K. Fixed vs. Fluid vs. Elastic Layout: What s The Right One For You? [online] [cit ]. Dostupné z: [24] MARCOTTE, E. Responsive web design. New York : A Book Apart, ISBN [25] MARCOTTE, E. Responsive Web Design [online] Dostupné z: [26] MCGRANE, K. Content Strategy For Mobile. New York : A Book Apart, ISBN [27] MICHÁLEK, M. Kdy vám Bootstrap pomůže a kdy ne? [online] [cit ]. Dostupné z: blog/11-bootstrap-pomuze. [28] MOORE, J. Responsible Considerations For Responsive Web Design [online] [cit ]. Dostupné z: [29] SANDQUIST, C. Responsive Web Design and Web Analytics [online] [cit ]. Dostupné z: http: //blogs.adobe.com/digitalmarketing/mobile/responsiveweb-design-and-web-analytics/. 54

63 10. Závěr [30] SMITH, A. Cell Internet Use 2012 [online] [cit ]. Dostupné z: cell-internet-use-2012/. [31] STRÁNSKÝ, J. Tvorba přizpůsobivých webových rozhraní [online]. Diplomová práce. Masarykova univerzita, Fakulta informatiky, [cit ]. Dostupné z: fi_m/. [32] WROBLEWSKI, L. Multi-Device Layout Patterns [online] [cit ]. Dostupné z: asp?1514. [33] WROBLEWSKI, L. Mobile First. New York : A Book Apart, ISBN [34] ZICKUHR, K. SMITH, A. Digital differences [online] [cit ]. Dostupné z: /04/13/digital-differences/. 55

64 Příloha A Obrazová příloha 56

65 A. Obrazová příloha Obrázek A.1: Hlavní stránka v původní verzi 57

66 A. Obrazová příloha Obrázek A.2: Stránka autora v původní verzi 58

67 A. Obrazová příloha Obrázek A.3: Hlavní stránka v responzivní verzi 59

68 A. Obrazová příloha Obrázek A.4: Stránka autora v responzivní verzi 60

69 A. Obrazová příloha Obrázek A.5: Hlavní stránka v responzivní verzi zobrazená na mobilním telefonu 61