Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Katedra informačních technologií
Studijní program: Aplikovaná informatika Obor: Informační systémy a technologie
Přístupy k řešení mobilních webových aplikací DIPLOMOVÁ PRÁCE
Student
:
Bc. Tomáš Nadrchal
Vedoucí :
Ing. Zuzana Šedivá, Ph.D.
Oponent :
doc. Ing. Alena Buchalcevová, Ph.D.
2012
PROHLÁŠENÍ
Prohlašuji, že jsem diplomovou práci na téma „Přístupy k řešení mobilních webových aplikací“ zpracoval samostatně a že jsem uvedl všechny použité prameny a literaturu, ze kterých jsem čerpal.
V Praze 12. 12. 2012
................................
Bc. Tomáš Nadrchal
PODĚKOVÁNÍ Paní Ing. Zuzaně Šedivé, Ph.D., vedoucí mé diplomové práce, za pomoc s výběrem tématu, ochotu, trpělivost, poskytnuté cenné rady a v neposlední řadě také za vstřícnost, se kterou do spolupráce se mnou vstupovala.
Své rodině a blízkým, za podporu a pochopení během měsíců, kdy tato práce vznikala.
Abstrakt Tato diplomová práce se zaměřuje na přístupy k řešení mobilních webových aplikací. Autor se v ní zaměřuje na rozdělení mobilních zařízení a popis jejich vlastností a specifik dotykového ovládání. Část práce je věnována mobilním operačním
systémům,
jejich
charakteristice
a
také
jednotlivým
mobilním
internetovým prohlížečům. Následně je prostor poskytnut psychologii chování uživatelů mobilních zařízení a očekáváním uživatelů od mobilních webových stránek. Podstatná část práce je věnována specifikům vývoje webového designu pro mobilní zařízení, jeho rozdílům proti klasickému webovému designu, a technikám vývoje – responsivnímu webovému designu a myšlence Mobile First. V praktické části autor analyzuje multiplatformní přístup k webovým stránkám železničních dopravců České dráhy, LEO Express a RegioJet, kdy je pomocí analýzy na bázi multikriteriálního
hodnocení
testován
přístup
z chytrých
telefonů,
tabletů
a desktopů. K testování autor využívá webový emulátor simulující přístup z různých verzí operačních systémů a prohlížečů. Cílem analýzy je vytvoření řady doporučení k lepší optimalizaci pro přístup z mobilních zařízení.
Klíčová slova Mobile First, Responsivní webový design, webdesign, mobilní zařízení.
Abstract This master thesis focuses on approaches to solving mobile web applications. Author focuses on the classification of mobile devices and the description of their attributes and specifications of touch screen controls. Part of the work is devoted to the characteristics of mobile operating systems and of mobile web browsers. One chapter is aimed on the psychology of user behaviour and expectations of mobile users from mobile website. A significant part of the work is paid to specifications of the development of web design for mobile devices and the differences to classical web design. In addition, the author describes the Responsive Web Design and the idea of Mobile First. In the practical part, the author analyzes the cross platform access to websites of Czech railway transport companies – České dráhy, LEO Express and RegioJet. The access from smartphones, tablets and desktops is tested using analysis based on multi-criteria evaluation. To test the author uses a web emulator to simulate different versions of operating systems and web browsers. The aim of the analysis is to create a series of recommendations for better optimization of access from mobile devices.
Keywords Mobile First, Responsive Web Design, web design, mobile devices.
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
Obsah 1.
2.
Úvod ............................................................................................................................................... 9 1.1.
Cíle práce ............................................................................................................................... 9
1.2.
Metoda dosažení cíle ........................................................................................................... 9
1.3.
Předpoklady a omezení práce .......................................................................................... 10
1.4.
Struktura práce, .................................................................................................................. 10
1.5.
Výstupy práce a očekávané přínosy ................................................................................ 11
1.6.
Rešerše zdrojů ..................................................................................................................... 12
Typy mobilních zařízení a jejich specifika .............................................................................. 14 2.1.
Mobilní telefon, chytrý telefon ......................................................................................... 14
2.2.
Tablet Computer................................................................................................................. 15
2.2.1.
3.
2.3.
Notebook ............................................................................................................................. 19
2.4.
Netbook ............................................................................................................................... 19
2.5.
Srovnání mobilních platforem .......................................................................................... 19
Srovnání mobilních operačních systémů a mobilního připojení k internetu .................... 21 3.1.
Mobilní operační systémy ................................................................................................. 21
3.1.1.
iOS ................................................................................................................................ 23
3.1.2.
Android........................................................................................................................ 25
3.1.3.
Ostatní mobilní OS ..................................................................................................... 26
3.1.4.
Opera Mini .................................................................................................................. 28
3.2.
Historie internetu v mobilních telefonech ...................................................................... 28
3.2.1. 3.3. 4.
Speciální schopnosti mobilních telefonů a tabletů ................................................ 17
Historie mobilního připojení .................................................................................... 28
Situace v ČR ........................................................................................................................ 32
Psychologie chování uživatelů mobilních zařízení ............................................................... 37 4.1.
Specifické využívání platforem ........................................................................................ 37
4.1.1.
Notebook ..................................................................................................................... 37
4.1.2.
Tablet ............................................................................................................................ 39
4.1.3.
Chytrý telefon ............................................................................................................. 40
4.2.
Internet na desktopu vs. Mobilní internet ...................................................................... 42
6
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
5.
4.3.
Co uživatelé očekávají od mobilních stránek ................................................................. 42
4.4.
Kde a kdy používají uživatelé mobilní zařízení?........................................................... 43
4.5.
Prognózy na trhu ................................................................................................................ 45
Techniky a trendy vývoje mobilního webového designu .................................................... 46 5.1.
Klasický webový design .................................................................................................... 46
5.2.
Mobilní webový design ..................................................................................................... 47
5.2.1.
Layout pro chytré telefony ........................................................................................ 48
5.2.2.
Layout pro tablet ........................................................................................................ 49
5.2.3.
Tipy pro mobilní webový design ............................................................................. 50
5.2.4.
Kufrový test ................................................................................................................. 52
5.3.
Typy provedení mobilního webu .................................................................................... 53
5.3.1.
Separátní mobilní web ............................................................................................... 53
5.3.2.
Flexibilní web .............................................................................................................. 54
5.4.
Responsivní webový design ............................................................................................. 54
5.4.1.
Flexibilní layout založený na mřížce ....................................................................... 56
5.4.2.
Flexibilní obsah včetně obrázků ............................................................................... 59
5.4.3.
Rozlišování typu média ............................................................................................. 60
5.5.
Mobile First ......................................................................................................................... 64
5.5.1. 6.
Mobile First v praxi .................................................................................................... 65
Analýza multiplatformního přístupu k webovým stránkám vybraných společností ...... 68 6.1.
Metodika hodnocení .......................................................................................................... 69
6.2.
Seznam kritérií .................................................................................................................... 69
6.2.1.
Analýza multiplatformního přístupu 50 % ............................................................ 71
6.2.2.
Analýza přehlednosti a použitelnosti verze zobrazené na chytrých telefonech 30 %............................................................................................................................... 73
6.2.3. 6.3.
Analýza obsahu a služeb verze zobrazené na chytrých telefonech 20 % ........... 74
České dráhy......................................................................................................................... 76
6.3.1.
Analýza multiplatformního přístupu 50 % ............................................................ 76
6.3.2.
Analýza přehlednosti a použitelnosti verze zobrazené na chytrých telefonech 30 %............................................................................................................................... 78
6.3.3.
Analýza obsahu a služeb verze zobrazené na chytrých telefonech 20 % ........... 79
7
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal 6.3.4. 6.4.
Závěry vyvozené z analýzy a doporučení z nich vyplývající .............................. 80
LEO Express ........................................................................................................................ 82
6.4.1.
Analýza multiplatformního přístupu 50 % ............................................................ 82
6.4.2.
Analýza přehlednosti a použitelnosti verze zobrazené na chytrých telefonech
30 %
....................................................................................................................................... 84
6.4.3.
Analýza obsahu a služeb verze zobrazené na chytrých telefonech 20 % ........... 85
6.4.4.
Závěry vyvozené z analýzy a doporučení z nich vyplývající .............................. 86
6.5.
RegioJet ................................................................................................................................ 88
6.5.1.
Analýza multiplatformního přístupu 50 % ............................................................ 88
6.5.2.
Analýza přehlednosti a použitelnosti verze zobrazené na chytrých telefonech 30 % ........................................................................................................... 89
6.5.3.
Analýza obsahu a služeb verze zobrazené na chytrých telefonech 20 % ........... 91
6.5.4.
Závěry vyvozené z analýzy a doporučení z nich vyplývající .............................. 92
6.6. Srovnání multiplatformního přístupu k webovým stránkám společností České dráhy, LEO Express a RegioJet ........................................................................................................ 94 7.
Závěr ............................................................................................................................................ 96
8.
Terminologický slovník ............................................................................................................. 99
9.
Citovaná literatura ................................................................................................................... 101
10.
Seznam obrázků ................................................................................................................... 109
11.
Seznam tabulek ..................................................................................................................... 111
12.
Seznam grafů ........................................................................................................................ 112
13.
Rejstřík ................................................................................................................................... 113
14.
Příloha 1: Pokrytí ČR mobilním internetem ..................................................................... 115
15.
Příloha 2: Srovnání desktopových a mobilních přístupů na weby z portfolia společnosti Seznam.cz ......................................................................................................... 118
16.
Příloha 3: Grafy ke kapitole psychologie chování uživatele .......................................... 121
17.
Příloha 4: Ilustrace k analýze .............................................................................................. 122
8
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
1. Úvod Když Steve Jobs v lednu roku 2007 prezentoval na tiskové konferenci v San Franciscu první generaci chytrých telefonů iPhone, asi si nikdo nedokázal představit, jaké důsledky pro vývoj odvětví bude tento počin mít. Pět let po uvedení iPhonu se chytré telefony staly součástí každodenního života velké části světové populace. Využití je různé, od telefonování přes psaní emailů a přístup na internet až po pokročilé aplikace. Chytré telefony a následně tablety změnily uživatelské návyky na internetu a s tím i požadavky pro design webových stránek. Jelikož jsem sám majitelem chytrého telefonu, který využívám s každodenní pravidelností, rozhodl jsem se pro volbu tématu, které se chytrých telefonů přímo dotýká. Při volbě tématu jsem se snažil zvolit takové, u něhož je možné zaujmout více úhlů pohledu, případně, který umožní poukázat na nějaký aktuální problém. Současně jsem alespoň částečně chtěl navázat na svou bakalářskou práci, která se týkala webové prezentace společnosti. Obsahem diplomové práce je popis přístupů k mobilním webovým stránkám společnosti, popisuje psychologii chování uživatelů mobilních zařízení a také vývojářské postupy k dosažení responsivního webu.
1.1.
Cíle práce Cílem mé práce je nejprve popsat různé typy mobilních zařízení a jejich
specifické charakteristiky, specifika mobilního internetu, psychologické aspekty chování uživatele mobilních zařízení a v neposlední straně také přístupy k řešení designu
mobilních
webových
stránek.
Následnou
praktickou
analýzou
multiplatformního přístupu k webovým stránkám trojice vybraných společností poukazuji na chyby a nedostatky a vyvozuji z nich doporučení pro vylepšení přístupu z mobilních zařízení.
1.2.
Metoda dosažení cíle Pro dosažení finálního výsledku kombinuji poznatky z tištěné odborné
literatury s aktuálními zdroji z internetu. Snažím se klást důraz na aktuálnost
9
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal použitých zdrojů. Vzhledem k dynamickému růstu odvětví je tak nutné se spoléhat zejména na elektronické zdroje. V závěrečné analýze využívám k hodnocení mobilních verzí webových stránek vybraných společností vlastní metodu na bázi multikriteriálního hodnocení, v níž vycházím z obecně uznávaných postupů. Kladu velkou váhu jak na multiplatformní přístup k vybraným webovým stránkám, tak i na obsahovou analýzu, kde testuji, zda stránky nabízejí to, co uživatelé od webu očekávají.
1.3.
Předpoklady a omezení práce Svou
diplomovou
práci
jsem
zaměřil
především
na
hodnocení
multiplatformního přístupu k webovým stránkám z pohledu webového designu. Nezabývám se tedy vyčerpávajícím způsobem vývojem mobilního webu z pohledu programátora. Z technik přístupu jsem vybral ty, které mají reálný dopad na webový design stránek. Druhým omezením je malé množství tištěné literatury, které je způsobeno dynamicky se vyvíjejícím odvětvím. Z tohoto důvodu jsem nucen se odkazovat zejména na elektronické zdroje.
1.4.
Struktura práce, Svou práci rozděluji do následujících kapitol: V první kapitole se zaměřuji na rozdělení mobilních zařízení, určení jejich
specifik a jejich vzájemné porovnání. Popisuji také specifické vlastnosti mobilních zařízení a charakteristiky dotykového ovládání. Ve druhé kapitole se podrobněji věnuji mobilním operačním systémům a mobilnímu internetu. Popisuji vlastnosti jednotlivých mobilních operačních systémů, jejich zastoupení na trhu a specifika jejich webových prohlížečů. V závěru kapitoly se věnuji aktuální problematice pokrytí mobilním internetem v České republice.
10
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Ve třetí kapitole práce se zaměřuji na psychologické aspekty chování uživatelů jednotlivých mobilních zařízení – k čemu jej využívají, co od něj očekávají a jaké jim přináší největší přínosy. Dále popisuji očekávání uživatelů od mobilního webu a aktuální prognózy na trhu s mobilními zařízeními. Ve čtvrté kapitole, která nese název Techniky a trendy vývoje mobilního webového designu, nejprve srovnávám klasický webový design s mobilním designem pro chytré telefony a pro tablety. Shrnuji doporučení pro tvůrce mobilních webů a techniky přístupu k tvorbě mobilního webu. Podstatnou část kapitoly věnuji tvorbě responsivních webových stránek a myšlence Mobile First. V páté kapitole aplikuji předešlé teoretické poznatky v praktickém užití při analýze multiplatformního přístupu k webovým stránkám vybraných společností. Pro analýzu jsem zvolil železniční dopravce působící na území České republiky, tj. České dráhy, LEO Express a RegioJet. Důvody pro tuto volbu byly zejména konkurenční boj a také možnost využívat pokročilých služeb mobilních zařízení. Na základě výsledků analýzy uvádím pro každou společnost doporučení směřující ke zlepšení přístupu z mobilních zařízení k jejich webovým stránkám jak po technické, tak i po obsahové stránce. V závěrečných přílohách jsou uvedené mapy pokrytí České republiky mobilním internetem dle jednotlivých operátorů, statistika přístupů z různých zařízení na webové stránky z portfolia společnosti Seznam.cz a doplňující grafy ke kapitole Psychologie chování uživatelů mobilních zařízení.
1.5.
Výstupy práce a očekávané přínosy Hlavním
výstupem
mé
diplomové
práce
je
srovnávací
analýza
multiplatformního přístupu k webovým stránkám českých železničních dopravců a doporučení z nich plynoucí. Přínosem však není pouze analýza a poukázání na chyby, ale také komplexní pojetí teoretické části práce, které slučuje technické
11
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal aspekty s psychologií chování uživatelů. Práce je mimo jiné určena také všem autorům a majitelům webových stránek, kteří by své weby chtěli rozšířit na pole mobilních zařízení.
1.6.
Rešerše zdrojů Před samotným zahájením psaní práce jsem provedl rešerši souvisejících
prací, abych zjistil, kdo se již podobným tématem v minulosti zabýval. Zaměřil jsem se na práce a publikace týkající se mobilního webového designu, vývoje webových aplikací pro chytré telefony a technik přístupu ke tvorbě designu. V publikaci Responsive Web Design (Marcotte, 2011) popisuje Ethan Marcotte přístupy k tvorbě webových stránek, které svým layoutem reagují na velikost displeje zařízení, na nichž jsou zobrazeny. Jeho kniha je úzce zaměřena pouze na vývoj webu, který uvádí na konkrétním příkladu. Ve své práci na tuto myšlenku navazuji a uvádím ji jako jeden z příkladů přístupů ke tvorbě webového designu pro mobilní zařízení. Kniha Mobile First (Wroblewski, 2011), kterou publikoval v roce 2011 Luke Wroblewski, prezentuje myšlenku přístupu k tvorbě webového designu v pořadí, kdy se nejprve navrhuje design pro chytré telefony a až poté pro ostatní zařízení. Wroblewski vychází z faktu, že prodeje mobilních zařízení rapidně vzrostly, nezůstává však pouze u vývoje webu určeného na malý displej. Zmiňuje specifika ovládání pomocí dotykového displeje a další charakteristické funkce chytrých telefonů, jako je změna orientace displeje nebo určení geografické polohy. Myšlenky pana Wroblewskiho považuji za revoluční a vycházím z nich ve své práci v celé řadě případů. Diplomant Martin Staněk ve své práci Přístupy pro tvorbu mobilního webu popisuje po technologické stránce jednotlivé principy pro tvorbu mobilního webu. Dotýká se mimo jiné i myšlenek responsivního webového designu či Mobile First,
12
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal analyzuje je však zejména po technologické stránce, nikoli po stránce designové (Staněk, 2012). Michal Čapek ve své bakalářské práci Přístupy k řešení grafického designu mobilních webových aplikací popisuje převážně z technologického pohledu rozdíl mezi webovým designem pro mobilní zařízení a pro PC. Na tuto práci navazuji přidáním mobilního webového designu do dalších souvislostí jako např. psychologií chování uživatelů mobilních zařízení (Čapek, 2011). Diplomantka Jana Mrazová ve své práci User Centered Cross-Platform Application Development for Mobile Devices (Mrazová, 2012) velmi podrobně popisuje specifika uživatelského rozhraní chytrých telefonů, které následně rozšiřuje o testování multiplatformní aplikace. Z této práce si beru příklad v popisu ovládání, nezacházím však až do takových podrobností. V neposlední řadě vycházím i ze zkušeností získaných při psaní své bakalářské práce na téma Úloha grafiky v internetové reklamě, v níž jsem se věnoval přehlednosti a použitelnosti webového designu v kombinaci s marketingem, psychologií chování uživatele a způsoby testování chování uživatelů na webových stránkách. Některé části tohoto textu v rámci diplomové práce rozšiřuji s ohledem na mobilní zařízení (Nadrchal, 2010).
13
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
2. Typy mobilních zařízení a jejich specifika Tématem této diplomové práce jsou přístupy k řešení mobilních webových aplikací. Úvodem je nutné si položit otázku – jaká jsou mobilní zařízení? Co do této specifikace spadá a co nikoli? Přenosných zařízení je obrovská spousta, od mobilních telefonů přes tablety až po laptopy nebo elektronické čtečky knih. Pro účely této práce považuji za mobilní zařízení považovat ta, která jsou masově rozšířena a současně se s nimi dá připojit k mobilnímu internetu bez nutnosti omezení se na WiFi hotspoty. Tuto kombinaci požadavků splňují z moderních technologií jednak mobilní telefony a tablety, které z trhu prakticky vytlačily PDA (Anderson, 2007), jednak notebooky a netbooky s využitím speciálního modulu pro připojení k mobilnímu internetu. Mobilní telefony vyžadují ještě hlubší rozdělení, tento termín totiž zahrnuje prakticky veškerá zařízení schopná bezdrátového přenosu telefonních hovorů. V této diplomové práci nicméně kladu největší důraz na vliv chytrých telefonů a tabletů, tj. platformy, které rozhýbaly ustálené vody webového designu. V následujícím přehledu uvádím specifikace jednotlivých typů mobilních zařízení, jejich specifikace, výhody, nevýhody a oblasti užití.
2.1.
Mobilní telefon, chytrý telefon
V současné době mají na trhu zastoupení dvě skupiny mobilních telefonů, jedná se o tzv. feature phone, tj. mobil nabízející základní funkce a služby, a smartphone (dále jen chytrý telefon). Mezi základní funkce patří příchozí a odchozí hovory a základní přenos dat v podobě SMS, CSD, HSCSD a GPRS. Vzhledem k omezené funkcionalitě a nízkým přenosovým rychlostem dat nebudu tuto skupinu mobilních zařízení v následující analýze vývojových technik mobilního webu zahrnovat. Chytré telefony mají mnohonásobně vyšší výkon, jsou postaveny na otevřeném mobilním operačním systému a nabízejí funkcionalitu na úrovni osobních počítačů. Chytré telefony mají následující vlastnosti (Cassavoy, 2012) (Gangster, 2010):
14
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
Otevřený mobilní operační systém
Hovory
Textové a multimediální zprávy
Dotykový displej s funkcí multitouch o velikosti do 4,5 palce
Přístup na internet
Plnohodnotná QWERTY klávesnice, hardwarová nebo softwarová
Podpora 3rd party aplikací
Multitasking
GPS modul
Push notifikace
E-mailový klient
Vazba na sociální sítě
Fotoaparát/kamera
Gyroskop
Akcelerometr
Přehrávač hudby
2.2.
Tablet Computer Pojem tablet se v poslední době hovorově vžil pro platformu tablet computer,
jejíž vývoj doznal v posledních letech obrovského boomu. Odstartovala jej společnost Apple s uvedením na trh zařízení zvaného iPad v lednu roku 2010 (Apple, 2010). Z historického hlediska by se dokonce dalo hovořit o tom, že uvedení prvního iPadu znamenalo zásadní milník mezi PC érou a tzv. „post-pc“ érou (Sláma, a další, 2012). Platforma tablet PC, která se na trhu objevovala již před launchem iPadu, byla postavena na klasické architektuře IBM PC a disponovala kromě klávesnice i dotykovým rozhraním, pro který se využíval stylus, viz obrázek 1 (Javůrek, 2011):
15
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
Obrázek 1: Ukázka platformy tablet PC, Dell Latitude XT3; zdroj: (Javůrek, 2011)
Zatímco koncept tablet PC se na trhu nedokázal výrazněji prosadit, tablet computer, který je postaven pouze na dotykovém ovládání a mobilních operačních systémech, zaznamenal úspěch prakticky okamžitě. Na úspěch iPadu okamžitě reagovala konkurence, zejména společnost Samsung, která na trh uvedla Galaxy Tab. Vedle těchto majoritních hráčů se v současné době dá v ČR koupit tablet computer od tří desítek dalších výrobců. Hlavní vlastnosti tablet computer (dále v textu jen tablet):
Mobilní operační systém
Dotykový displej s funkcí multitouch o velikosti od 7 palců
Přístup na internet
Plnohodnotná QWERTY klávesnice, hardwarová nebo softwarová
Podpora 3rd party aplikací
Multitasking
GPS modul
Push notifikace
E-mailový klient
Vazba na sociální sítě
Fotoaparát/kamera
Gyroskop
Akcelerometr
16
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
Přehrávač hudby
Wi-Fi hotspot
Čtečka knih
Výdrž na baterii okolo 10 hodin (VentureBeat.com, 2012)
2.2.1.
Speciální schopnosti mobilních telefonů a tabletů S příchodem první generace mobilního telefonu iPhone v roce 2007 přišla
i nová éra mobilních zařízení, jejichž technické vlastnosti se skokově dostaly na zcela jinou úroveň. Nové pokročilé technologie, jako je kapacitní dotykový displej, polohovací senzory (akcelerometr a gyroskop) nebo třeba světelný senzor, přinesly uživatelům zcela nové způsoby ovládání a interakce se zařízením. Přikládám krátký popis technologií, které se dají reálně využít při tvorbě mobilního webu. Dotykový displej Dotyková obrazovka umožnila vytvořit chytré mobilní telefony s displejem, který zabírá prakticky celou čelní stranu zařízení, jelikož odpadla nutnost vytvářet hardwarovou klávesnici. Spolu s dotykovým displejem se zažila celá řada pohybových gest, která zjednodušují ovládání zařízení a jež ve své publikaci shrnuje Wroblewski (Wroblewski, 2011):
Obrázek 2: Základní přehled dotykových gest; zdroj (Wroblewski, 2011)
17
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Ačkoli se dotykové displeje masově rozšířily poměrně nedávno, dotyková gesta se dokázala standardizovat napříč výrobci (Cornett, 2012). Jediným problematickým gestem, u něhož zatím nebyla nalezena shoda, je stisknutí. Následující tabulka 1 shrnuje rozdílné funkce tohoto gesta (Neo Insight, 2012): Tabulka 1: Význam gesta "stisknutí" podle mobilních operačních systémů; zdroj: (Neo Insight, 2012)
Mobilní operační systém
Význam(y) gesta „stisknutí“ Zobrazení informační bubliny, zvětšení obsahu pod prstem,
iOS
spuštění správy ikon/spuštěných aplikací, provedení speciálních akcí dle aplikací
Android Windows Phone
Otevření kontextového menu, zobrazení informační bubliny, posun ikony, výběr textu k editaci, vstup do režimu výběru Zobrazení možností (kontextové menu) pro danou položku
Polohovací zařízení – gyroskop a akcelerometr Vzhledem k přenosné povaze chytrých telefonů a tabletů je s nimi, na rozdíl od desktopů, možné libovolně manipulovat a otáčet, aniž by byla omezena funkcionalita a ovládání. Při otočení obrazovky se zvýší šířka zobrazované plochy až o třetinu, čehož lze využívat při tvorbě mobilních webových stránek. Ačkoli je podstata obou zařízení, gyroskopu a akcelerometru1, rozdílná, jejich výsledná funkce je prakticky totožná a pouze se navzájem doplňují v místech, kde by mohly vzniknout odchylky (iPhonemania.cz, 2010). Polohové služby Mobilní zařízení dokážou poměrně přesně určit polohu, ve které se nacházejí. K tomu využívají trojici metod, které se navzájem kombinují. Informace jsou získávány z mobilní sítě, sítě Wi-Fi a také z modulu GPS (Global Positioning System)
Akcelerometr je zařízení, které měří sílu zrychlení. V mobilních telefonech se využívají tříosé akcelerometry, které dokážou změřit gravitační zrychlení a tím pádem určit, která strana zařízení míří směrem dolů (Fingas, 2012). Akcelerometr tak nedokáže určit rotační pohyb např. ve chvíli, kdy mobilní zařízení leží na stoje. Gyroskop dokáže mj. měřit rotační pohyb a tento problém tím pádem řeší, má však odchylku v podobě setrvačné síly. Pro určení polohy zařízení se tak využívá kombinace dat z těchto dvou zařízení (iPhonemania.cz, 2010). 1
18
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal (Apple Support, 2012). Pro vývoj mobilního webu mohou být tyto informace užitečné, neboť umožňují lépe personalizovat obsah webu.
2.3.
Notebook Do této kategorie spadají přenosné osobní počítače, které zvládají stejné úlohy
jako běžné desktopy. Na rozdíl od desktopů jsou všechny periferie integrované do šasi notebooku, včetně klávesnice a polohovacího zařízení. Notebooky standardně disponují optickou mechanikou, samozřejmostí je přístup k internetu a vysoká sofistikovanost operačních systémů umožňující spuštění prakticky jakéhokoliv typu softwaru. Hlavní devizou oproti desktopům je mobilita, výdrž na baterii a také menší rozměry. Spolu s klesající cenou překonaly už v roce 2007 v prodejích na českém trhu klasické desktopy (Noska, 2008).
2.4.
Netbook Netbooky jsou specifickou verzí notebooků, které jsou určené především pro
snadný přístup k internetu. Oproti notebookům se vyznačují mnohem menšími rozměry a nižší hmotností, což se promítlo i do ovládacích prvků včetně klávesnice. Hardwarový výkon netbooků je oproti notebookům slabší, vzhledem k rozměrům nejsou vybaveny ani optickou mechanikou (Be Money Aware Blog, 2011). Vzhledem k malým rozměrům je nízké i rozlišení obrazovky, čemuž je nutné přizpůsobit i webové stránky.
2.5.
Srovnání mobilních platforem Následuje tabulka 2 s přehledem atributů jednotlivých typů zařízení
Money Aware Blog, 2011).
19
(Be
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Tabulka 2: Srovnání mobilních platforem, zdroj: (Be Money Aware Blog, 2011), (Carphone Warehouse, 2012)
Lze telefonovat, více mobilní
Typ zařízení Velikost obrazovky (v palcích) Lze z nich telefonovat? (prostřednictvím mobilní sítě) Přístup k internetu Klávesnice (v základní výbavě) CD/DVD/BR mechanika Velikost paměti Operační systém Psaní textu Vytváření obsahu Čtení Prohlížení internetu One-click aplikace Přenosnost Prohlížení fotografií/videí Cena (v Kč s DPH)3
2 3
Větší obrazovky, vyšší výkon
Chytrý telefon
Tablet
Netbook
Notebook
2-5
5-11
10-12
11-20
Ano
Některé modely
Ne
Ne
Ano Dotyková QWERTY klávesnice
Ano Dotyková QWERTY klávesnice
Ano
Ano Plnohodnotná fyzická klávesnice
Ne
Ne
2-64 GB
16-64 GB Mobilní OS2 Špatné Dostačující Špatné Dostačující Špatné Vynikající
Minimalistická fyzická klávesnice Ne
Ano
100-150 GB 250 GB – 1 TB Windows, MacOS Dobré Vynikající Dobré Vynikající Dobré Dobré
Dostačující
Vynikající
Vynikající
Vynikající
Ano Vynikající Dostačující (malý displej)
Ano Dobré
Ne Dobré
Ne Dostačující
Vynikající
Dobré
Vynikající
1500 – 27000
5000 – 29000
7000 – 73000
1600 - 23000
Viz kapitola o mobilních operačních systémech Srovnání z portálu heureka.cz ze dne 31. 10. 2012
20
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
3. Srovnání mobilních operačních systémů a mobilního připojení k internetu Ve druhé kapitole mé diplomové práce popisuji nejprve mobilní operační systémy, tj. systémy, na kterých běží současné chytré telefony a tablety. Následně navazuji technologiemi mobilního internetu, které poté dávám do souvislosti s aktuální situací v České republice a okolních státech Evropské Unie.
3.1.
Mobilní operační systémy Při budování webových stránek pro mobilní telefony je nutné vzít v úvahu
velké množství souvislostí. Nejedná se pouze o hardwarovou vybavenost, kterou detailněji popisuji v jiné části diplomové práce, ale také o softwarové vybavení. V současné době jsou zásadní rozdíly zejména v operačních systémech, jejichž stručnou charakteristiku uvádím v následujících několika odstavcích. Zamyslím-li se nad otázkou, kterak rozdělit jednotlivé mobilní operační systémy do skupin, vzejde myšlenka sloučit je na bázi systémového jádra, na němž běží. Díky tomu vznikne rozdělení, které je uvedeno v tabulce 3: Tabulka 3: Rozdělení mobilních operačních systémů, zdroj: (Raja, 2011)
Linux
Mobile OS
Windows CE
Darwin
Android
BlackBerry OS
Windows Mobile
iOS
Bada
Symbian
Windows Phone 7
webOS Maemo
Při porovnání tohoto výčtu se statistikou ke 3. čtvrtletí 2012 společnosti Gartner (Gartner, 2012) vychází najevo, že má praktický smysl se zabývat pouze systémy, které mají majoritní nebo velmi progresivní postavení na trhu. Z dat uvedených v grafu 1 je patrné, že meziročně nejvíce roste podíl na trhu systému Android, který dokonce na poli chytrých telefonů dosáhl 72 %. Prodeje stagnují
21
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal u zařízení s operačním systémem iOS společnosti Apple, naopak klesá postavení BlackBerry OS a ještě výrazněji z trhu mizí Symbian. Naopak expanze nebyla zaznamenána u mobilní verze Windows, jelikož se však jedná o velmi silného hráče na globálním IT trhu, uvádím jej v následujícím srovnání.
Podíly celosvětových prodejů ke koncovým uživatelům dle mobilního operačního systému 72,4
80 70 60
52,5
50 40 30 15 13,9
20 10
11
16,9 5,3
2,2 3
2,6
1,5 2,4
Symbian
Microsoft
0 Android
iOS
BlackBerry OS
Bada
3Q11 Podíl na trhu (%)
3Q12 Podíl na trhu (%)
Graf 1: Podíly celosvětových prodejů ke koncovým uživatelům dle mobilního operačního systému, zdroj: (Gartner, 2012)
Statistika rozšíření mobilních prohlížečů Na následujícím grafu 2 je zobrazeno procentuální zastoupení mobilních webových prohlížečů (NetMarketShare.com, 2012), ze kterého lze vyčíst další zajímavé údaje. Na vedoucí pozici je suverénně browser Safari od společnosti Apple, který používá celých 61 % uživatelů mobilního webu. Další dvojici významných prohlížečů představuje nativní browser mobilního operačního systému Android, který zabírá 26 % celkového trhu, posledním významným hráčem je aktuálně Opera Mini s 8 % na trhu. Při srovnání s výše uvedeným grafem 1 prodejů mobilních zařízení v závislosti na mobilním operačním systému tak vzniká zajímavý paradox – uživatelé Androidu využívají méně mobilní internet než ti, kteří vlastní produkty s iOS od společnosti Apple. Z grafu také vyplývá, že nedávné pokusy provozovatelů
22
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal populárních PC browserů Firefox (Cox, 2010) a Chrome (Casteel, 2012) o průnik na trh s mobilními prohlížeči se prozatím do celosvětových tabulek nikterak výrazně neprojevily.
Rozšíření mobilních prohlížečů 1%
1%
1%
2%
8%
Safari Android Browser Opera Mini
26%
BlackBerry Symbian Microsoft Internet Explorer 61%
Ostatní
Graf 2: Celosvětové rozšíření mobilních prohlížečů, zdroj: (NetMarketShare.com, 2012)
3.1.1.
iOS Mobilní operační systém společnosti Apple přišel na trh při uvedení první
generace mobilních telefonů iPhone v roce 2007, což je milník, který je veřejností chápán jakožto revoluce v oblasti mobilních telefonů. iOS je postaven na operačním systému Darwin, který byl naprogramován v jazyce C. V současné době se nachází ve verzi 5, která přišla s novinkou ve formě iCloud – cloudového řešení společnosti Apple. Vývoj na iOS je provázen řadou restrikcí ze strany Applu, společnost si vyhrazuje právo pro kontrolu softwaru, který vpustí do svého AppStoru, tj. prostředí, z nějž lze nakupovat a stahovat softwarové aplikace do mobilního zařízení. iOS je v současnosti využíván v produktech iPhone, iPad, iPod a nejnověji také Apple TV (Johnson, 2012). Vývojové prostředí: Programový jazyk C nebo Objective-C a pro ně vyvinuté prostředí XCode, které je dostupné pouze pro operační systém Mac OS.
23
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Omezení systému: Filosofie Applu je postavena na zcela uzavřených produktech, do nichž není možné zasahovat bez svolení mateřské společnosti. Nejinak je tomu i u zařízení se systémem iOS – aplikace v AppStore musí projít specifickou autorizací, bez níž není možné software do iOS legálně nainstalovat. Díky tomu se v zařízeních podporujících iOS nevyskytuje přehrávač formátu Flash, za čímž oficiálně stojí špatná optimalizace mobilní verze přehrávače (iPhoneTips.cz, 2012). Uživatelé se tak nemohou plnohodnotně připojit až k 36 % webových stránek, které ve svém obsahu Flash využívají, byť tento údaj meziročně o 11 % klesl4. Důsledná kontrola aplikací společností Apple má za pozitivní následek vysokou bezpečnost systému (Sophos, 2012). Základní omezení systému iOS se dají překonat tzv. Jailbreakem (Keller, 2012), po kterém je do mobilního zařízení možné nahrát i neautorizované aplikace, případně provádět zásahy do samotného operačního systému. Jedná se nicméně o porušení smluvních podmínek se společností Apple, které může vést až ke ztrátě záruky na zařízení, byť jej americké soudy označily jako legální krok (Kravets, 2012). Nativní webový prohlížeč a jeho omezení: Safari Safari je velmi pokročilý webový prohlížeč, jenž si bez větších problémů poradí s většinou webových stránek, a který nativně podporuje zobrazování stránek využívajících prvky HTML5 a CSS3. Základní omezení představuje zmiňovaná absence přehrávače formátu Flash. Aktuální jsou problémy s weby využívající technologii AJAX5, jelikož nová verze Safari uvolněná v iOS 6 neumožňuje více než jedno připojení k jednomu serveru, což může vést k nefunkčnosti některých
Srovnání z průzkumů webu http://httparchive.org/ AJAX (Asynchronous JavaScript and XML) je technologie, jež vznikla spojením XML, JavaScript, HTTP a (X)HTML. AJAX stránce umožňuje kontaktovat server a obdržet od něj libovolná data, bez nutnosti nahrávání celé stránky znovu. To znamená, že si uživatel v jedné části stránky nastaví konkrétní prvek na požadovanou hodnotu a stránka reaguje okamžitě bez nutnosti stahování dat. Na technologii Ajax je postaven mj. server Facebook. (Nadrchal, 2010) 4 5
24
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal webových aplikací. Tento bug nebyl odstraněn ani v nejnovější verzi iOS 6.0.1 (O'Lone, 2012). Posledním omezením, které je nepříjemné spíš pro uživatele než pro vývojáře, je absence rozšíření typu AdBlock6, nemožnost vyhledávání na webové stránce nebo stahování libovolných typů souborů do paměti mobilního zařízení. 3.1.2.
Android V současné době nejrozšířenějším operačním systémem na mobilních
zařízeních je Android, jehož historie spadá až do roku 2003, kdy byla založena společnost Android, Inc. Poté, co roku 2005 koupil společnost gigant Google, se dal očekávat průlom na poli mobilních zařízení, který nastal roku 2007, kdy vzniklo sdružení Open Handset Aliance, v němž se nachází mmj. Google, Motorola, Intel, HTC, LG a Samsung. Od první verze systému Android, která vyšla v září 2008, už vznikly 3 další verze – poslední verze Android 4.0 Ice Cream Sandwich byla uvedena v říjnu 2011. Rychlému vývoji systému a jeho komponent napomáhá fakt, že je vyvíjen pod licencí Open Source a běží na jádru systému Linux. Samotný operační je napsán v jazyce C, grafické rozhraní běží na jazyce Java. Systém Android v současnosti využívají pro svá zařízení společnosti Samsung, HTC, LG, Sony, Motorola a další. Vývojové prostředí: Pro vývoj aplikací pro zařízení se systémem Android se využívá software Android Software Development Kit (SDK) Omezení systému: Díky otevřenosti systému, která může být brána většinou uživatelů jako velká výhoda, se prakticky nedá hovořit o omezeních jako takových. Otevřenost s sebou však přináší mnohem nižší bezpečnost dat – riziko hackerského útoku je u open source systémů vždy vyšší (cinterviews.com, 2009).
AdBlock: rozšíření blokující určitou část obsahu webových stránek. Využívají se zejména pro blokování obtěžujících reklamních sdělení, zdroj: http://adblock.dajbych.net/ 6
25
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Nativní webový prohlížeč a jeho omezení: Android default web browser Základní webový prohlížeč operačního systému nemá problémy zvládnout aktuální verze HTML 5 i CSS 3, stejně jako animace ve formátu Flash. Komplikace jsou spojené zejména s neodladěným ovládáním a těžkopádným zobrazováním komplexních stránek (Escallier, 2011). Spekuluje se o tom, že by v příští verzi systému Android měla být obsažena mobilní verze prohlížeče Chrome (Escallier, 2011). 3.1.3.
Ostatní mobilní OS Následuje stručnější přehled méně významných operačních systémů na trhu.
BlackBerry OS Dalším velkým hráčem na trhu mobilních operačních systémů byl doposud také BlackBerry OS, za kterým stojí kanadská společnost Research in Motion. 7 První verze systému byla uvolněna již v roce 2002, v současné době se na trhu pohybuje sedmá verze systému.
Jedná se o systém určený převážně pro uživatele
z podnikatelské sféry a svůj tržní potenciál staví na skvěle zvládnutém e-mailovém klientu, vynikajícím organizéru a kvalitní synchronizaci e-mailů, úkolů, kalendáře, poznámek a kontaktů skrze Microsoft Exchange, IBM Lotus Domino nebo Novell GroupWise. Jádro systému je napsáno v jazyku Java, pro tvorbu systému samotného bylo použito C++. Na rozdíl od Androidu se jedná o uzavřený systém bez možnosti zásahu, u aplikací od třetích stran je nutné využívat digitální podpis. Windows Phone Windows Phone je moderním nástupcem původního systému Windows Mobile.
Systém
byl
oproti
svému
předchůdci
kompletně
přepracovaný
a zdokonalený podle aktuálních uživatelských požadavků, zvyků a standardů. WP je
7
http://www.rim.com/
26
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal postaven na jádru Windows CE a byl vytvořen v programovacím jazyce C++. Společnost Microsoft se snaží prosadit na trhu s mobilními technologiemi, kde mu v posledních letech takříkajíc „ujel vlak“ nástupem silného dua Android a iOS. I proto přišlo spojenectví s finským výrobcem mobilních telefonů Nokia, který zažíval v posledních letech propad prodejů (tech.ihned.cz, 2011). Windows Phone sází na grafické rozhraní Metro, které by jej mělo přiblížit více k masovým spotřebitelům než k podnikatelské sféře, na níž byl zaměřen původní Windows Mobile.
8
Poslední
verze systému, Windows Phone 8, byla uvedena na trh letos na podzim – 29. 10. 2012. Vedle mobilních telefonů Nokia se operační systém Windows Phone používá i v zařízeních od společností HTC, Samsung a LG. Symbian Symbian je otevřený operační systém, jehož vývoj byl plánován pouze a výhradně pro mobilní zařízení, zejména mobilní telefony. Je naprogramován v jazyce C++, vývoj začal v roce 1998. První mobilní telefon, který byl postaven na systému Symbian 6.0, byl Nokia 9210 Communicator z roku 2001. Systém Symbian prošel dlouhým vývojem, největší úspěch přinesla verze Symbian S60. Poslední vydanou verzí je Symbian Belle, která bývá často označovaná jako Symbian^3 nebo Nokia Belle. Tato verze má zakomponované ovládání dotykovým displejem, vylepšen byl také multitasking. Po spojení společnosti Nokia s Microsoftem byl dne 11. února 2011 oficiálně ukončen další vývoj operačního systému Symbian, v nových řadách mobilních zařízení jej nahrazuje Windows Phone (Addison, 2011). Podle některých zdrojů se však na Symbianu stále pracuje a v budoucnu by ještě mohly být pokusy o jeho znovuuvedení na trh (Žuffa, 2012). Bada Společnost Samsung se v roce 2010 pokusila zavést vlastní operační systém, kterým by byla schopná konkurovat systémům jako iOS nebo Android a zbavila se
8
http://www.microsoft.com/windowsphone/cs-cz/
27
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal tak závislosti na externím dodavateli. Vzniknul tak systém Bada, pro jehož rozšíření Samsung určil svůj model Wave S8500, který se na trh dostal na přelomu let 2010 a 2011. I přes nepochybné kvality systému však nedosáhl tak velkého úspěchu, jak společnost předpokládala. Trápí jej především nedostatečné portfolio aplikací, které by v budoucnu mohla vyřešit plánovaná fúze s operačním systémem Tizen a společná spolupráce na platformě s firmou Intel (Kovařík, 2012). 3.1.4.
Opera Mini Prohlížeč Opera Mini je třetím nejrozšířenějším mobilním prohlížečem, což je
vidět na grafu 2. Opera Mini si svou popularitu vybudovala díky „šetření dat skrze proxy servery, které objem načítané stránky stlačí až o 90% z její původní velikosti. Tím pádem uživatelům, kteří využívají mobilní internet skrze síť operátora a nikoliv skrze Wi-Fi výrazně šetří jejich peníze i FUP limity.“ (Vejtasa, 2012)
3.2.
Historie internetu v mobilních telefonech Mobilní zařízení mají schopnost se připojovat na internet už dlouhou dobu,
konkrétně od roku 1994, kdy byl vytvořen první mobilní webový prohlížeč PocketWeb (Teco.edu, 2010). V té době byl ještě v plenkách i internet ve formě, v jaké jej dnes známe – termín Web 1.0 se začal používat v roce 1993. Jakkoli inovátorsky mohlo v tehdejší době působit zavedení internetového prohlížeče do mobilního zařízení, opravdu masivního rozšíření se mobilní web dočkal až o čtrnáct let později s příchodem první generace mobilních telefonů iPhone. V následujících několika odstavcích postupně uvedu jednotlivé vývojové fáze mobilního připojení tak, jak se začaly objevovat v praktickém životě. 3.2.1.
Historie mobilního připojení Probírat podrobně jednotlivé typy mobilních připojení by bylo úkolem pro
samostatnou diplomovou práci, pro účely této diplomové práce budu abstrahovat od zbytečných technických podrobností a budu se zaměřovat na to nejdůležitější pro
28
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal uživatele, tj. přenosovou rychlost. Další údaje jako přenosovou frekvenci nebo způsob přenosu dat uvádím v závěrečné tabulce pouze pro zajímavost. Pro účely komerčního trhu se využívá dělení typů připojení na generace, což však není zcela přesné. Přehled technologických typů a jejich rozdělení dle generací a typu mobilních sítí, na nichž běží, uvádí následující tabulka 4: Tabulka 4: Přehled typů mobilních sítí a jejich rozdělení dle generací, zdroj: (Vrbacký, 2012) Označení generace
2G
Název
CSD,
technologie
HSCSD
Název mobilní sítě
GSM
2,5G
GPRS
GSM
2,75G EDGE, CDMA 1xRTT
3G
3,5G
3,75G
3,9G
4G
HSDPA
HSUPA
LTE
Advanced,
UMTS, CDMA 1xEV-
LTE-
DO
GSM,
UMTS,
CDMA2000
CDMA2000
WiMax-2 UMTS
UMTS
E-
E-UTRAN,
UTRAN
WiMax
Z ní lze jasně vypozorovat následující rozřazení: Mezi internetové připojení druhé generace (2G) patří hned několik technologií: CSD, HSCSD, GPRS, EDGE a CDMA 1xRTT. Třetí generace technologií mobilního připojení obsahuje UMTS, CDMA 1xEV-DO, HSDPA, HSUPA a také prví generace LTE. V současné době aktuálně nastupuje čtvrtá generace technologií připojení k mobilnímu internetu, kterou reprezentuje LTE-Advanced a WiMax-2.
CSD a HSCSD o Prapůvodní mobilní technologie CSD (Circuit Switched Data) měla v porovnání se současnými technologiemi takřka nicotnou přenosovou rychlost. Ačkoli byly teoreticky schopné zvládat přenosy o rychlosti 33,8 kbps, bylo nutné od tohoto čísla odečíst kapacity pro funkčnost GSM sítě, pro udržení kanálu a opravy chyb, čímž se reálná rychlost dostala na nicotné číslo 9,6 kbps. O něco rychlejší byla technologie HSCDS (High Speed Circuit Switched Data), s níž bylo možné se reálně dostat až na download o rychlosti 43,2 kbps. Obě technologie běžely na stálém kanálu, daly by se přirovnat ke klasickým telefonním spojením.
29
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
GPRS o V roce 1997 se začala využívat technologie GPRS (General Packet Radio Service), která přinášela revoluci zejména ve zpracování přenosu dat. Namísto vytvoření stálého kanálu totiž přenášela data pouze ve chvíli, kdy byl vytvořen požadavek na přenos. Rychlost transferu dat se dostala na 80/40 kbps (download/upload), tato čísla však závisela na dalších okolnostech, např. na aktuálním vytížení operátora nebo způsobu kódování signálu. Stejně jako předchozí běží i GPRS taktéž na GSM síti.
EDGE o Technologie EDGE (Enhanced Data rates for Global/GSM Evolution) nahradila GPRS v roce 2004, jedná se o další vývojový stupeň této technologie mnohdy nazývané jednoduše EGPRS – běží tedy také na GSM síti. Díky optimalizované technologii bylo možné dosáhnout až trojnásobně vyšší přenosové rychlosti, teoreticky více jak 200 kbps, reálné údaje však ukazují rychlost v rozmezí 130-160 kbps.
CDMA 1xEV-DO / 1xRTT o Technologie CDMA (Code Division Multiple Access) funguje od roku 2004, nebyla však využita v mobilních telefonech a jiných handhaldech, nýbrž jakožto prostředek pro připojení PC stanice k internetu prostřednictvím mobilní sítě. Na rozdíl od předchozích běží na síti CDMA2000, která tvoří předěl mezi druhou a třetí generací mobilního připojení. Existují dvě verze, 1xEV-DO a 1xRTT, přičemž 1xEV-DO (Code Division Multiple Access – Evolution Data Only) umožňuje dosahovat rychlostí až 2,4 Mbps, cenou za tuto rychlost je absence hlasového přenosu. Ten umožňuje 1xRTT (1x Radio Transmission
30
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Technology), rychlost přenosu se zde nicméně rapidně snižuje až na 300 kbps, tj. prakticky na úroveň EDGE.
UMTS o Další technologií, která neběžela na GSM, tj. síti určené primárně pro hlasové přenosy, byla UMTS (Universal Mobile Telecommunications Systém). Díky faktu, že byla projektována pro využití hlasových i datových přenosů současně, se řadí mezi technologie třetí generace. UMTS se v praxi rozdělilo na dva směry, UMTS FDD umožňuje kombinaci hovorů a datových přenosů současně, nicméně její rychlost zůstává na 384 kbps. Oproti tomu UMTS TDD představuje čistě datovou síť, u níž je přenos dat směrem k uživateli až 800 kbs. TDD není nicméně na rozdíl od FDD podporována mobilními telefony.
HSDPA, HSUPA, HSDPA+, HSUPA+ o Vylepšení technologie UMTS přinesla nadstavba HSDPA (High Speed Downlink Packet Access). Díky pokročilým algoritmům zpracování dat a efektivnímu využití frekvenčního pásma dosahuje maximálních přenosových rychlostí na downloadu až 14,4 Mbps. Po dalším vylepšení vznikla technologie HSUPA (High Speed Uplink Packet Access), která rapidně zrychluje odesílání dat směrem od uživatele až na 5,76 Mbps. Tzv. „plusové verze“ nepředstavují nic jiného než další zvýšení rychlostí, díky nimž se tato technologie dostala až na 42, respektive 7,2 Mbps.
LTE, LTE - Advanced o Aktuálně nejnovější a nejmodernější technologií pro mobilní přenos dat je LTE (Long Term Evolution), jejíž papírové přenosové rychlosti jsou stanoveny na 100 Mbps pro dowload a 50 Mbps pro upload. Ačkoli byly snahy LTE marketingově nazývat sítí čtvrté generace, dle mezinárodní telekomunikační unie ITU (International Telecommunication
31
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Union) patří stále do mobilních datových technologií 3G (i když neoficiálně bývá uváděna jako 3.9G). Nesplňuje totiž plně požadavky na rychlost downloadu (100 Mbps v pohybu a 1 Gbps v klidu), první 4G technologií tak bude LTE – Advanced, v současné době není reálně nasazená. Následuje shrnující tabulka 5 s přehledným zobrazením dat z předchozího textu: Tabulka 5: Podrobné specifikace jednotlivých typů mobilních připojení, zdroj: (Vrbacký, 2012)
Maximální Název technologie
Rok
Přenosová
uvedení
frekvence
teoretická rychlost datového
Maximální Způsob
vzdálenost
přenosu dat
vysílače a přijímače
přenosu Symetrický /
GPRS (síť GSM)
1997
900/1800 MHz
80 kbps
EDGE (sít GSM)
2004
900/1800 MHz
218/134 kbps
2004
450-2100 MHz
307/153 kbps
Asymetrický
54 km
2004
450-2100 MHz
3,1/1,8 Mbps
Asymetrický
54 km
1xRTT (síť CDMA2000) 1xEV-DO (síť CDMA2000) UMTS (W-CDMA) (síť UMTS) HSDPA (HSDPA +) (síť UMTS) HSUPA (HSUPA+) (síť UMTS)
2000
1885-2200
2048 kbps
MHz
Asymetrický Symetrický / Asymetrický
Symetrický / Asymetrický
35 km 30 km
2 km
Technologie 2004
873/1900 MHz
14,4 (42 Mbps)
pouze pro
6km
downlink 2005
5,76 (7,2
873/1900 MHz
Mbps)
Technologie pouze pro
5km
uplink
V Evropě LTE (síť E-UTRAN)
2008
obvykle 800,
100/50 Mbps
1800, 2600
Symetrický / Asymetrický
30 km
MHz
3.3.
Situace v ČR Pokrytí České republiky mobilním internetem nepatří v porovnání se
zahraničím k nejlepším, naopak. Jak je vidět z následující tabulce 6, základní přístup
32
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal k internetu v rámci GSM sítě lze prakticky na celém území republiky, kde běží v lepším případě EDGE, v horším GPRS. Co se týče pokrytí sítě UMTS a s ní spojeným mobilním internetem 3. generace, nejsou čísla tolik optimistická. Pokrytí sice v průběhu let roste, aktuální čísla nicméně v průměru nedosahují ani polovinu území ČR. Operátoři se snaží zpřístupnit signál co největšímu počtu obyvatel, pokrytí tak je dostupné ve městech a větších obcích, což názorně ukazují i mapy pokrytí, které uvádím v příloze 1. Tabulka 6: Pokrytí ČR mobilním internetem. Zdroj: (Mroček, 2012)
Operátor
Telefónica O2
Pokrytí ČR signálem Pokrytí obyvatelstva Pokrytí území Pokrytí
T- Mobile
obyvatelstva Pokrytí území Pokrytí
Vodafone
obyvatelstva Pokrytí území
Síť GSM (v %)
Síť UMTS (v %) 31. 12.
31. 12.
2010
2011
99,6
43,0
58,9
75,3
98,1
5,0
11,1
28,5
97,0
37,0
82,0
84,5
99,8
5,7
44,0
47,9
99,0
41,0
66,0
73,0
94,0
4,0
14,0
26,0
30. 6. 2012
30. 6. 2012
Situace v České republice ale není zdaleka tak optimistická, jak by se z těchto čísel mohlo zdát. V porovnání se zbytkem Evropské unie tragicky zaostáváme co do rozlohy pokrytí signálem 3G internetu, což je patrné z obrázku 3.
33
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
Obrázek 3: Mapa pokrytí mobilního připojení 2G a 3G napříč střední a západní Evropou, zdroj: převzato z http://client0.cellmaps.com/tabs.html#cellmaps_intl_tab
Na mapě tmavé plochy zobrazují pokrytí internetem třetí generace běžícím na 3G síti, zatímco světlé plochy znázorňují pokrytí sítí GSM. Z této mapy vychází situace v ČR nejhůře ze střední Evropy, znatelně zaostáváme ve srovnání jak s nejnovějšími členy Evropské Unie (Bulharskem, Rumunskem), tak i s některými kandidátskými státy (např. s Tureckem). Při srovnávání se zahraničím není možné opomíjet ani srovnání cen za poskytované služby. Ačkoli by logický úsudek mohl hovořit o přímé úměře mezi kvalitou služeb a jejich cenou, opak je pravdou. Při překročení uvedených datových limitů uvalí operátor na uživatele omezení v podobě FUP (Fair User Policy). Omezení spočítá ve výrazném zpomalení přenosové rychlosti a liší se podle operátora, což ukazuje tabulka 7: Tabulka 7: Rychlosti připojení k mobilnímu internetu po uplatnění omezení FUP; zdroj: (Kysela, 2012)
Operátor
Rychlost připojení po uplatnění FUP
Vodafone
20 kbps
T-Mobile
16 kbps
Telefónica O2
32 kbps nebo 16 kbps (dle typu služby)
34
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal S tímto omezením je možné se připojit pouze k datově nenáročným mobilním webovým stránkám, připojení k plnohodnotným webům je prakticky nemožné. Průměrná webová stránka přinutí uživatele stáhnout 1249 kB dat9, v případě FUP od společnosti T-Mobile by tak uživatelé stahovali takovouto stránku 10 minut a 24 vteřin. Mobilní FUP v českých podmínkách tak funguje spíše jakožto obstrukce nutící uživatele ke koupi dalších volných dat. Jejich ceny jsou nicméně v porovnání se sousedícími státy nesrovnatelně vyšší. V následující tabulce 8 uvádím srovnání měsíčních běžných nezvýhodněných tarifů v ČR, Polsku a na Slovensku. Ceny tarifů jsou pro účely lepšího srovnání zaokrouhlené. Tabulka 8: Srovnání cen objemu mobilních dat v sousedících státech, zdroj: (Matura, 2012)
Země\Cena
40 Kč
50 Kč
100 Kč
ČR
Nic
Nic
Nic
Slovensko
Nic
Nic
100
200
600
MB
MB
MB
Polsko
150 Kč 150 MB
100
500
MB
MB 1,2 GB
200 Kč
250 Kč
300 Kč
300
600
MB
MB
1 GB
2 GB
1,5 GB
2 GB
x
400 Kč
500 Kč
x
2 GB
x
5 GB
x
x
5 GB
7 GB
Z uvedených dat jasně vyplývá, že pro plnohodnotné využívání mobilních webových stránek je nutné v České republice používat weby s nízkou datovou náročností. Proč jsou ale české telekomunikační služby dražší a současně méně kvalitní než v okolních státech, když český zákazník je známý jako hodně citlivý na cenu zboží a služeb? Nerad bych zabředl do nepodložených spekulací, nicméně (Zandl, 2011) uvádí, že hlavním důvodem je absence lokálního operátora – na českém trhu působí aktuálně trojice nadnárodních korporací Telefónica, T-Mobile a Vodafone. Nový virtuální operátor Bleskmobil, který se objevil 7. listopadu 2012 (Dolejš, 2012), zatím neměl čas s trhem zahýbat, navíc se objevují kritické hlasy, že se jedná pouze o dealera společnosti Telefónica (Klesla, 2012). Absence lokální konkurence vede k malému konkurenčnímu boji a vyvádění zisků do států, v nichž 9
Údaj z průzkumů webu http://httparchive.org/
35
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal musí korporace více soupeřit o zákazníka. Česká republika tak představuje tzv. dojnou krávu10, která slouží pro získání kapitálu nutného pro budování infrastruktury v zahraničí. Tuto tezi (Zandl, 2011) podkládá pokrytím signálem 3G internetu v Rumunsku společností Vodafone, které zde pokrývá prakticky celé území země, viz obrázek 4. Srovnání s pokrytím signálem 3G internetu společnosti Vodafone (viz příloha 1) je poněkud tristní…
Obrázek 4: Pokrytí signálem mobilního internetu společnosti Vodafone v Rumunsku, tmavá červená barva představuje 3G internet, světlé 2G internet; zdroj: (Zandl, 2011)
Dojná kráva = „Zavedené a úspěšné jednotky, které přinášení prostředky, z nichž společnost platí své účty a podporuje ostatní podnikatelské jednotky, které vyžadují investice.“ (Kotler, 2007) 10
36
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
4. Psychologie chování uživatelů mobilních zařízení Třetí kapitola mé diplomové práce je zaměřena na chování uživatele mobilních zařízení. Srovnává, k čemu a kde jsou využívány jednotlivé platformy, a uvádí očekávání uživatelů od mobilních webových stránek. S nástupem moderních mobilních zařízení by se dala očekávat i značná změna chování uživatelů jednotlivých platforem. Na základě výsledků výzkumu (Be Money Aware Blog, 2011) uživatelé stále ctí role jednotlivých přístrojů a namísto využívání jednoho univerzálního si rozšiřují své portfolio mobilních zařízení, aby je následně využívali k různým činnostem.
4.1.
Specifické využívání platforem Na následujících grafech 3 - 11 jsou výsledky těchto průzkumů rozdělené
podle platforem. První srovnání ve skupině ukazuje, k čemu uživatelé přístroje nejčastěji využívají, druhé čeho si nejvíce cení a třetí očekávaný užitek11. 4.1.1.
Notebook
Notebook - k čemu je využíván Analytická práce Kariéra, pracovní záležitosti Bankovnictví/finance Obchod Sociální sítě
13% 19% 22% 28% 45%
Email
61% 0% 10% 20% 30% 40% 50% 60% 70%
Graf 3: Průzkum IAB - k čemu uživatelé využívají notebook; zdroj: (iabuk.net, 2011)
Výzkum provedla agentura Sparkler (http://www.sparkler.co.uk/), zúčastnilo se ho více jak 600 respondentů. Z toho 413 vlastnilo v době průzkumu současně chytrý telefon a notebook, 256 všechny tři testované platformy – chytrý telefon, notebook a tablet. Respondenti byli po 2 dny (pracovní den a víkendový den) monitorováni, aby následně vyplnili individuální dotazník s cílem hlubší analýzy jejich chování. Zdroj: http://www.iabuk.net/about/press/archive/tablets-play-key-role-in-consumerslives 11
37
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
Notebook - preferované vlastnosti Levný přístup k internetu
10%
Vyšší soukromí
13%
Jednodušší ovládání zařízení
29%
Vyhovující formát zařízení
37% 0%
10%
20%
30%
40%
Graf 4: Průzkum IAB - preferované vlastnosti notebooku; zdroj: (iabuk.net, 2011)
Notebook - přínos zařízení Pomáhá mi s věcmi, na kterých mi nejvíce záleží
53%
Jistota, že jsem chráněn
68%
Uložení důležitých informací
72% 0%
20%
40%
60%
80%
Graf 5: Průzkum IAB - největší přínosy notebooku; zdroj: (iabuk.net, 2011)
Z výše uvedených grafů vyplývá, že uživatelé jsou si stále vědomi obrovských výhod notebooků zejména v oblasti bezpečnosti a ukládání dat. V oblastech užití vede, stejně jako u dalších dvou zkoumaných platforem, přístup na email a sociální sítě (61 % a 45 % dotázaných). Ostatní způsoby využití jsou přímo spojené s pracovním životem – obchod (28 %), bankovnictví (22 %), výzkum (13 %). Uživatelé nejsou moc jednotní při hledání pozitivních stránek platformy. Nejvíce si cení způsobů ovládání (37 a 29 %) a vyššího soukromí (13 %), významnou položkou je i levný přístup k internetu (10 %). Největší přínos vidí v možnosti uložení důležitých dat (72 %) a pocitu bezpečí (68 %). Velmi kladně také hodnotí obecně formulovanou frázi „pomáhá mi s věcmi, na kterých mi nejvíce záleží“ (53 %).
38
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal 4.1.2.
Tablet
Tablet - k čemu je využíván Čtení časopisů/zpráv/…
12%
Sledování videa nebo TV
27%
Zábava
30%
Obchod
35%
Sociální sítě
51%
Email
57% 0%
10%
20%
30%
40%
50%
60%
Graf 6: Průzkum IAB - k čemu uživatelé využívají tablet; zdroj: (iabuk.net, 2011)
Tablet - preferované vlastnosti Preferované aplikace
27%
Vždy preferuji toto zařízení
31%
Vyhovující formát zařízení
32%
Jednodušší ovládání zařízení
37%
Jednoduchý na přenos
49% 0%
10% 20% 30% 40% 50% 60%
Graf 7: Průzkum IAB - preferované vlastnosti tabletu; zdroj: (iabuk.net, 2011)
Tablet - přínos zařízení Vyjádření identity nebo názoru
12%
Prozkoumávání nových věcí
16%
Zábava
19% 0%
5%
10%
15%
20%
Graf 8: Průzkum IAB - největší přínosy tabletu; zdroj: (iabuk.net, 2011)
Druhá trojice grafů představuje tablet jakožto přístroj opět hojně využívaný pro email a sociální sítě (57 %, 51 %), stejně jako notebooky jej uživatelé využívají při nakupování (35 %). Další položky jsou už značně odlišné a stylizují tablet do role zábavní platformy (30 %) určené mimo jiné ke čtení (12 %) nebo sledování televize
39
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal a videí (27 %). Z vlastností si nejvíce cení mobility (49 %) a velkého dotykového displeje, který se dobře používá (37 %), a jeho formátu. Až 31 % uživatelů uvedlo, že pokud mohou, využívají výhradně tablet. Za největší přínos považují zábavu (19 %) a prozkoumávání nových věcí (16 %). 4.1.3.
Chytrý telefon
Chytrý telefon - k čemu je využíván Informace Obchod
15% 17%
Zábava
26%
Zprávy, počasí, sportovní zpravodajství
31%
Email
57%
Sociální sitě
60% 0% 10% 20% 30% 40% 50% 60% 70%
Graf 9: Průzkum IAB - k čemu uživatelé využívají chytrý telefon; zdroj: (iabuk.net, 2011)
Chytrý telefon - preferované vlastnosti Zvyk
23%
Preferované aplikace
24%
Když není k dispozici jiné zařízení
27%
Nejrychlejší na získání potřebného
46%
Jednoduchý na přenos
53% 0%
10%
20%
30%
40%
50%
Graf 10: Průzkum IAB - preferované vlastnosti chytrých telefonů; zdroj: (iabuk.net, 2011)
40
60%
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
Chytrý telefon - přínos zařízení Mám aktuální info na dosah prstu
78%
Socializace s ostatními
78%
Být v kontaktu na cestách
95% 0%
20%
40%
60%
80%
100%
Graf 11: Průzkum IAB - největší přínosy chytrých telefonů; zdroj: (iabuk.net, 2011)
Specifickou platformou v průzkumu se ukázaly chytré telefony, které jsou sice také nejhojněji využívány pro sociální sítě a email (60 %, 57 %), vysoko se umístil i obchod (17 %). Velmi významně se zde, na rozdíl od ostatních platforem, umisťuje získávání informací. Konkrétně sledování zpravodajství, předpovědí počasí a sportovních výsledků uvedlo rovných 31 % respondentů. S tímto faktem jsou spojené i další výsledky – chytré telefony jsou pro uživatele nejjednodušší na přenášení (53 %) a nejrychleji jim umožní najít, co potřebují (46 %). Za zmínku stojí i položka zvyku, 23 % uživatelů využívá chytrý telefon z prosté síly zvyku. Velmi signifikantní výsledky přinesla i otázka přínosu zařízení, 95 % uživatelů oceňuje možnost být neustále v kontaktu a 78 % socializační efekt. Stejný počet uživatelů oceňuje aktuální informace prakticky na dosah prstů. Podle (Be Money Aware Blog, 2011) jsou uvedené platformy primárně určené pro následující činnosti:
Chytrý telefon – primárně komunikační zařízení o od základního telefonování po pokročilé funkce chytrých telefonů (vysoce přenosné, velmi schopné zařízení se slabinou v malém displeji)
Notebook/desktop – primárně kreativní a výpočetní zařízení o od základní tvorby po pokročilé výpočetní úkony (vysoce schopné zařízení s klávesnicí jakožto primárním vstupním zařízením)
41
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
Tablet – primárně spotřební zařízení o základní
tvorba
a
spotřeba
(vysoce
přenosné,
vynikající
pro
zobrazování multimédií, základní práci a zejména zábavu)
4.2.
Internet na desktopu vs. Mobilní internet Z výše uvedených činností, které jsou svázané s užíváním jednotlivých
mobilních zařízení, je celá řada spojená s internetem. Ne náhodou jsou na prvních místech v průzkumech užívání sociální sítě a email (graf 3, 6 a 9). Jaké je ale procentuální zastoupení uživatelů, kteří chodí na internet z mobilních operačních systémů na chytrých telefonech nebo tabletech? Podle aktuální statistiky serveru NetMarketshare.com12 se celosvětově připojuje z mobilních zařízení 10,3 % uživatelů. V České republice jsou podle aktuálních dat tato čísla ještě více nakloněná pro uživatele mobilních zařízení – podle mezinárodního průzkumu Mediascope se přes mobilní telefon připojuje v ČR na 14 % uživatelů, přes tablety potom 3 % (mediaguru, 2012). Příklady poměrů k přístupům na desktopovou a mobilní verzi webů z portfolia Seznam.cz uvádím v příloze 2. Jak se ale chovají uživatelé mobilního internetu? Co čekají od mobilních stránek? Na tyto otázky se pokusím odpovědět v následujícím odstavci.
4.3.
Co uživatelé očekávají od mobilních stránek V září roku 2012 vydala společnost Google výsledky uživatelského průzkumu
(Sterling, 2012), v němž sledovala očekávání uživatelů od mobilních verzí webových stránek. Zveřejněné informace jsou velmi zajímavé, uživatelé mobilního webu na chytrých telefonech jsou zejména velice citliví na (ne)přítomnost mobilní verze stránek:
pro 72 % uživatelů jsou mobilní stránky důležité, nicméně 96 % narazilo na stránky bez podpory mobilního webu,
12
http://www.netmarketshare.com/
42
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
74 % uživatelů se vrací na stránky, které považují za mobilně uživatelsky příjemné,
67 % uživatelů je ochotno změnit své preference nebo nakoupit zboží po návštěvě mobilních stránek, 61 % návštěvníků nemobilních webů je okamžitě opouští,
55 % uvádí, že nepřítomnost webové verze stránek pošramotí v jejich očích pověst značky,
uživatelé jsou velmi citliví na rychlost zobrazení mobilních webových stránek, 5 vteřin je dlouhá doba, zobrazení do tohoto limitu je očekávané a platí, že čím rychleji, tím lépe. V příloze 3 přikládám grafy přehledně dokumentující výsledky průzkumu:
činnosti, které uživatelé provádějí na mobilních webových stránkách, a prvky designu, kterých si uživatelé na mobilních webech cení.
4.4.
Kde a kdy používají uživatelé mobilní zařízení? Pro doplnění základního psychologického profilu uživatelů mobilních
zařízení je potřeba doplnit ještě místo, čas a příležitost, kde uživatelé využívají mobilní zařízení. Společnost Compete (Bulger, 2010) zveřejnila studii zaměřenou na místo užívání chytrých telefonů.
Kde běžně uživatelé používají chytré telefony 47%
během dojíždění do práce
62%
při sledování televize
64%
v práci
69%
při nakupování
74%
při čekání ve frontách nebo na schůzky
80%
volné chvíle během dne
84%
doma 30%
50%
Graf 12: Kde běžně uživatelé používají chytré telefony, zdroj: (Bulger, 2010)
43
70%
90%
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Z této studie vyplývá, že chytrý telefon je pro uživatele celodenním společníkem, s nímž si zkracuje volné chvíle. I když nejvíce uživatelů, celých 84 %, uvedlo použití chytrého telefonu v teple domova, hned tři umístění ze sedmi nejčetnějších jsou spojené s krácením „dlouhé chvíle“: průběžně ve volných chvílích během dne (80 %), při čekání ve frontě nebo na schůzku (74 %) a během dojíždění do práce (47 %). Kompletní výsledky studie přehledně shrnuje Graf 12. Luke Wroblewski, zakladatel myšlenky vývoje webu Mobile First, kterou detailněji popisuji v jiné části práce, si všímá také toho, že uživatelé používají chytrý telefon jakožto doplňkovou činnost (např. v práci nebo při nákupech), jíž nevěnují plně pozornost. Vzhledem k ergonomii zařízení je možné ovládat jej jednou rukou, konkrétně pak palcem. Wroblewski tento jev nazývá „One eyeball and one thumb“ (jedno oko, jeden palec) a právě dosah palce na chytrém telefonu, který je znázorněn na obrázku 5, by měl být při tvorbě mobilního webového designu zohledněn. (Wroblewski, 2011).
Obrázek 5: Dosah palce běžného uživatele na dotykovém displeji chytrého telefonu; zdroj: (Wroblewski, 2011)
44
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Pro srovnání je nutné přidat také místa, kde uživatelé nejčastěji využívají tablet. Toto srovnání přináší společnost Forrester ve výzkumu, který proběhl v dubnu 2012 ve Spojených státech (Gardner, 2012). Výsledky se mohou zdát velmi stručné, ale o to více jsou vypovídající – 88 % uživatelů využívá tablet v obývacím pokoji, 79 % v ložnici. Třetím významným místem pro užívání tabletu je práce, kterou zvolilo 24 % respondentů.
4.5.
Prognózy na trhu Podle aktuálních prognóz by počet používaných tabletů měl předstihnout
počet notebooků v roce 2017. Nárůst prodejů je totiž mnohem strmější, zatímco prognóza u notebooků hovoří o růstu z 208 milionů prodaných kusů v roce 2012 na 393 milionů v roce 2017, tablety by ve stejném období měly vyrůst ze 121 milionů na
Globální prodeje v milionech jednotek
416 milionů prodaných kusů (Indian Express, 2012).
Vývoj prodeje desktopů a notebooků vs. prodeje chytrých telefonů 800 600 400 200 0 2005
2006
2007
2008
Chytré telefony
2009
2010
2011
2012
2013
Desktopy + Notebooky
Graf 13: Vývoj prodeje desktopů a notebooků vs. prodeje chytrých telefonů; zdroj: MorganStanley13
A zatímco prodeje tabletů tento milník teprve čeká, chytrým telefonům se to již podařilo. Morgan Stanley, americká analytická společnost, v roce 2009 předpovídala, že prodeje chytrých telefonů předčí platformu PC během roku 2013, jak je vidět z grafu 13. Data z průzkumu dostupná online na adrese: http://www.morganstanley.com/institutional/techresearch/pdfs/2SETUP_12142009_RI.pdf 13
45
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
5. Techniky a trendy vývoje mobilního webového designu Kapitola se týká samotného vývoje mobilních webových stránek. Nejprve stručně popíšu klasický webový design, jemuž jsem věnoval značnou část své bakalářské práce, a který byl využíván v době, kdy prim na trhu hrály desktopy. Posléze uvedu základy webového designu pro mobilní zařízení s dotykovým ovládáním – chytré telefony a tablety. V závěru kapitoly popíšu různé přístupy k vývoji mobilních webových stránek a jejich provázanost s klasickým webem.
5.1.
Klasický webový design Základním stavebním prvkem webového designu je rozložení ovládacích
prvků na stránce, tzv. layout. Ačkoli je každý web unikátní, podobnost v základním
Obrázek 6: Základní rozložení webového layoutu, zdroj: (Bedřichová, 2008)
rozložení mají všechny stránky. Jak ukazuje obrázek 6, layout rozděluje web do několika pomyslných sekcí, přičemž každá má svůj účel:
Hlavička obsahuje především identifikační prvky, nachází se zde logo webu, motto, případně dekorační grafické prvky spojené s cílovou skupinou stránek. Hlavička standardně obsahuje také navigační prvky, které zde zastupují tzv.
46
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal záložky. Ty jsou podstatné pro orientaci na webu, neboť, jak uvádí (Krug, 2007), většina uživatelů nepřichází na homepage webu, nýbrž na stránku uvnitř webu díky odkazu z vyhledávače typu Google či Seznam.
Patička využívá, stejně jako hlavička, identifikační prvky. Tyto dvě části zůstávají téměř na všech částech webu neměnné, a zatímco hlavička by měla upoutat, v patičce nalezneme užitečné odkazy a informace o provozovateli webu.
Levý/pravý boční sloupec tvoří nejčastěji navigace, pokud web sloupce využívá, ukrývá do nich většinou odkazy v souladu s hierarchií stránek.
Tělo/hlavní obsah stránky tvoří nosnou část webových stránek, ve které se skrývá obsah, za kterým uživatel přišel. Jedná se o jedinou část, bez které se uživatelé stoprocentně neobejdou, čehož si budu všímat v pasáži o mobilním webovém designu. Ačkoli je míra variability webových layoutů obrovská, některé weby sloupce
využívají, některé si vystačí s hlavičkou a patičkou, zažilo se v klasickém webovém designu rozdělení do sloupců. Ostatně, prakticky každou část layoutu lze dále rozložit na menší a menší prvky. Vždy je ale nutné vytvořit takové konstrukční řešení, které uživateli umožní rychle a jednoduše nalézt informace, kvůli kterým na webové stránky přišel (Nadrchal, 2010).
5.2.
Mobilní webový design Mobilní webový design se, na rozdíl od klasického pro desktopové zobrazení
webových stránek, musí vypořádat hned s několika náležitostmi (Warner, a další, 2011):
co nejmenší datová náročnost,
dotykové ovládání je méně přesné než kurzor myši,
velká rozmanitost mobilních zařízení,
(řádově) menší velikost displeje.
47
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal 5.2.1.
Layout pro chytré telefony Rozložení prvků webového designu pro chytré telefony se musí vypořádat
s jedním zásadním úskalím – malým displejem. Luke Wroblewski, autor myšlenky řešení Mobile First, kterou podrobněji popisuji dále v této kapitole, tvrdí, že vše, co uživatel webu potřebuje – ať už mobilního nebo klasického – by se mělo vejít na displej chytrého telefonu. Na obrázku 7 je vidět doporučované základní rozložení layoutu, které lze využít pro weby na chytrých telefonech (Warner, a další, 2011).
Obrázek 7: Layout mobilního webu pro chytré telefony a ukázka navigace; zdroj: (Warner, a další, 2011)
Oproti klasickému webu zmizely veškeré sloupce, zůstává jediný – obsahový, který skrývá tyto části:
Hlavička obsahuje především identifikační informace a bývá neměnná napříč webovými stránkami. Nachází se zde logo webu, v případě možností doplněné o dekorativní prvky, které zaujmou oko uživatele. Hlavička by měla rovněž obsahovat minimalistickou orientační navigaci, aby uživatel věděl, kde v hierarchii stránky se nachází (viz obrázek 7). S využitím pokročilých funkcí
48
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal CSS nebo JavaScriptu lze do hlavičky zabudovat „schovávající se“ nabídku na sekce webu, fixně zobrazenou navigaci se nicméně nedoporučuje využívat (Kyrnin, 2012).
Tělo/článek je nosná část web designu, v níž se skrývá obsah, kvůli kterému uživatel na stránku přišel. Nutné je, aby byl obsah vidět bez nutnosti posouvat se po stránce níže (Warner, a další, 2011).
Vedlejší obsah může obsahovat odkazy na zajímavé články, navigaci na další sekce nebo jakýkoli obsah, který by uživatele mohl zaujmout. Na rozdíl od větších displejů, kde lze poutat pozornost i během čtení, vyžadují chytré telefony odsunutí odkazů do spodní části webového designu.
Patička obsahuje, stejně jako u klasického webového designu, zejména kontaktní informace o provozovateli webu. Bývá rovněž neměnná.
5.2.2.
Layout pro tablet Tablety mají na rozdíl od chytrých telefonů výhodu ve větším displeji, díky
čemuž je možné využít i layout využívající více sloupců.
Obrázek 8: Layout mobilního webu pro tablety; zdroj: (Warner, a další, 2011)
49
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Stále zde však zůstává úskalí méně přesného dotykového ovládání, které nutí vývojáře pracovat s většími plochami. Dle (Warner, a další, 2011) je ideální při režimu na výšku využít jeden sloupec, zatímco v režimu na šířku u tabletů využívat layout o dvou sloupcích, který přeskupí prvky z webového designu pro chytré telefony, jak je vidět na obrázku 8.
Hlavička obsahuje kontent obdobný tomu z chytrých telefonů, více prostoru umožňuje skrýt do hlavičky další funkce, např. navigaci nebo vyhledávání.
Tělo/článek, stejně jako u chytrých telefonů nosná část web designu, kvůli níž uživatel na stránku přišel.
Vedlejší obsah může obsahovat odkazy na zajímavé články, reklamy a další lákadla. Na rozdíl od chytrých telefonů je možné tyto sekce zobrazit na viditelné části obrazovky bez nutnosti posouvat obsah dolů.
Patička obsahuje, totožně jako u chytrých telefonů, neměnné kontaktní informace a detaily o provozovateli webu.
5.2.3.
Tipy pro mobilní webový design Pro doplnění přidávám několik tipů pro tvorbu mobilního webového designu,
případně faktů, na které je nutné se při návrhu zaměřit (Lopuck, 2012): Pozor na PPI rozlišení displeje. PPI (pixels per inch) je parametr displeje, který ukazuje hustotu zobrazovacích bodů na palec. Čím větší PPI, tím ostřejší a hladší je obraz. Průkopníkem zařízení s vyšším PPI displejů je společnost Apple, která v roce 2010 představila chytrý telefon iPhone 4 s Retina displejem, jehož síť pixelů není možné lidským okem spatřit (Jones, 2010). Příklady parametrů displejů současných modelů chytrých telefonů a tabletů ukazuje následující tabulka 9:
50
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Tabulka 9: Přehled parametrů displejů současných chytrých telefonů a tabletů; zdroj: heureka.cz
Výrobce
Typ
Displej
Rozlišení (PPI)
Rozlišení (px)
Apple
iPhone 2G, 3G a 3GS
3,5 palců
163 ppi
320x480 px
Apple
iPhone 4 a 4S
3,5 palců
326 ppi
640x960 px
Samsung
Galaxy S II
4,5 palců
218 ppi
480x800 px
Nokia
Lumia 920
4,5 palců
332 ppi
1280 x 768 px
Samsung
Galaxy SIII
4,8 palců
306 ppi
1280x720 px
Samsung
Galaxy Tab
7 palců
170 ppi
1024x600 px
Amazon
Kindle Fire
7 palců
169 ppi
1024x600 px
Apple
iPad Mini
7,9 palců
163 ppi
1024x768 px
Apple
iPad (1. a 2. generace)
9,7 palců
132 ppi
1024x768 px
Apple
Nový iPad (3. gen.)
9,7 palců
264 ppi
2048x1536 px
Samsung
Galaxy Tab 2
10.1 palců
149 ppi
1024x600 px
Zjednodušení navigace Kvůli rozdílnému ovládání je nutné tomuto přizpůsobit i design mobilních webů. Jak jsem již uváděl výše, navigace by měla být co nejjednodušší a současně využívat co největší plochy, aby se je dalo snadno stisknout s použitím prstu. Mezi osvědčené postupy patří i vložení odkazu na plnohodnotnou verzi stránek, což zamezí případné frustraci uživatelů, kteří hledají konkrétní specifickou oblast normální webové stránky (Lopuck, 2012). Redukce datového objemu Pokrytí rychlým mobilním internetem patří v ČR k nejhorším v Evropské Unii, jak jsem uváděl výše. Tento fakt, spolu s datovými limity, nutí vývojáře mobilních webů k redukci datového objemu, čehož lze dosáhnout kompresí obrázků, vymazáním zbytečných řádků kódu, komentářů, atp. (Lopuck, 2012) Odstranění zbytečných sloupců Mobilní weby si ve valné většině vystačí s jedním, v případě velkých tabletů v orientaci na šířku pak maximálně se dvěma sloupci. Místo přibližování a oddalování obsahu je uživatelsky příjemnější posouvání stránky směrem dolů za expandujícím obsahem, pročež je jeden sloupec dostačující (Lopuck, 2012).
51
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Délka URL, názvu, odkazů, velikost tlačítek Tento bod je také spojen s ovládáním platforem, které není u chytrých telefonů a smartphonů tak přesné jako u desktopů. Doporučuje se tak např. využívat co nejkratší URL adresy, v případě hypertextových odkazů v textu pak nezahrnovat do odkazu pouze jedno slovo, ale delší řetězec (Kyrnin, 2012). Současně je nutné také dodržovat určité velikosti tlačítek a mezer mezi nimi, aby nedocházelo k milným kliknutím, neboť (Wroblewski, 2011) uvádí, že téměř polovina uživatelů mobilních aplikací klikne omylem na obsah, který nechtěli zobrazit, např. reklamu. Společnost Apple doporučuje velikost tlačítek 44x44 bodů (nikoli pixelů, aby zobrazení bylo univerzální pro všechny displeje s různým PPI), zatímco Microsoft ve svých doporučovaných hodnotách uvádí velikost tlačítka 7x7mm a mezeru alespoň 2mm velkou (Wroblewski, 2011).
Obrázek 9: Doporučované velikosti tlačítek u chytrých telefonů dle spol. Microsoft; zdroj: (Wroblewski, 2011)
5.2.4.
Kufrový test Vzhledem k zmiňovanému faktu, že pro většinu uživatelů představuje
v posledních
letech
základním
výchozím
bodem
při
procházení
internetu
vyhledávač, ať už Google, Seznam či jiný, je nutné tomuto faktu uzpůsobit i samotný design webu, což platí i pro mobilní stránky. Návštěvník se totiž musí ve většině
52
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal případů sám zorientovat v obsahu webu. Při návrhu je nutné se tímto řídit, a pokud je to možné, ještě před spuštěním analyzovat design například s využitím tzv. kufrového testu (Krug, 2007). Ten říká, že pokud jsou stránky navrženy dobře, neměl by uživatel mít problém okamžitě odpovědět na následující otázky (Nadrchal, 2010):
O jaký server se jedná? (Logo serveru)
Na jaké jste stránce? (Název stránky)
Jaké jsou hlavní sekce tohoto webu? (Sekce)
Jaké na této úrovni máte možnosti? (Lokální navigace)
Kde se nacházíte v hierarchii serveru? (Ukazatele „zde se nacházíte“)
Jakým způsobem můžete vyhledávat?
5.3.
Typy provedení mobilního webu Vedle webového designu je nutné také řešit, jak zobrazit pro různá zařízení
patřičnou verzi webu. Existuje dvojice rozdílných přístupů, jak se k realizaci postavit (Ronan, 2011): -
separátní mobilní web,
-
flexibilní web, který se přizpůsobí cílovému zařízení. Toto základní rozdělení v sobě skrývá i dvojí podstatu vytváření mobilních
webů. První má za úkol přinést zcela specifický a plnohodnotný zážitek z užívání webu na mobilních zařízeních, zatímco druhý se snaží sjednotit návrhy a realizaci napříč platformami. 5.3.1.
Separátní mobilní web Separátní mobilní web, který je samostatný oproti klasické verzi webových
stránek, je varianta řešení, která je vhodná pro již zaběhnuté weby, u kterých se neplánuje redesign. Vytvoření mobilní verze stránek umožní dodat plnohodnotné užívání webu i návštěvníkům na mobilních zařízeních – chytrých telefonech nebo
53
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal tabletech. Původní myšlenky, které doporučovaly vytvořit pro mobilní web zcela novou doménu, se dnes již považují za zastaralé a scestné. I tak stále fungují některé stránky, jež v této době vznikly, např. www.amazon.mobi nebo www.foxnews.mobi (Stauffer, 2012). Modernějším řešením je uložení mobilních verzí stránek na subdoménu, což využívají např. české zpravodajské servery: m.idnes.cz nebo m.ihned.cz. V poslední době vznikají také speciální verze stránek pro tablety, z českých zpravodajských serverů na této verzi pracuje např. idnes.cz, který ji nazývá „dotyková verze“ (Lupa.cz, 2012), která bude po dokončení přístupná na webu t.idnes.cz. Technicky se separátní mobilní web řeší detekcí zařízení na serveru a přesměrováním na příslušnou verzi mobilního webu. Výhodou je malá datová náročnost mobilních stránek a možnost připravit pro uživatele plnohodnotný zážitek z využívání mobilního webu, nevýhodou pak vysoká náročnost spojená s nutností přizpůsobovat nastavení pro nová zařízení. 5.3.2.
Flexibilní web Flexibilní web vychází z myšlenky „One Web“, která tvrdí, že by všichni
uživatelé měli mít nárok na přístup k totožnému webu a tím pádem i k totožným službám a informacím (Rabin, a další, 2008). Webové stránky by tak měly být schopné se přizpůsobit zařízení, na kterém jsou zobrazovány, a současně neochudit uživatele o žádnou funkcionalitu. Tuto myšlenku splňují i techniky Responsive Web Design (responsivní webový design) a Mobile First, kterým věnuji další část kapitoly.
5.4.
Responsivní webový design Zatímco před třemi lety bylo nutné optimalizovat webové stránky pro čtyři
základní typy rozlišení obrazovky, aktuální situace je mnohem rozmanitější. Srovnání je zřetelné z grafů používaných rozložení v České republice na obrázcích 10 a 11, data pochází z průzkumu společnosti TOPlist, s.r.o.14.
14
http://www.toplist.cz
54
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
Obrázek 10: Graf statistického vývoje využívaných rozlišení obrazovky na přelomu roku 2009 a 2010; zdroj: www.toplist.cz
Obrázek 11: Graf statistického vývoje využívaných rozlišení obrazovky na přelomu roku 2011 a 2012; zdroj: www.toplist.cz
Počet zařízení, z nichž se lze připojit k internetu, roste a s ním i rozmanitost jejich displejů, což je vidět z výše uvedené tabulky 9. Weboví designéři tak musí optimalizovat své webové stránky pro více typů displejů, což znamená více práce, více programovacího kódu a také vyšší náklady. Metoda responzivního webdesignu, kterou publikoval Ethan Marcotte (Marcotte, 2011), pomáhá tento problém poslední doby řešit.
Weby postavené na této metodě se totiž dokážou flexibilně
55
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal přizpůsobovat velikosti displeje, na němž jsou zobrazeny. Ethan Marcotte tvrdí, že by se weboví designéři měli oprostit od základní premisy udávání rozměrů v přesném počtu pixelů, ale přesunout se k mnohem flexibilnějším řešením. Metoda responsivního webového designu se skládá ze tří kroků: 1. Flexibilní layout založený na mřížce 2. Flexibilní obsah včetně obrázků 3. Rozlišování typu média S využitím všech tří elementů lze vytvořit naprosto flexibilní design webových stránek, který se bude přizpůsobovat všem technologickým omezením a potřebám uživatelů napříč platformami. 5.4.1.
Flexibilní layout založený na mřížce K určení velikosti prvků v layoutu se využívají hodnoty u parametrů jako
width, height, margin, padding. Klasické pojetí rozložení prvku webového designu, oddílů, sloupců, atp. – spoléhá na jejich přesné definování konkrétním číslem. Například při použití následujícího kódu bude mít webová stránka šířku 960 a vnější okraj 36 pixelů, uvnitř které bude obsahové pole široké 900px ukrývající dva sloupce, levý široký 566px a pravý 331px: #page { width: 960px; } .web { width: 900px; } .web .levy { float: left; width: 566px; } .web .pravy { float: left; width: 331 px; }
56
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Tento design bude bez problémů fungovat na všech zařízeních, která mají zobrazovací plochu prohlížeče širší než 960px. Jak už jsem uvedl v předchozí kapitole, do této kategorie spadají prakticky pouze osobní počítače, mobilní platformy typu tablet nebo chytrý telefon, ale i některé netbooky, už mohou mít se zobrazením problémy. Na druhé straně spektra může být zobrazení nedokonalé i na velmi velkých displejích, široké Full HD displeje vytvoří okolo stránky nevzhlednou nevyužitou plochu. K odstranění tohoto problému nabádá (Marcotte, 2011) využitím poměrných velikostí webových elementů. Procentuální převod CSS atributu width Podle pravidla, které říká, že procentuální velikost atributu width zobrazuje poměrnou část z nadřazeného prvku, lze předělat layout do stavu, kdy se bude flexibilně upravovat podle velikosti displeje, na nichž se webová stránka zobrazuje. Po převodu atributů width vypadá kód následovně: #page { width: 90%; } .web { width: 93.75%; } .web .levy { float: left; width: 62.889%; } .web .pravy { float: left; width: 36.778 px; }
Prvním a nejzásadnějším upraveným prvkem je šířka stránky, od níž se odvíjí veškeré další výpočty. Pro jednoduchost přichází záměna 960px na 90 % zobrazované
šířky
stránky.
U
dalších
elementů
pokračují
výpočty
vždy
z nadřazeného prvku, pro .web představuje 900px 93,75 % z nadřazených 960px.
57
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Stejně tak u sloupců, pro něž je nadřazený element .web o šířce 900px, přichází převod z 566px na 62,889 %, respektive z 331px na 36,778 %. Procentuální převod CSS atributů margin a padding Dalšími atributy, které je nutné převést do procentuální flexibilní formy, jsou margin a padding. Margin představuje vnější okraj objektu, padding vnitřní okraj, což názorně předvádí obrázek 12.
Obrázek 12: Názorné vysvětlení CSS atributů margin, border, padding a width; zdroj: převzato z www.jakpsatweb.cz/okraje.html
Výpočty pro oba prvky se provádějí odlišně, což může být poněkud matoucí (Marcotte, 2011): -
Atribut pro vnější okraj, margin, odvozuje svou procentuální velikost od jemu nadřazeného prvku.
-
Atribut pro vnitřní okraj (též výplň), padding, odvozuje svou procentuální velikost od velikosti jeho samého.
-
V případě použití záporného odsazení se výpočet procentuálního atributu neliší.
58
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Flexibilní CSS atributy velikosti písma Typické nastavení velikosti písma bývá dle Ethana Marcotteho (Marcotte, 2011) určeno na základě konstantních čísel, stejně jako výše uvedené rozměry prvků layoutu. Například následující část kódu určuje velikost fontu běžného odstavcového písma jakožto nativní velikost textů v prohlížeči, zatímco velikost stylu nadpisu H1 je 24px. body { font: normal 100% Cambria, Georgia, serif; } h1 { font-size: 24px; font-style: italic; font-weight: normal; }
Za běžných okolností by bylo vše v pořádku. Pokud se však velikost základního fontu v prohlížeči změní, nezůstane zachován poměr mezi velikostí fontů stylu nadpisu H1 a odstavcového textu. Pro převod do mnohem flexibilnější formy lze uvádět hodnoty v atributu font-size v jednotce em. Ta v sobě skrývá relativní hodnotu rovnou velikosti jednoho řádku základního písma. Za předpokladu, že základní velikost písma v prohlížeči je rovna 16px, lze následně provést převod ukázkové části kódu do flexibilní formy následovně: h1 { font-size: 1.5em; font-style: italic; font-weight: normal; }
5.4.2.
Flexibilní obsah včetně obrázků Po nastavení flexibilních velikostí prvků layoutu a stylů textů přichází další
překážka – obrázky, vložená videa a další objekty. Při vložení obrázků do kódu bez jakýchkoli omezení budou tyto ignorovat rozměry prvku, do něhož byly vloženy, a libovolně se rozpínat na svou původní velikost. Abychom tomuto zamezili, stačí dle Ethan Marcotteho (Marcotte, 2011) dosadit k obrázku parametr max-width: 100%,
59
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal který vytvoří omezení rozměrů na 100% rozměrů nadřazeného prvku. Pokud tedy vložíme obrázek o rozměrech 1000x1000px do sloupce o šířce 500px, bude zobrazen v rozměrech 500x500px. Změní-li se flexibilně šířka sloupce, změní se s ní i velikost zobrazeného obrázku. Atribut max-width: 100% je možné využít u všech vložených obsahů, nejen u obrázků. Následující příklad ošetří i další typy objektů: img, embed, object, video { max-widht: 100%
} Toto řešení je kompatibilní se všemi aktuálními verzemi nejpoužívanějších prohlížečů – Chrome, Firefox, Internet Explorer, Safari i Opera. Problémy by se mohly objevit pouze v případě užití Internet Explorer 6, nicméně podle statistických přehledů už tuto verzi používá méně než 1,63 % uživatelů. 15 5.4.3.
Rozlišování typu média Flexibilní rozložení prvků layoutu webového designu zdaleka není
univerzálním řešením pro všechny platformy a typy obrazovek, ale jeho nedílnou součástí. Jelikož není prakticky možné vytvořit ideální univerzální design, který by vypadal dobře na displejích chytrých telefonů a fullHD monitorech, přichází na řadu třetí krok – specifická nastavení layoutu pro specifická zařízení. K tomu lze využít CSS atribut media, který umožňuje definovat různá nastavení pro rozdílné typy displejů. Konkrétně se jedná o tyto typy médií:
all o Vhodné pro všechna zařízeni.
braille o Pro čtecí zařízení pro nevidomé.
embossed o Pro tiskárny braillova písma.
15
Statistiky převzaty z http://www.w3counter.com/globalstats.php; listopad 2012
60
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
handheld o Pro handheldy (typicky malé displeje, omezená rychlost připojení).
print o Pro stránový tisk a náhledy před tiskem.
projection o Pro prezentace, například pro projektory.
screen o Primárně pro barevné displeje počítačů.
speech o Pro řečové syntezátory.
tty o Pro média využívající zobrazení s pevnou mřížkou písma (např. terminály nebo přenosná zařízení s omezenou možností zobrazování.
tv o Pro TV zařízení (nízké rozlišení, barvy, zvuk).
Hodnoty, které mohou nabývat, jsou zobrazeny v tabulce 10. Tabulka 10: Přehled jednotlivých typů médií v CSS, zdroj: převzato z http://www.w3.org/TR/CSS21/media.html#media-types
Typy médií
Skupiny médií plynulá/
vizuální/zvuková/
mřížka/
interaktivní/
stránková
mluvená/hmatová
bitmapa
statická
Braille
Plynulá
Hmatová
Mřížka
Oboje
Embossed
Stránková
Hmatová
Mřížka
Statická
Handheld
Oboje
Vizuální/zvuková/mluvená
Oboje
Oboje
Print
Stránková
Vizuální
Bitmapa
Statická
Projection
Stránková
Vizuální
Bitmapa
Interaktivní
Screen
Plynulá
vizuální/zvuková
Bitmapa
Oboje
Speech
Plynulá
Mluvená
Není
Oboje
k dispozici Tty
Plynulá
Vizuální
Mřížka
Oboje
Tv
Oboje
vizuální/zvuková
Bitmapa
Oboje
Při specifikaci lze buď odkazovat na separátní soubor obsahující stylesheet pro každý typ média, < link rel=“stylesheet“ href=“global.css“ media=“all“ /> < link rel=“stylesheet“ href=“paper.css“ media=“print“ />
61
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal nebo vytvořit @media blok přímo ve stylesheetu @media print { body { color: black; font-size: 16px; } }
Využití media types je velmi užitečné a praktické, nicméně ani to se neobejde bez problémů. Tím je především příliš obecná specifikace jednotlivých typů zařízení. Využití atributu handheld v sobě může skrývat současně nejnovější generaci chytrého telefonu
iPhone
a
pět
let
starý
mobilní
telefon
značky
Nokia
s miniaturním displejem. Řešení skrývá media queries (Rivoal, 2012), díky kterým lze kombinovat typ média s jeho specifickými vlastnostmi: @media screen and (min-width: 1024px) { Body { Font-size: 100%; } }
Na příkladu je vidět, že media queries jsou tvořena dvěma komponentami (Marcotte, 2011): 1. Každá specifikace media query začíná určením typu média, pro které jsou atributy určeny, což vychází ze seznamu CSS2.1, viz tabulka 10 (v příkladu screen) 2. Druhá položka představuje konkrétní požadavek na specifikaci parametrů zařízení – doplňkový atribut. Skládá se z dvojice komponent – jména požadovaného atributu (v příkladu min-width) a odpovídající hodnoty (1024px). Požadované vlastnosti budou v tomto případě využity v případě, že se webová stránka zobrazí na displeji, jehož šířka je alespoň 1024px. Kombinace typů médií (viz tabulka 10) a doplňkových atributů umožňuje přesnější specifikaci
62
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal zařízení, na němž budou stránky zobrazeny. Následující tabulka 11 přináší přehled možných doplňkových atributů včetně jejich vysvětlení a uvedení, zda u nich lze využít předpony min- a max- pro minimální, respektive maximální velikost daného atributu. Tabulka 11: Definice doplňkových CSS atributů, zdroj: (Marcotte, 2011)
Jméno atributu
Definice
Předpony min- a max-
Width
Šířka zobrazované oblasti
Ano
Height
Výška zobrazované oblasti
Ano
Device-width
Šířka zobrazovací plochy přístroje
Ano
Device-height
Výška zobrazovací plochy přístroje
Ano
Orientation
Nabývá hodnot portrait a landscape, tj.
Ne
orientace na výšku a na šířku Aspect-ratio
Poměr stran zobrazované oblasti. Např. na
Ano
desktopu je nyní nejčastější poměr stran 16:9 Color
Možnost zobrazení počtu barev v bitech na
Ano
pixel. Displeje bez možnosti zobrazit barvu vrací hodnotu 0 Color-index
Počet barev, které může displej zařízení
Ano
zobrazit Monochrome
Podobně jako color umožňuje zjistit počet
Ano
bitů na pixel u monochromního přístroje. Resolution
Tyto
atributy
Zjišťuje hustotu pixelů zařízení
Ano
lze v media queries libovolně kombinovat
s využitím
spojovacích logických operátorů and, not a only (Karahalis, 2012). Kombinace nejsou omezeny pouze na dvojici parametrů, jejich počet není omezený. Například pro zařízení typu iPhone 4S v zobrazení na šířku, které využívá rozlišení 960x640 pixelů, lze použít následující podmínku: @media handheld and (max-device-width: 960px) and (orientation: landscape) { … }
63
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal S využitím kombinací jednotlivých atributů lze snadno vytvořit několik na sebe navazujících flexibilních rozložení prvků stránky, které se budou dobře zobrazovat prakticky na kompletním spektru přístrojů s přístupem k internetu. Ethan Marcotte ve své publikaci uvádí seznam breakpointů, z nichž vychází při definování media queries pro své stránky: Tabulka 12: Seznam dělících rozměrů pro volbu designu, zdroj: (Marcotte, 2011)
Breakpoint
Popis zařízení
320px
Pro malá zařízení jako telefony v režimu na výšku
480px
Pro malá zařízení jako telefony v režimu na šířku Pro menší tablety, jako je Amazon Kindle a Barnes & Noble Nook
600px
v režimu na výšku
768px 1024px
Pro desetipalcové tablety v režimu na výšku Pro desetipalcové tablety v režimu na šířku, případně osobní počítače s malým displejem
1200px
Pro široké obrazovky, primárně na osobních počítačích
Díky metodě responzivního webového designu je možné vytvořit design, který se flexibilně přizpůsobuje velikosti displeje zařízení, na němž je zobrazen. Responzivní webový design tak úspěšně řeší rozmanitost současných zařízení, má však jeden nedostatek. Nutí uživatele stahovat zbytečné části kódu, které pro své zařízení nepotřebuje, což zvyšuje celkovou datovou náročnost webu. Jedno z možných řešení tohoto problému je myšlenka Mobile First, kterou představuji v následující kapitole.
5.5.
Mobile First Základem
metodiky
responzivního
webového
designu
je
vytváření
flexibilního webu vycházejícího z návrhu plnohodnotných stránek. Toto považuje za problém Luke Wroblewski, který tvrdí, že uživatel od webu vyžaduje pouze obsah, který se vejde na obrazovku chytrého telefonu. Na základě toho formuloval postup řešení s přístupem označovaným Mobile First (Wroblewski, 2011). Ten přistupuje 64
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal k problému vývoje webových stránek reverzní formou, kdy se začíná od návrhu pro chytré telefony, ze kterého vychází další postup. Díky tomu, že se autoři webů zaměří nejdříve na malou plochu displeje chytrých telefonů, dokážou eliminovat zbytečný obsah, který zvyšuje datovou náročnost a snižuje přehlednost webových stránek. Mezi něj patří například obrázky, JavaScriptové knihovny, ale i sekce, které nejsou pro web důležité. Mobile First tak dokáže přimět webové designéry k „očistění“ stránek a zanechání pouze toho, o který uživatelé opravdu stojí. Mobile First není metodikou, ale technikou přístupu k řešení. Neskrývá žádné ucelené postupy, jedná se spíše o sadu rad a doporučení. I tak se nebojím nazývat Mobile First revoluční myšlenkou, která by v blízké budoucnosti mohla očistit web od zbytečného obsahu: „I když se na desktopech vedly léta spory o tom, jaká velikost displeje je optimální, shodli jsme se, že 1280x1024px je naší písečnou pláží. V dnešní době nám mobily berou naší prosluněnou pláž a mění ji v malé pískoviště. … První generace chytrých telefonů na iOS, Androidu a WebOS se zasekly na rozlišení 320x480px, což znamená, že 80 % z velikosti obrazovky na desktopech je pryč. To znamená, že 80 % odkazů, reklam, textu, obrázků a dalších věcí z našeho designu pro desktop vzalo za své a muselo zmizet. Nebylo pro ně zkrátka na mobilních zařízeních místo. A to je úžasné.“ (Wroblewski, 2011) 5.5.1.
Mobile First v praxi Myšlenka Mobile First nezůstala pouze u teorie, ale začíná se prosazovat
i v praxi. Na začátku roku 2012 provedl redesign zpravodajský server Sport.cz, z něhož je na první pohled znát inspirace právě myšlenkou Mobile First. Srovnání předchozího designu s aktuálním přikládám na obrázku 13.
65
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
Obrázek 13: Srovnání webového designu zpravodajského serveru Sport.cz v letech 2009 a 2012; zdroje: tým sport.cz (levá ilustrace), vlastní (pravá ilustrace)
Na levé části je vidět starý design z prosince roku 2009, kdy byl webový design založen na klasickém schématu obsahujícím několik různých obsahových sloupců. V horní části je možné vidět navigační pás, pod ním upoutávku na článek
66
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal dne a ve sloupci napravo od něj novinkový servis. Ve srovnání s aktuální verzí webu se jedná o mnohem komplexnější, složitější a datově náročnější. Verze z roku 2012 obsahuje design založený pouze na jednom sloupci, jednoduchou navigaci a expanzi webu pouze ve vertikále, nikoli horizontále. Volný prostor vedle hlavního sloupce bývá na displejích s vyšším rozlišením vyplněn ilustrační fotografií, čímž je jednoduchý design elegantně doplněn. Na následující ilustraci na obrázku 14 přidávám aktuální zobrazení webu sport.cz na mobilních zařízeních iPad a iPhone.
Obrázek 14: Ukázka zobrazení serveru sport.cz na zařízení iPad (nalevo) a iPhone (napravo); zdroj: vlastní
67
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
6. Analýza
multiplatformního
přístupu
k webovým
stránkám
vybraných společností Praktickou část mé diplomové práce věnuji analýze multiplatformního přístupu k webovým stránkám trojice vybraných společností s důrazem na připojení z chytrých telefonů a tabletů. Po zralé úvaze jsem se rozhodl pro trojici společností, které v současné době zajišťují železniční dopravu v České republice, a to České dráhy, LEO Express a RegioJet. Důvodů pro tuto volbu bylo hned několik: -
konkurenční boj v oblasti železniční dopravy začal v České republice v nedávné době, RegioJet vstoupil na trh v dubnu 2011, LEO Express v listopadu 2012, webové stránky jsou důležitou součástí komunikace se zákazníky a dá se zde očekávat snaha o vytvoření co nejmodernějšího webu,
-
železniční síť není kompletně pokrytá signálem 3G internetu a bezdrátový internet není standardní výbavou všech vlaků, mobilní verze stránek tak je více uživatelsky příjemná,
-
díky dynamickému růstu IT odvětví a jeho pronikání do běžných životů mohou dopravci rozšířit své služby i tímto směrem např. online prodejem jízdenek, sledováním zpoždění vlaků, zjištěním nejbližší zastávky, atp. Ve své analýze hodnotím zejména přístup webových stránek k mobilním
zařízením. K tomu jsem využil služeb webového emulátoru BrowserStack16, konkrétně měsíční individuální přístup v ceně 19USD. Emulátor BrowserStack umožňuje simulaci zobrazení webových stránek jak na desktopech, tak i na tabletech a chytrých telefonech na mobilních operačních systémech iOS a Android, tj. nejvyužívanějších systémech na trhu. Zaměřil jsem se na optimalizaci pro jednotlivé druhy mobilních zařízení, možnosti ovládání webů prostřednictvím dotykových displejů a také na to, zda se na webech nachází informace, které uživatelé očekávají (např. kontaktní telefonní číslo, propojení se sociálními sítěmi nebo vyhledávací 16
http://www.browserstack.com
68
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal panel). Ilustrace znázorňující zobrazení webových stránek na jednotlivých mobilních zařízeních jsou k nahlédnutí v příloze 4.
6.1.
Metodika hodnocení U všech tří webových prezentací nejprve uvádím několik základních
informací o společnosti, kterou zastupují. Následně provádím analýzu na základě tří skupin kritérií – multiplatformní přístup, přehlednost a použitelnost mobilní verze, obsah a služby mobilní verze – pro něž jsem určil váhu hodnocení a z nichž následně vyvozuji závěry a doporučení pro tvůrce webu. Pro hodnocení používám metodu multikriteriálního hodnocení, které pro přehlednost rozděluji do tabulek. V nich uvádím hodnocení 0-10, kde 10 hodnotí perfektní zvládnutí dané oblasti, 0 absenci prvku nebo nefungující prvek. Položky, které umožňují odpověď ANO/NE, jsou v číselném hodnocení zastoupeny hodnotami 10 a 0. V případě, že je kritérium splněno částečně, hodnotím 5 body.
6.2.
Seznam kritérií Následuje tabulka 13 kritérií společně s váhami, které jsem přiřadil
jednotlivým kategoriím. Podrobnější popis jednotlivých položek následuje níže pod tabulkou.
69
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Tabulka 13: Přehled kritérií analýzy; zdroj: vlastní
Analýza multiplatformního přístupu Má stránka separátní mobilní verzi? Datová náročnost mobilní verze webu Posuv pouze v jednom směru Vejde se ve 100% zobrazení na obrazovku? Chytrý
Testování zobrazení – iOS Safari – bezchybné zobrazení v režimu na
telefon
výšku a na šířku Testování zobrazení – Android Browser – bezchybné zobrazení v režimu na výšku a na šířku
Váha
Testování zobrazení – Opera Mini – bezchybné zobrazení v režimu na
50 %
výšku a na šířku Používá stránka pro tablet mobilní verzi webu? Datová náročnost verze webu zobrazené na tabletu Tablet
Testování zobrazení – iOS Safari – bezchybné zobrazení v režimech na výšku a na šířku Testování zobrazení – Android Browser – bezchybné zobrazení v režimech na výšku a na šířku Je webová stránka responsivní?
Desktop
Testování zobrazení – bezchybné zobrazení v rozlišení 1920x1080 Testování zobrazení – bezchybné zobrazení v rozlišení 1024x768
Analýza přehlednosti a použitelnosti verze zobrazené na mobilních telefonech Identifikace webu – logo Jednoduchost navigace Váha
Konzistence navigace
30 %
Viditelnost odkazů Kufrový test Dostatečná velikost ovládacích prvků Délka URL adresy Analýza obsahu a služeb verze zobrazené na mobilních telefonech Je možné zobrazit plnohodnotný web v mobilní verzi? Vyhledávací panel Kontaktní telefon
Váha
Kontaktní email
20 %
Propojení se sociálními sítěmi Rezervace jízdenek Zobrazení jízdních řádů Zpoždění vlaků Zobrazení nejbližší zastávky
70
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal 6.2.1.
Analýza multiplatformního přístupu 50 % Vzhledem k zaměření analýzy, tj. na zjištění, zda jsou webové stránky
železničních dopravců v ČR plnohodnotně přístupné napříč platformami, jsem této nejrozsáhlejší kategorii přidělil nejvyšší váhu, tj. 50 %. Je rozdělena do tří částí, v nichž postupně testuji přístupy z chytrých telefonů, tabletů a desktopů s vysokým a nízkým rozlišením představující hi-end notebook a netbook. Zvolené platformy, operační systémy a prohlížeče byly vybrány na základě aktuálního zastoupení na trhu. Následuje podrobnější popis jednotlivých položek včetně popisu bodového hodnocení. Chytrý telefon
Má stránka separátní mobilní verzi?: Hodnotí, zda se po připojení z chytrého telefonu zobrazí webová stránka optimalizovaná pro malý displej, výstup: ANO/NE.
Datová náročnost: Hodnotí objem dat, který byl potřeba ke stažení verze dostupné z mobilního telefonu. Výstupem 0-10, kde 10 představuje objem pod 200kB, s každým 200kB odečítám 1 bod. Datovou náročnost měřím s využitím online nástroje na stránkách PingDom.com17.
Posuv pouze v jednom směru: Zkoumá chování stránky při 100% přiblížení. Výstupem je hodnocení ANO/NE.
Vejde se v 100% přiblížení na obrazovku? : Výstupem je hodnocení ANO/NE .
Testování zobrazení o iOS Safari: Testování probíhá na dvou verzích chytrých telefonů s operačním systémem iOS, jeden s Retina displejem, druhý bez něj s nižším PPI. Výstupem je průměrné hodnocení 0-10 pro varianty zobrazení na výšku a na šířku.
17
http://tools.pingdom.com/fpt/
71
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal o Android Browser: Obdobně jako u iOS i zde testování na dvojici zařízení s rozdílným PPI displeje. Výstupem je průměrné hodnocení 0-10 pro varianty zobrazení na výšku a na šířku. o Opera Mini: Testování zobrazení v prohlížeči Opera Mini, výstupem je průměrné hodnocení 0-10 z režimů na výšku a na šířku. Tablet
Používá stránka pro tablet mobilní verzi webu?: Hodnotí, zda se po připojení z tabletu zobrazí webová stránka optimalizovaná pro dotykový displej, výstup: ANO/NE. V případě, že se na různých zařízeních zobrazují jiné verze webu, je výstupem průměr z těchto hodnot.
Datová náročnost verze webu zobrazené na tabletu: Hodnotí objem dat, který byl potřeba ke stažení verze dostupné z tabletu. Výstupem 0-10, kde 10 představuje objem pod 200kB, s každým dalším 200kB odečítám 1 bod. V případě, že se na různých zařízeních zobrazují jiné verze webu, je výstupem průměr z těchto hodnot.
Testování zobrazení o iOS Safari: Testování probíhá na dvou verzích tabletů s operačním systémem iOS, jeden s Retina displejem, druhý bez něj s nižším PPI. Výstupem je průměrné hodnocení 0-10 pro varianty zobrazení na výšku a na šířku. o Android Browser: Testování na tabletu se systémem Android, výstupem průměrné hodnocení 0-10 v režimech na výšku a na šířku.
72
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Desktop
Je webová stránka responsivní: Hodnotí, zda se layout webové stránky přizpůsobuje velikosti displeje, na kterém je zobrazena. Výstupem je hodnocení ANO/NE.
Testování zobrazení: Zjišťuje podporu prohlížečů a rozlišení displejů. V rozlišení 1920x1080 a 1024x768 jsou testovány výstupy v prohlížečích Internet Explorer, Google Chrome, Mozilla Firefox, Safari a Opera. Výstupem je u každého rozlišení průměrné hodnocení za všechny testované prohlížeče.
6.2.2.
Analýza přehlednosti a použitelnosti verze zobrazené na chytrých telefonech 30 % Druhá skupina kritérií hodnotí přehlednost a použitelnost mobilní verze
webových stránek železničních dopravců v ČR, respektive verze zobrazené na chytrých telefonech v případě, že daný dopravce nevyužívá separátní mobilní verzi stránek. Vzhledem k zaměření práce, které má důraz na mobilní web, testuji v této části zobrazení na chytrých telefonech. V této skupině hodnotím designové zpracování mobilní verze stránek, optimalizaci ovládání pro malé displeje a optimalizaci navigace. Druhou nejvyšší váhu pro kategorii jsem zvolil z důvodu technické povahy diplomové práce, na rozdíl od poslední kategorie, jež se dotýká služeb, je přehlednost a použitelnost více v rukou webového designéra.
Identifikace webu – Logo: určuje, zda je logo společnosti na dané stránce dostatečně viditelné, výstup ANO/NE/ČÁSTEČNĚ.
Jednoduchost navigace: určuje, zda je použitá navigace vhodná pro ovládání na chytrém telefonu, výstup ANO/NE/ČÁSTEČNĚ.
Viditelnost a velikost odkazů: určuje, zda jsou všechny aktivní odkazy na dané stránce dostatečně zřetelné, případně zda se na webu nenachází
73
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal neaktivní element, jenž by mohl v uživateli evokovat dojem aktivního odkazu. Výstup 0-10.
Kufrový test: testuje vhodnost použitého webového designu z hlediska orientace uživatele, náhodný respondent na náhodné stránce uvnitř hierarchie webu odpovídá na otázky: o O jaký server se jedná? o Na jaké jste stránce? o Jaké jsou hlavní sekce tohoto webu? o Jaké máte na této úrovni možnosti? o Kde se nacházíte v hierarchii serveru? o Jakým způsobem můžete vyhledávat? Výstupem průměr hodnocení z jednotlivých odpovědí v intervalu 0-10.
Dostatečná velikost ovládacích prvků: Testuje, zda jsou ovládací prvky upraveny pro ovládání prstem na dotykovém displeji. Hodnocení ANO/NE/ČÁSTEČNĚ.
Délka URL adresy: Testuje, jak náročné je pro uživatele napsat do prohlížeče na dotykovém displeji URL adresu. 5 znaků (XY.cz) = 10 bodů, s každým dalším znakem bod dolů.
6.2.3.
Analýza obsahu a služeb verze zobrazené na chytrých telefonech 20 % Poslední kategorie skrývá testování webů zobrazených na chytrých telefonech
v oblasti obsahu a nabízených služeb. Zohledňuje jednak očekávání uživatelů od mobilní verze stránek, jednak také možnosti interaktivních služeb v rámci daného odvětví, kterým by se společnost mohla pokusit získat zákazníka na svou stranu.
Je možné zobrazit plnohodnotný web v mobilní verzi?: Určuje, zda je na webu odkaz pro přepnutí z mobilního webu na desktopovou variantu. Výstup ANO/NE.
Vyhledávací panel: Určuje, zda je na domovské stránce vyhledávací panel. Výstup ANO/NE.
74
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
Kontaktní telefon: Určuje, zda je na domovské stránce kontaktní telefonní číslo. Výstup ANO/NE.
Kontaktní email: Určuje, zda je na domovské stránce kontaktní emailová adres. Výstup ANO/NE.
Propojení se sociálními sítěmi: Určuje, zda je webová stránka propojena se sociálními sítěmi typu Facebook, Twitter, atp. Výstup ANO/NE.
Rezervace jízdenek: Určuje, zda je možné si prostřednictvím mobilního webu zakoupit jízdenku. Výstup ANO/NE.
Zobrazení jízdních řádů: Určuje, zda je možné na mobilním webu zobrazit jízdní řády vlaků. Výstup ANO/NE.
Zpoždění vlaků: Určuje, zda je možné z mobilní webové stránky zjistit zpoždění vlaků. Výstup ANO/NE.
Zobrazení nejbližší zastávky: Určuje, zda je z mobilní webové stránky možné zjistit nejbližší železniční stanici díky polohovým službám chytrého telefonu. Výstup ANO/NE.
75
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
6.3.
České dráhy České dráhy, a.s. (dále jen České dráhy) představují největšího železničního
dopravce na území České republiky. Akciová společnost vznikla v roce 2003 jakožto jeden z nástupnických subjektů původně státní organizace České dráhy. Vlastní více jak 2600 hnacích vozidel a zaměstnává přes 22 000 zaměstnanců, v letech 2009 – 2011 přepravila ročně přes 160 milionů cestujících18. I přes svou nepříliš dobrou pověst v očích veřejnosti představují České dráhy jeden z nejkomplexnějších subjektů působících v České republice. Webové stránky společnosti, které v této kapitole podrobuji analýze multiplatformního přístupu, se nacházejí na adrese www.cd.cz. 6.3.1. Analýza multiplatformního přístupu 50 % Následuje tabulka 14 shrnující hodnocení dle daných kritérií. Tabulka 14: Analýza multiplatformního přístupu k webu Českých drah, zdroj: vlastní
Kritéria
Hodnocení
Chytrý telefon – separátní mobilní verze
10
Chytrý telefon – datová náročnost mobilní verze webu
9
Chytrý telefon – posuv pouze v jednom směru
10
Chytrý telefon – 100% zobrazení na obrazovku?
10
Chytrý telefon – iOS Safari
10
Chytrý telefon – Android Browser
9
Chytrý telefon – Opera Mini
10
Tablet – mobilní verze webu pro tablet?
5
Tablet – datová náročnost verze zobrazené na tabletu
6,5
Tablet – 100% zobrazení na obrazovku?
5
Tablet – iOS Safari
9
Tablet – Android Browser
10
Desktop – Je webová stránka responsivní?
0
Desktop – 1920x1080
9
Desktop – 1024x768
10
CELKEM
122,5/150
Data převzata z informací uvedených na webových stránkách společnosti www.cd.cz, analýza webových stránek provedena 30. 11. 2012 18
76
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Komentář: Chytrý telefon: Jakkoli mohou České dráhy působit na českém trhu nepopulárním dojmem, nelze jim upřít jeden fakt – přístup k mobilnímu webu mají příkladný, takřka dokonalý. Mobilní verze webu, která je přístupná na adrese http://m.cd.cz, má velmi nízkou datovou náročnost (cca 204kB pro načtení domovské stránky) a zobrazuje se korektně prakticky na všech testovaných typech chytrých telefonů – jediným nedostatkem bylo nevycentrování obsahu na starší verzi systému Android. Tablet: Zatímco verze pro chytré telefony je takřka dokonalá, u tabletů se projevuje špatné nastavení media queries. Zatímco tablety s menším rozlišením zobrazí mobilní verze webu se všemi svými výhodami, větší tablety, např. Apple iPad, zobrazují plnohodnotnou verzi stránek určenou pro desktopy. Nevím, zda šlo o záměr, pokud ano, se zvoleným postupem nesouhlasím. Zobrazení na tabletech probíhá bez větších nedostatků, pouze na prohlížeči Safari bylo znát drobné posunutí několika ovládacích prvků, leč nic zásadního. Desktop: Plnohodnotná verze webových stránek Českých drah je korektně odladěna pro všechny důležité prohlížeče, drobné potíže se objevily pouze u Opery s uspořádáním prvků v navigačním poli. Webová stránka nevyužívá možností responsivního webu, na vyšším rozlišení je nutné si ji pro lepší čitelnost přiblížit pomocí funkce lupa.
77
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal 6.3.2.
Analýza přehlednosti a použitelnosti verze zobrazené na chytrých telefonech 30 %
Následuje tabulka 15 shrnující hodnocení dle daných kritérií. Tabulka 15: Analýza přehlednosti a použitelnosti mobilní verze webu Českých drah; zdroj: vlastní
Kritéria
Hodnocení
Identifikace webu – Logo
10
Jednoduchost navigace
10
Viditelnost odkazů
10
Kufrový test
9,1
Dostatečná velikost ovládacích prvků
10
Délka URL adresy
10
CELKEM
59,1/60
Komentář: Identifikace webu – Logo: Logo Českých drah je zřetelně viditelné na každé stránce. Jednoduchost navigace: Navigace byla přizpůsobená potřebám ovládání webu na chytrém telefonu, je konzistentní a dostatečně jednoduchá současně. Viditelnost odkazů: Webové stránky neobsahují prvky, které by v uživateli evokovaly dojem aktivního odkazu. Kufrový test: Kufrový test proběhl standardní formou se dvěma náhodnými respondenty, menší problémy způsobovala pouze identifikace místa, kde se uživatel nachází v hierarchii serveru. Oba shodně odpověděli, že by toto rychle dohledali v mapě stránek, na kterou je odkaz ve spodní části webu. Dostatečná velikost ovládacích prvků: Další z bezproblémových prvků, tlačítka jsou dostatečně veliká a současně mezi sebou mají dostatečně velkou mezeru. Délka URL adresy: Splňuje požadavek na co nejkratší adresu, webové stránky se otevřou po zadání adresy www.cd.cz.
78
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal 6.3.3.
Analýza obsahu a služeb verze zobrazené na chytrých telefonech 20 %
Následuje tabulka 16 shrnující hodnocení dle daných kritérií. Tabulka 16: Analýza obsahu a služeb verze mobilní verze webu Českých drah; zdroj: vlastní
Kritéria
Hodnocení
Je možné zobrazit plnohodnotný web v mobilní verzi?
10
Vyhledávací panel
10
Kontaktní telefon
10
Kontaktní email
10
Propojení se sociálními sítěmi
0
Rezervace jízdenek
5
Zobrazení jízdních řádů
10
Zpoždění vlaků
8
Zobrazení nejbližší zastávky
10
CELKEM
73/90
Komentář: Je možné zobrazit plnohodnotný web v mobilní verzi?: Odkaz na plnohodnotnou verzi webových stránek je přítomný na všech testovaných stránkách webu. Vyhledávací panel: Stejně jako odkaz na plnohodnotný web je i odkaz na vyhledávání na každé testované stránce. Kontaktní telefon: Snadno dostupný přes odkaz kontakty v patičce webu. Kontaktní email: Také snadno dostupný přes odkaz kontakty v patičce webu. Propojení se sociálními sítěmi: Web Českých drah není nijak propojen se sociálními sítěmi. Rezervace jízdenek: Rezervace jízdenek prostřednictvím webového rozhraní je možná, nicméně je pro ni nutné přejít na plnohodnotnou verzi stránek, což považuji za nedostatek.
79
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Zobrazení jízdních řádů: Zobrazení jízdních řádů i s vyhledáváním funguje bezproblémově. Zpoždění vlaků: Webové stránky obsahují mapu s aktuální polohou vlaků obsahující současně i info o jejich trase, např. číslo spoje, řazení vagonů nebo zpoždění vlaku. Bohužel není možné zobrazit tabulku se seznamem spojů a přehledem zpoždění, toto však považuji pouze za drobný nedostatek. Zobrazení nejbližší zastávky: Velmi příjemná funkce webu Českých drah zobrazuje nejbližší vlakovou zastávku a umožňuje současně rychlé vyhledávání spojů z tohoto místa. 6.3.4.
Závěry vyvozené z analýzy a doporučení z nich vyplývající
Následuje tabulka 17 shrnující výsledky analýzy. Tabulka 17: Zhodnocení analýzy mobilní verze webu Českých drah; zdroj: vlastní
Počet Část analýzy
Váha
bodů/Počet
Procentuálně
Přírůstek
možných bodů Analýza multiplatformního přístupu
50%
122,5/150
82%
40,8%
30%
59,1/60
99%
29,6%
20%
73/90
81%
16,2%
Analýza přehlednosti a použitelnosti verze zobrazené na chytrých telefonech Analýza obsahu a služeb verze zobrazené na chytrých telefonech CELKEM
100%
86,6%
Z výše uvedené shrnující tabulky vyplývá, že web Českých drah je velmi kvalitně připraven pro příchod uživatelů používajících různé typy zařízení. Mobilní web se ovládá velmi intuitivně, má nízkou datovou náročnost a nabízí prakticky vše, co by uživatel mohl od tohoto typu webu očekávat, mimo testované položky například i kompletní detaily o spoji včetně řazení vagónů jednotlivých vlaků.
80
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Z analýzy přesto vzešlo několik doporučení, jejichž aplikace by stávající verzi webu ještě více vylepšila. Lepší nastavení media queries – během testování vyplynulo na povrch, že mobilní verze se nezobrazí na tabletech s vyšším rozlišením displeje, uživatelé tak musí zbytečně stahovat větší objemy dat než u mobilní verze. Doporučené řešení: nastavení přesměrování na mobilní verzi webu ze všech tabletů, popřípadě nechat volbu na uživateli a při přístupu z tabletu s vyšším rozlišením využít rozcestník na mobilní a plnohodnotnou verzi webu. Použití responsivního layoutu desktopové verze – zobrazení na displejích s vysokým rozlišením způsobí, že takřka polovinu stránky pokrývá barevný přechod na pozadí. Propojení se sociálními sítěmi – prostřednictvím sociálních sítí lze získat širší povědomí o nových službách, akčních slevách, atp. V současné době se již nejedná o konkurenční výhodu, nýbrž o standardní prvek marketingové komunikace. Tabulkové zobrazení zpožděných vlaků – zobrazení aktuální polohy vlaků s využitím mapy je jistě velmi efektní, pro vyšší přehlednost bych jej nicméně doplnil o tabulkový výpis všech vlaků s možností filtrování. Rezervace jízdenek – funkce v mobilním webu odkazuje na plnohodnotný web, implementace rozhraní pro rezervaci přímo do mobilního webu by zvýšila uživatelskou příjemnost.
81
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
6.4.
LEO Express Společnost LEO Express a.s. (dále jen LEO Express) je novým hráčem na trhu
železničních dopravců v České republice. Obsluhuje železniční trasu Praha hlavní nádraží – Bohumín, kde nabízí zákazníkům na 16 spojů denně. První souprava LEO Express vyjela na české železnice v listopadu 2012. Společnost se na zákazníky snaží zapůsobit příznivými cenami a kvalitou vlakových souprav, v nichž je například možné si zapůjčit tablet pro vyšší pohodlí na cestách. 19 Webové stránky společnosti, které v této kapitole podrobuji analýze multiplatformního přístupu, se nacházejí na adrese www.le.cz. 6.4.1. Analýza multiplatformního přístupu 50 % Následuje tabulka 18 shrnující hodnocení dle daných kritérií. Tabulka 18: Analýza multiplatformního přístupu k webu společnosti LEO Express, zdroj: vlastní
Kritéria
Hodnocení
Chytrý telefon – separátní mobilní verze
0
Chytrý telefon – datová náročnost mobilní verze webu
0
Chytrý telefon – posuv pouze v jednom směru
0
Chytrý telefon – 100% zobrazení na obrazovku?
0
Chytrý telefon – iOS Safari
8
Chytrý telefon – Android Browser
8
Chytrý telefon – Opera Mini
4
Tablet – mobilní verze webu pro tablet?
0
Tablet – datová náročnost verze zobrazené na tabletu
0
Tablet – iOS Safari
6
Tablet – Android Browser
6
Desktop – Je webová stránka responsivní?
0
Desktop – 1920x1080
9,6
Desktop – 1024x768
6,6
CELKEM
48,2/150
Data převzata z informací uvedených na webových stránkách společnosti www.le.cz, analýza webových stránek provedena 30. 11. 2012 19
82
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Komentář Chytrý telefon: Zobrazení webových stránek LEO Express na chytrých telefonech provází celá řada nedostatků. První a naprosto zásadní je absence mobilní verze stránek, uživatelé tak musí při zobrazení domovské stránky stahovat až 2MB dat. Problémů se nevyhnulo ani zobrazení v různých prohlížečích, na chytrých telefonech se ve všech testovaných případech posouvala ilustrace na pozadí spolu s obsahem, takže po chvíli přišel amatérsky vypadající konec obrázku na pozadí. U prohlížečů Safari a Android Browser šlo o jediný nedostatek, nejhorší optimalizaci mají stránky pro prohlížeč Opera Mini, kde došlo i k velkému rozhození prvků navigace a formátování nadpisů. Tablet: Podobné neduhy jako během testování webových stránek na chytrých telefonech
se
objevily
i
na
tabletech.
Vedle
vysoké
datové
náročnosti
a nezafixovaného obrázku na pozadí přibyl ještě problém s nevycentrováním obsahu. Desktop: Webové stránky společnosti LEO Express nejsou responsivní, což se projevilo při testování nejnižšího rozlišení 1024x768, kde se stránka na šířku nevešla do okna prohlížeče. Jinak byla optimalizace provedena důsledně, jediným problémem je formát nadpisů v prohlížeči Internet Explorer, kde se kolem písma vytváří nevzhledný černý lem.
83
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal 6.4.2.
Analýza přehlednosti a použitelnosti verze zobrazené na chytrých telefonech 30 %
Následuje tabulka 19 shrnující hodnocení dle daných kritérií. Tabulka 19: Analýza přehlednosti a použitelnosti mobilní verze webu společnosti LEO Express; zdroj: vlastní
Kritéria
Hodnocení
Identifikace webu – Logo
10
Jednoduchost navigace
5
Viditelnost odkazů
10
Kufrový test
8,3
Dostatečná velikost ovládacích prvků
8
Délka URL adresy
10
CELKEM
51,3/60
Komentář Identifikace webu – Logo: Logo společnosti je výrazně viditelné na všech testovaných stránkách. Jednoduchost navigace: Navigace není postavena špatně, soupis sekcí v horní části webu působí přehledně, problém je ovšem v optimalizaci pro dotykové displeje. Web totiž využívá vysouvací nabídky, které se zobrazí při najetí kurzorem myši, toho však na dotykovém displeji nelze docílit a je tak nutné vstoupit nejprve na první stránku dané sekce. Viditelnost odkazů: Odkazy jsou dostatečně viditelné, pro zdůraznění byla využita velmi výrazná zelená barva. Kufrový test: Během standardního kufrového testu, který čítal dvojici respondentů, si webové stránky společnosti LEO Express vedly velmi dobře. Jediný problém představuje určení, v jakém místě v hierarchii webových stránek se uživatel nachází, což ani jeden z respondentů nedokázal identifikovat. Dostatečná velikost ovládacích prvků: I přes absenci mobilní verze stránek využívá webová stránka dostatečně veliké ovládací prvky, což je spojené s využitím
84
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal moderního webového designu plného velkých ploch. Odkazy v navigaci a další odkazy je možné aktivovat prstem i bez přiblížení stránky, problém však představuje patička webu s minimalistickými odkazy. Délka URL adresy: Splňuje požadavek na co nejkratší adresu, webové stránky se otevřou po zadání adresy www.le.cz. 6.4.3.
Analýza obsahu a služeb verze zobrazené na chytrých telefonech 20 %
Následuje tabulka 20 shrnující hodnocení dle daných kritérií. Tabulka 20: Analýza obsahu a služeb verze mobilní verze webu společnosti LEO Express; zdroj: vlastní
Kritéria
Hodnocení
Je možné zobrazit plnohodnotný web v mobilní verzi?
0
Vyhledávací panel
10
Kontaktní telefon
8
Kontaktní email
8
Propojení se sociálními sítěmi
10
Rezervace jízdenek
10
Zobrazení jízdních řádů
10
Zpoždění vlaků
0
Zobrazení nejbližší zastávky
0
CELKEM
56/90
Komentář: Je možné zobrazit plnohodnotný web v mobilní verzi?: Nejde o mobilní verzi webu. Vyhledávací panel: Plně funkční vyhledávací panel je součástí hlavního v hlavičce menu webových stránek. Kontaktní telefon: Lze se k němu dostat přes minimalistický odkaz kontakty v patičce webu. Kontaktní email: Obdobně jako kontaktní telefon v sekci kontakty.
85
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Propojení se sociálními sítěmi: Webové stránky jsou propojeny se sociálními sítěmi Facebook, Twitter, Google+ a videoportálem YouTube. Rezervace jízdenek: Prostřednictvím webu lze jednoduše provést rezervaci vybraných jízdenek. Zobrazení jízdních řádů: Jízdní řády lze přehledně zobrazit. Vzhledem k malému rozsahu služeb si webová stránka vystačila se zobrazením prostřednictvím obrázku ve formátu JPEG. Zpoždění vlaků: Zpoždění vlaků není možné na webových stránkách zjistit. Zobrazení nejbližší zastávky: Nejbližší zastávku není možné z webových stránek zjistit. 6.4.4.
Závěry vyvozené z analýzy a doporučení z nich vyplývající
Následuje tabulka 21 shrnující výsledky analýzy. Tabulka 21: Zhodnocení analýzy mobilní verze webu společnosti LEO Express; zdroj: vlastní
Počet bodů/ Část analýzy
Váha
Počet možných
Procentuálně
Přírůstek
bodů Analýza multiplatformního přístupu
50%
48,2/150
32%
16,1%
30%
51,3/60
86%
25,7%
20%
56/90
62%
12,4%
Analýza přehlednosti a použitelnosti verze zobrazené na chytrých telefonech Analýza obsahu a služeb verze zobrazené na chytrých telefonech CELKEM
100%
54,2%
Z analýzy jasně vyplynulo, že nejnovější železniční dopravce v České republice nemá svou webovou prezentaci plně optimalizovanou ani pro desktopy, natož pro přístup z různých mobilních zařízení. Ačkoli webový design využívá řadu prvků moderního webového designu vhodných pro dotykové displeje, např. velké a zřetelné odkazy, je z něj cítit, že běh společnosti se teprve rozbíhá a s ním i její 86
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal webová prezentace. Jejich řešení nepovažuji za vyloženě špatné, jak by se mohlo zdát z číselného hodnocení analýzy, ale za nedokončené. Podle informací uvedených na webu chystají provozovatelé vytvoření mobilní aplikace pro operační systémy iOS a Android, se zavedením mobilní verze webu se tak nedá předpokládat. Doporučení vyplývající z analýzy jsou následující: Snížení datové náročnosti webu – během načítání domovské stránky ses stáhnou 2MB dat, což je hodně i pro desktop, natož pro přístup z mobilního webu. Doporučuji, po dokončení aplikace pro mobilní operační systémy, vložit po přístupu z mobilních zařízení rozcestník na mobilní aplikaci a plnohodnotný web, aby uživatelé nemuseli stahovat zbytečná data navíc. Optimalizace webových stránek – společnost půjčuje svým zákazníkům na cestách zdarma tablety pro přístup na internet pro zpříjemnění cestování. V případě, že by chtěli navštívit webové stránky dopravce, nezobrazí se jim ovšem korektně, což nepůsobí profesionálním dojmem. Optimalizace navigace – hlavní menu v rozcestníku využívá nevhodné vysouvací nabídky, které na dotykových displejích nefungují korektně. Využití responsivního layoutu – webové stránky společnosti mají problémy se zobrazením na malých displejích například u netbooků, na displejích s vysokým rozlišením jsou po stranách zbytečně velké plochy. Řešením problému by bylo využití responsivní mřížky flexibilně se přizpůsobující ploše displeje. Doplnění obsahu o aktuální polohu vlaků – zpoždění vlaků patří k základním funkcím webů železničních dopravců.
87
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
6.5.
RegioJet Společnost RegioJet a.s. (dále jen RegioJet) je druhým největším železničním
dopravcem v České republice. Vlastní 28 vlakových souprav, které jezdí na trase Žilina-Havířov-Ostrava-Praha. První vlak společnosti RegioJet vjel na české železnice v září roku 2011. Společnost si buduje image prvního konkurenta Českých drah na české železnici, který nabízí vyšší kvalitu za nižší ceny.20 Webové stránky společnosti, které v této kapitole podrobuji analýze multiplatformního přístupu, se nacházejí na adrese www.rj.cz. 6.5.1.
Analýza multiplatformního přístupu 50 %
Následuje tabulka 22 shrnující hodnocení dle daných kritérií. Tabulka 22: Analýza multiplatformního přístupu k webu společnosti RegioJet, zdroj: vlastní
Kritéria
Hodnocení
Chytrý telefon – separátní mobilní verze
0
Chytrý telefon – datová náročnost mobilní verze webu
3
Chytrý telefon – posuv pouze v jednom směru
0
Chytrý telefon – 100% zobrazení na obrazovku?
0
Chytrý telefon – iOS Safari
8
Chytrý telefon – Android Browser
8
Chytrý telefon – Opera Mini
6
Tablet – mobilní verze webu pro tablet?
0
Tablet – datová náročnost verze zobrazené na tabletu
3
Tablet – iOS Safari
10
Tablet – Android Browser
8
Desktop – Je webová stránka responsivní?
0
Desktop – 1920x1080
9,6
Desktop – 1024x768
6,6
CELKEM
62,2/150
Data převzata z informací uvedených na webových stránkách společnosti www.rj.cz, analýza webových stránek provedena 30. 11. 2012 20
88
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Komentář Chytrý telefon: Zobrazení webových stránek na chytrých telefonech není optimalizováno ani v případě společnosti RegioJet. Web nemá mobilní verzi, na všech platformách se tedy zobrazuje jediná plnohodnotná verze webu. To se projevuje v datové náročnosti, kdy ke stažení domovské stránky je potřeba stáhnout 1,4MB dat. I přesto jsou webové stránky celkem obstojně optimalizované a zobrazují se bez zásadních komplikací na všech testovaných platformách chytrých telefonů. Mezi nedostatky patří nekorektně zobrazená patička v prohlížečích Safari a Opera Mini, dále pak funkce zobrazení trasy spojů na mapě není funkční v prohlížečích Opera Mini a Android Browser. Tablet: Zobrazení na tabletech trpí také vysokou datovou náročností, jinak se stránky zobrazují prakticky ve všech případech korektně. Jediným nedostatkem je nefunkční zobrazení trasy spojů na mapě v prohlížeči Android Browser. Desktop: Problém se zobrazením mapy zůstává i na desktopech, konkrétně při použití prohlížeče Opera. Na velkých rozlišeních se stránky zobrazují korektně, obrazovky s malým rozlišením se nevejdou do šířky na displej, což svědčí o nevyužití prvků responsivního webu. 6.5.2.
Analýza přehlednosti a použitelnosti verze zobrazené na chytrých telefonech 30 %
Následuje tabulka 23 shrnující hodnocení dle daných kritérií.
89
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Tabulka 23: Analýza přehlednosti a použitelnosti mobilní verze webu společnosti RegioJet; zdroj: vlastní
Kritéria
Hodnocení
Identifikace webu – Logo
10
Jednoduchost navigace
5
Viditelnost odkazů
10
Kufrový test
6,6
Dostatečná velikost ovládacích prvků
0
Délka URL adresy
10
CELKEM
41,6/60
Komentář Identifikace webu – Logo: Logo je viditelné na všech testovaných stránkách, nicméně na některých částech webu je doplněné o logo sesterské společnosti Student Agency. Jednoduchost navigace: Použitá navigace v hlavičce webu působí poněkud chaoticky, zvolení dvouřádkového menu nepovažuji za optimální na desktopech, natož při přístupu z chytrého telefonu. Viditelnost odkazů: Odkazy na webových stránkách jsou dostatečně odlišené od zbytku obsahu. Kufrový test: Během standardního kufrového testu, kterého se zúčastnila dvojice respondentů, byly objeveny dva neduhy – není možné určit, ve které části hierarchie webu se uživatel nachází, současně na webu absentuje jakákoliv forma vyhledávání. Dostatečná velikost ovládacích prvků: Ovládací prvky na webu společnosti RegioJet vyžadují použití myši nebo velké přiblížení stránky. Délka URL adresy: Splňuje požadavek na co nejkratší adresu, webové stránky se otevřou po zadání adresy www.rj.cz.
90
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal 6.5.3.
Analýza obsahu a služeb verze zobrazené na chytrých telefonech 20 %
Následuje tabulka 24 shrnující hodnocení dle daných kritérií. Tabulka 24: Analýza obsahu a služeb verze mobilní verze webu společnosti RegioJet; zdroj: vlastní
Kritéria
Hodnocení
Je možné zobrazit plnohodnotný web v mobilní verzi?
0
Vyhledávací panel
0
Kontaktní telefon
10
Kontaktní email
10
Propojení se sociálními sítěmi
10
Rezervace jízdenek
5
Zobrazení jízdních řádů
10
Zpoždění vlaků
8
Zobrazení nejbližší zastávky
0
CELKEM
53/90
Komentář: Je možné zobrazit plnohodnotný web v mobilní verzi?: Nejedná se o mobilní verzi webu. Vyhledávací panel: Na webových stránkách není možné vyhledávat. Kontaktní telefon: Kontaktní telefon je uveden na domovské stránce v patičce webu. Kontaktní email: Obdobně jako kontaktní telefon v patičce webu. Propojení se sociálními sítěmi: Webové stránky společnosti RegioJet jsou propojené se sociálními sítěmi Facebook, Twitter, Google+ a Foursquare. Rezervace jízdenek: Webové stránky umožňují rezervaci jízdenek, nicméně při přístupu z chytrého telefonu je uživatel upozorněn na možné omezení funkcionality a odkázán na přístup z desktopu. Zobrazení jízdních řádů: Jízdní řády lze na webových stránkách snadno zobrazit.
91
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Zpoždění vlaků: Zpoždění vlaků lze zobrazit přes odkaz Spoj na cestě v hlavním menu webových stránek, jedná se nicméně o kombinaci vlaků RegioJet a autobusů Student Agency, ve které nelze vyfiltrovat požadovaný obsah. Zobrazení nejbližší zastávky: Webové stránky neumožňují zobrazení nejbližší zastávky. 6.5.4.
Závěry vyvozené z analýzy a doporučení z nich vyplývající
Následuje tabulka 25 shrnující výsledky analýzy. Tabulka 25: Zhodnocení analýzy mobilní verze webu společnosti RegioJet; zdroj: vlastní
Počet Část analýzy
Váha
bodů/Počet
Procentuálně
Přírůstek
možných bodů Analýza multiplatformního přístupu
50%
62,2/150
41%
20,7%
30%
41,6/60
69%
20,8%
20%
53/90
59%
11,8%
Analýza přehlednosti a použitelnosti verze zobrazené na chytrých telefonech Analýza obsahu a služeb verze zobrazené na chytrých telefonech CELKEM
100%
53,3%
Společnost RegioJet už je zavedeným subjektem na českém trhu, proto pro mne byla nedokonalost jejich webové prezentace překvapením. Z testování během analýzy jasně vyplynulo, že se jedná o web primárně určený pro použití na desktopech. Společnost nemá web vůbec přizpůsobený pro přístup z mobilních zařízení, doporučení vyplývající z analýzy by se tak mohla omezit na stručnou radu – vytvoření mobilního webu nebo aplikace pro mobilní operační systémy. Následující seznam doporučení je určen pro stávající web. Snížení datové náročnosti – načtení domovské stránky vyžaduje stažení 1,3MB dat, což nevadí na desktopech, pro ostatní mobilní zařízení jde o velké číslo.
92
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Optimalizace zobrazení – webové stránky se nezobrazují korektně pouze na mobilních prohlížečích, ale i na některých desktopových browserech. Optimalizace zejména mapy zobrazující trasu spojů by dodala webu na profesionalitě. Využití responzivního layoutu – netbooky s nízkým rozlišením mají problém se zobrazením celé webové stránky. Zavedení responsivního webu využívajícího flexibilní mřížku by vyřešilo nejen tento problém, ale i usnadnilo používání webu na chytrých telefonech a tabletech. Zjednodušení navigace – dvouřádkové menu v hlavičce webu působí velmi zmatečně. Na místě by bylo sloučení položek do kategorií, např. položky „Online rezervace“ a „SMS rezervace“, „Naše jízdenky“, „Prodejní místa“ a „Ceníky“ by se daly
sloučit
pod
položku
„Jízdenky“.
Nahrazení
dvouřádkové
navigace
jednořádkovou, ze které by bylo jasné, v jaké kategorii se uživatel nachází, by zvýšilo uživatelskou příjemnost webu. Implementace funkce vyhledávání – absence vyhledávání na webu považuji za zásadní nedostatek. Rezervace jízdenek – položka, kterou osobně považuji za jednu z nejdůležitějších, není na mobilních platformách funkční. Web při snaze o rezervaci z chytrého telefonu zobrazí varování o nefunkčnosti sekce a odkazuje se na přístup z desktopu. Doporučuji optimalizaci i pro zákazníky využívající mobilní internet.
93
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
6.6.
Srovnání
multiplatformního
přístupu
k webovým
stránkám
společností České dráhy, LEO Express a RegioJet Při porovnání výsledků všech tří analyzovaných webových stránek vyšly následující výsledky, které uvádím na grafu 14:
Srovnání výsledků analýzy 45%
41%
40% 35% 30%
30%
26%
25% 20%
21%
21%
16%
16%
15%
12%
12%
10% 5% 0% Analýza multiplatformního přístupu (max 50%)
Analýza přehlednosti a Analýza obsahu a služeb verze použitelnosti verze zobrazené na zobrazené na chytrých chytrých telefonech (max 30%) telefonech (max 20%)
České dráhy
LEO Express
RegioJet
Graf 14: Srovnání výsledků analýzy; zdroj: vlastní
Z těchto dat je jasně patrné, že z testovaných webových stránek ve všech posuzovaných kritériích převyšují konkurenci České dráhy. Jejich web je plně optimalizovaný pro fungování jak na dotykových displejích chytrých telefonů a tabletů, tak i na desktopech. Nevyhnul se sice některým drobným nedostatkům, nicméně na rozdíl od konkurence jde pouze o maličkosti. Další dvě testované webové stránky během testování přístupu z různých platforem selhaly. Zatímco LEO Express se snaží s přístupem ze zařízení s dotykovým ovládáním pracovat alespoň volbou webového designu plného moderních prvků a chystanou aplikací pro mobilní telefony, RegioJet zůstává u klasických webových stránek s „desktopovým“ webovým designem. Na druhou stranu, webové stránky RegioJetu jsou velmi dobře
94
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal optimalizované a zobrazují se korektně na téměř všech prohlížečích, byť mají poněkud nepřehlednou navigaci. Webové stránky LEO Expressu trpí špatnou optimalizací pro všechny platformy, pokud na nich ale proběhne optimalizace, mají nakročeno správným směrem.
95
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
7. Závěr Ve své práci, která se věnovala problematice přístupů k řešení mobilních webových aplikací, jsem dospěl k mnoha zajímavým poznatkům. Mobilní zařízení se stala součástí každodenního života velké části populace. Vzhledem k růstu prodejů a podílů na trhu je při tvorbě designu webových stránek v současnosti nutné počítat také s přístupem z mobilních zařízení s dotykovými displeji. Tomu je nutné uzpůsobit nejen ovládací prvky, ale i celý webový design. Ten by měl dokázat rozlišit, z jakého typu zařízení se uživatel připojil, a podle toho mu nabídnout adekvátní obsah. Je přitom nutné, a v České republice obzvlášť, klást důraz na nízkou datovou náročnost stránek, neboť pokrytí 3G internetem je ČR na daleko horší úrovni než v ostatních zemích Evropské Unie. Při tvorbě mobilních webových stránek je nutné zohledňovat uživatelské rozhraní, které daný přístroj vyžívá, stejně jako omezení, která přináší mobilní operační systémy a jejich prohlížeče. To znamená využívání velkých ovládacích ploch, které uživatelé dokážou snadno stisknout špičkou prstu, vytváření variant pro zobrazení na výšku, na šířku. Současně je potřeba si uvědomit, že uživatelé mobilnímu zařízení nevěnují 100% pozornost po celou dobu užívání, dle filosofie „One eyeball and one thumb“ je tak nutné vytvářet uživatelsky co nejpříjemnější webový design, který lze používat jedním dotykem palce. Z přístupů, kterými lze dosáhnout kvalitního zobrazení na různých typech zařízení, jsem uvedl responsivní webový design a myšlenku Mobile First. A zatímco idea Mobile First je využitelná zejména při původním návrhu webového designu, kdy říká, že je možné až 80 % obsahu odstranit a vytvořit tak webové stránky pouze s tím obsahem, který většina uživatelů využívá, responsivní webový design přináší postupy, jak toto aplikovat na rozdílně veliké displeje. Právě kombinaci Mobile First a responsivního webového designu považuji za budoucnost webového designu.
96
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal V závěrečné analýze jsem porovnával multiplatformní přístup k webovým stránkám trojice železničních dopravců působících v České republice. Hlavním důvodem pro tuto volbu byl fakt, že jsem od nových společností očekával snahu o zaujetí potenciálních zákazníků i tímto typem služeb. Doprava na železnici navíc umožňuje nabídnout celou řadu služeb spojených s mobilními zařízeními. Očekával jsem, že v analýze budou mít lepší výsledky nové společnosti s propracovaným systémem PR a marketingu, zatímco České dráhy nedopadnou nejlépe. Výsledky mne upřímně překvapily – mobilní verze webových stránek Českých drah přináší prakticky vše, co by se od takto cíleného webu dalo očekávat, zatímco LEO Express a RegioJet projevily nepřipravenost pro přístup z mobilních zařízení. České dráhy na poli mobilního webového designu excelují, jejich webové stránky nabízí i pokročilé funkce, kdy je možné zobrazit aktuální polohy vlaků, zjistit nejbližší zastávku nebo řazení vagónů jednotlivých vlaků. Za největší nedostatek považuji rezervaci jízdenek, která je sice funkční, ale odkazuje na plnohodnotný web s vyšší datovou náročností. Webové stránky společnosti LEO Express trpí celkovou špatnou optimalizací nejen pro mobilní zařízení, ale i pro desktopy. Webový design byl sice vytvořen tak, aby se dobře ovládal i na dotykových displejích, společnost však neřeší datovou náročnost, která byla mezi testovanými bezkonkurenčně nejvyšší – k načtení domovské stránky je zapotřebí stáhnout 2MB dat. Do budoucna se nicméně dá očekávat vyšší optimalizace pro mobilní zařízení, např. díky chystané aplikaci pro mobilní operační systémy iOS a Android. Druhý největší železniční dopravce v České republice, RegioJet, oproti tomu nevěnuje přístupu z mobilních zařízení zásadní pozornost. Webové stránky jsou postaveny na klasickém webovém designu, který se dá dobře ovládat zejména na desktopech. V analýze získával nejvíce bodů kvůli optimalizaci, díky které se
97
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal správně zobrazuje na většině zařízení, nicméně použitelnost na mobilních zařízeních je velmi omezená. Během testování jsem využil komerční emulátor BrowserStack.com, s jehož funkcionalitou jsem spokojen. Nabízí různé verze operačních systémů i prohlížečů, což umožňuje opravdu vyčerpávající testování jak pro mobilní zařízení, tak i pro desktopy. Uživatelské prostředí emulátoru je intuitivní a příjemné, jediné problémy jsem tak měl s rychlostí zobrazení. Ta byla, bez ohledu na rychlost mého připojení, nepříliš uspokojivá – jednotlivé emulátory se mnohdy načítaly více než minutu. Ve výsledku jsem s naplněním svých teoretických a praktických cílů, tj. popis mobilního webového designu z mnoha úhlů pohledu a otestování na reálném příkladě, v zásadě spokojen. Během práce jsem narazil na celou řadu otázek a problematik. To mne přinutilo k dalšímu studiu zdrojů, které byly zejména elektronické. Praktická část mne utvrdila v názoru, že v přístupu k webovým stránkám z mobilních zařízení je skrytý velký potenciál. Společnosti tak mohou zdokonalit své služby a získat konkurenční výhodu. Metodika testování z různých typů zařízení, kterou využívám v analýze v praktické části, je dle mého názoru globálně využitelná. V případě testování webových stránek z jiného odvětví je možné nahradit kritéria zabývající se službami těmi, která jsou vhodnější pro daný obor.
98
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
8. Terminologický slovník Zkratka AJAX
Termín
Vysvětlení
Asynchronous
Technologie AJAX umožňuje kontaktovat server
JavaScript and XML
a obdržet od něj libovolná data, bez nutnosti nahrávání celé stránky znovu (Nadrchal, 2010).
Akcelerometr
Zařízení, které měří sílu zrychlení (Fingas, 2012).
Full HD
Označení displeje, jehož rozměry jsou 1980x1080px (Puk, 2008).
FUP
Fair user policy
Parametr služby, který značí politiku poskytovatele internetu, omezující nadměrné využívání sítě jejími uživateli. Omezení spočívá ve výrazném zpomalení přenosové rychlosti, obvykle při překročení určitého objemu stažených dat za dané období (Kysela, 2012).
GPS GSM
Global Positioning
Pasivní dálkoměrný systém pro stanovení polohy
System,
a času na Zemi (Ramon.cz, 2005).
Global System for
Standard pro mobilní telefony zahrnující telefonní
Mobile
hovory a 2. generaci mobilního internetu (Richtr,
Communications
2002).
Gyroskop
Zařízení, které měří velikost rotační síly (iPhonemania.cz, 2010).
Chytrý telefon
Mobilní telefon, který je vybaven některým z otevřených operačních systémů, v současné době standardně vybaven dotykovým displejem (Vokáč, 2012).
Jailbreak
Proces, během kterého je odstraněna ochrana na zařízeních iPhone a iPad, což umožní instalaci softwaru, který neprošel autorizací společnosti Apple (Keller, 2012).
Layout
Grafické rozložení prvků na webové stránce (Devbook.cz, 2012).
Mobile First
Myšlenka vývoje návrhu webových stránek, podle které se nejprve navrhuje pro mobilní zařízení s malým displejem (Wroblewski, 2011).
Mobilní operační
Operační systém, který byl speciálně navržený pro
systém
běh na mobilních zařízeních – chytrých telefonech a tabletech (Webopedia.com, 2012).
Multitasking
Schopnost (mobilního) operačního systému provádět více operací najednou (Pavlíček, 2012).
99
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
Multitouch displej
Schopnost dotykového displeje rozpoznat dotyk více než jednoho prstu najednou (MobileBurn, 2012).
PDA
Personal Digital
Platforma, která nabízí řadu funkcí PC v kapesním
Assistant
provedení. K ovládání využívá dotykový displej a stylus (portable-software, 2008).
PPI
Pixels per inch
Parametr udávající počet pixelů na palec (vlastní definice autora)
Push notifikace
Technologie umožňující zaslat na mobilní zařízení prostřednictvím připojení k internetu upozornění, které může obsahovat informace pro libovolnou aplikaci (About.com, 2012).
Responsivní webový
Design webových stránek, jehož obsah se flexibilně
design
přizpůsobuje displeji, na němž je zobrazen (Marcotte, 2011).
Retina
Displej s tak vysokou hustotou zobrazovacích bodů, že je není možné pouhým okem spatřit (Jones, 2010).
URL
Uniform Resource
Unikátní řetězec znaků s definovanou strukturou
Locator
specifikující umístění zdrojů informací na internetu (PC.net, 2012).
100
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
9. Citovaná literatura About.com. 2012. Definition of iPhone Push Notifications. About.com. [Online] 2012. [Citace: 8. Prosinec 2012.] http://ipod.about.com/od/iphonesoftwareterms/g/iphone-pushnotifications.htm. Addison, Ken. 2011. Nokia drops Symbian, as Windows Phone 7 gains momentum: PC Perspective. PC Perspective. [Online] 15. Únor 2011. [Citace: 21. Listopad 2012.] http://www.pcper.com/news/Mobile/Nokia-drops-Symbian-Windows-Phone-7-gainsmomentum. Anderson, Nate. 2007. PDA sales drop by 40 percent in a single year, vendors bolt for exit: Ars Technica. Ars Technica. [Online] 13. Duben 2007. [Citace: 28. Říjen 2012.] http://arstechnica.com/business/2007/08/pda-sales-drop-by-40-percent-in-a-single-yearvendors-bolt-for-exit/. Apple. 2010. Apple - press info - Apple launches iPad. Apple press info. [Online] 27. Leden 2010. [Citace: 3. Listopad 2012.] http://www.apple.com/pr/library/2010/01/27AppleLaunches-iPad.html. Apple Support. 2012. iOS 4: Understanding Location Services. Apple Support. [Online] 14. Listopad 2012. [Citace: 20. Listopad 2012.] http://support.apple.com/kb/HT1975. Be Money Aware Blog. 2011. Smartphone,Tablet, Laptop, Netbook: What should you buy and Why?: Be Money Aware Blog. Be Money Aware Blog. [Online] 19. Prosinec 2011. [Citace: 5. Listopad 2012.] http://www.bemoneyaware.com/blog/shopping_smartphone_tablet_laptop_netbook/. Bulger, Danielle. 2010. Smartphone Owners: A Ready and Willing Audience. Compete Pulse. [Online] 12. Březen 2010. [Citace: 18. Listopad 2012.] http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/ . Carphone Warehouse. 2012. Smartphone, tablet, netbook or laptop? Carphone Warehouse Help and Support. Carphone Warehouse. [Online] 2012. [Citace: 6. Listopad 2012.] http://selfhelp.carphonewarehouse.com/SelfHelp/request.do?view()=c%7Be59fb550-cc8511df-f18b-f20203001e3d%7D. Cassavoy, Liane. 2012. What is a Smartphone? About.com. [Online] 2012. [Citace: 30. Říjen 2012.] http://cellphones.about.com/od/smartphonebasics/a/what_is_smart.htm. Casteel, Jay. 2012. Google Releases Chrome For Mobile, Tops Apple's Top Free Apps: BallerStatus.com. BallerStatus.com. [Online] 30. Červen 2012. [Citace: 12. Listopad 2012.] http://www.ballerstatus.com/2012/06/30/google-releases-chrome-mobile-tops-atop-applestop-free-apps/.
101
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal cinterviews.com. 2009. Advantages and Disadvantages of Android phones: cinterviews.com. cinterviews.com. [Online] Listopad 2009. [Citace: 13. Listopad 2012.] http://www.cinterviews.com/2009/11/advantages-and-disadvantages-of-android.html. Cornett, Catriona. 2012. Similarities and Differences in iOS & Android UX Design : The Archer Group. The Archer Group. [Online] 14. Květen 2012. [Citace: 3. Prosinec 2012.] http://www.archer-group.com/2012/mobile-category/similarities-and-differences-in-iosandroid-ux-design. Cox, John. 2010. Mozilla releases Firefox for Mobile for Maemo phones - Techworld.com. Techworld.com. [Online] 2. Únor 2010. [Citace: 14. Listopad 2012.] http://news.techworld.com/mobile-wireless/3211674/mozilla-releases-firefox-for-mobile-formaemo-phones/. Čapek, Michal. 2011. Přístupy k řešení grafického designu mobilních webových aplikací. Praha : Vysoká škola ekonomická, 2011. Devbook.cz. 2012. Český HTML 5 manuál: Layout (rozložení stránky). Devbook.cz. [Online] 2012. [Citace: 8. Prosinec 2012.] http://www.devbook.cz/html-layout-rozlozeni-strankycesky-manual/. Dolejš, Jan. 2012. Na trh vstupuje nový virtuální operátor BLESKmobil: Svět Androida. Svět Andoida. [Online] 30. Říjen 2012. [Citace: 29. Listopad 2012.] http://www.svetandroida.cz/natrh-vstupuje-novy-virtualni-operator-bleskmobil-201210. Escallier, Paul. 2011. Crowning a Winner: The Great Android Browser Face-Off. Tom's Guide. [Online] 3. Listopad 2011. [Citace: 4. Listopad 2012.] http://www.tomsguide.com/us/Android-Web-Browsers,review-1705-7.html. —. 2011. Standard Function Performance: The Great Android Browser Face-Off. Tom's Guide. [Online] 3. Listopad 2011. [Citace: 4. Listopad 2012.] http://www.tomsguide.com/us/Android-Web-Browsers,review-1705-4.html. Fingas, Jon. 2012. Engineer Guy shows how a phone accelerometer works, knows what's up and sideways (video). engadged. [Online] 22. Květen 2012. [Citace: 4. Prosinec 2012.] http://www.engadget.com/2012/05/22/the-engineer-guy-shows-how-a-smartphoneaccelerometer-works/. Gangster, Gadget. 2010. Accelerometer & Gyro Tutorial. Instructables. [Online] 21. Leden 2010. [Citace: 12. Listopad 2012.] http://www.instructables.com/id/Accelerometer-GyroTutorial/.
102
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Gardner, Emma. 2012. Where and how people use tablets: Lean Back 2.0. Lean Back 2.0. [Online] 11. Duben 2012. [Citace: 16. Listopad 2012.] http://www.economistgroup.com/leanback/advertising/where-and-how-people-use-tablets/. Gartner. 2012. Gartner Says Worldwide Sales of Mobile Phones Declined 3 Percent in Third Quarter of 2012; Smartphone Sales Increased 47 Percent. Gartner.com. [Online] 14. Listopad 2012. [Citace: 20. Listopad 2012.] http://www.gartner.com/it/page.jsp?id=2237315. iabuk.net. 2011. Tablets play key role in consumers’ lives: IAB UK. IAB UK. [Online] 9. Prosinec 2011. [Citace: 14. Listopad 2012.] http://www.iabuk.net/about/press/archive/tabletsplay-key-role-in-consumers-lives. Indian Express. 2012. IPad-type tablets to beat notebook PCs: Survey: Indian Express. Indian Express. [Online] 6. Červenec 2012. [Citace: 17. Listopad 2012.] http://www.indianexpress.com/news/ipadtype-tablets-to-beat-notebook-pcs-survey/971099. iPhonemania.cz. 2010. iPhone 4 má kromě akcelerometru i gyroskop. K čemu?: Apple iPhone - iPhonemania.cz. Apple iPhone - iPhonemania.cz. [Online] 29. Červen 2010. [Citace: 22. Listopad 2012.] http://iphonemania.mobilmania.cz/iPhone+4+ma+krome+akcelerometru+i+gyroskop.+K+cem u. iPhoneTips.cz. 2012. Otevřený dopis šéfa Apple: Proč nemá Steve Jobs rád Adobe Flash? SmartMania.cz. SmartMania.cz. [Online] 3. Květen 2012. [Citace: 10. Listopad 2012.] http://smartmania.cz/clanky/otevreny-dopis-sefa-apple-proc-nema-steve-jobs-rad-adobeflash-236. Javůrek, Karel. 2011. Dell Latitude XT3 Tablet PC: otočný podnikový dotyk - Živě.cz. Živě.cz. [Online] 9. Srpen 2011. [Citace: 4. Prosinec 2012.] http://www.zive.cz/clanky/dell-latitude-xt3tablet-pc-otocny-podnikovy-dotyk/sc-3-a-158298/default.aspx. Johnson, Joel Ivory. 2012. Getting Started with iPhone and iOS Development - CodeProject. CodeProject. [Online] 19. Červenec 2012. [Citace: 5. Listopad 2012.] http://www.codeproject.com/Articles/88929/Getting-Started-with-iPhone-and-iOSDevelopment. Jones, Bryan. 2010. Apple Retina Display - Jonesblog. Jonesblog. [Online] 24. Červen 2010. [Citace: 23. Listopad 2012.] http://prometheus.med.utah.edu/~bwjones/2010/06/apple-retinadisplay/. Karahalis, John. 2012. CSS media queries - CSS MDN. CSS MDN. [Online] 1. Listopad 2012. [Citace: 23. Listopad 2012.] https://developer.mozilla.org/en-US/docs/CSS/Media_queries.
103
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Keller, Mike. 2012. Geek 101: What Is Jailbreaking?: TechHive. TechHive. [Online] 13. Únor 2012. [Citace: 4. Listopad 2012.] http://www.techhive.com/article/249091/geek_101_what_is_jailbreaking_.html. Klesla, Jan. 2012. Bleskmobil není nový český operátor, ale jen dealer Telefóniky, zní kritika: byznys.ihned.cz. ihned.cz. [Online] 8. Listopad 2012. [Citace: 29. Listopad 2012.] http://byznys.ihned.cz/zpravodajstvi-cesko/c1-58342950-bleskmobil-neni-novy-ceskyoperator-ale-jen-dealer-telefoniky-zni-kritika. Kotler, Philip. 2007. Moderní marketing, 4. evropské vydání. Praha : Grada Publishing, a.s., 2007. ISBN 978-80-247-1545-2. Kovařík, David. 2012. Operační systém v telefonu aneb nahlédněte do světa smartphonů (vědecké okénko): Mobilizujeme.cz. Mobilizujeme.cz. [Online] 11. Březen 2012. [Citace: 3. Červen 2012.] http://mobilizujeme.cz/clanky/operacni-system-v-telefonu-aneb-nahlednetedo-sveta-smartphonu-vedecke-okenko/. Kravets, David. 2012. U.S. Declares iPhone Jailbreaking Legal, Over Apple’s Objections: Wired.com. Wired.com. [Online] 26. Červenec 2012. [Citace: 24. Listopad 2012.] http://www.wired.com/threatlevel/2010/07/feds-ok-iphone-jailbreaking/. Krug, Steve. 2007. Web design, Nenuťte uživatele přemýšlet! Brno : Computer Press, 2007. ISBN 80-251-1291-8. Kyrnin, Jennifer. 2012. Tips to Design Web Pages that Work Well on Small Screen Mobile Devices. About.com Webdesign. [Online] 2012. [Citace: 24. Listopad 2012.] http://webdesign.about.com/od/mobile/a/write-web-pages-for-the-iphone.htm. Kysela, Jiří. 2012. Velké srovnání mobilního Internetu v České republice pro rok 2012: Internet pro všechny. Internet pro všechny. [Online] 13. Srpen 2012. [Citace: 24. Listopad 2012.] http://www.internetprovsechny.cz/velke-srovnani-mobilniho-internetu-v-ceske-republicepro-rok-2012/ . Lopuck, Lisa. 2012. The Basics of Mobile-Friendly Web Design. Dummies.com. [Online] 2012. [Citace: 24. Listopad 2012.] http://www.dummies.com/how-to/content/the-basics-ofmobilefriendly-web-design.html. Lupa.cz. 2012. iDnes má novou mobilní verzi webu: Lupa.cz. Lupa.cz. [Online] 19. Březen 2012. [Citace: 25. Listopad 2012.] http://www.lupa.cz/zpravicky/idnes-ma-novou-mobilniverzi-webu/. Marcotte, Ethan. 2011. Responsive Web Design. New York : A Book Apart, 2011. ISBN 978-09844425-7-7.
104
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Matura, Jan. 2012. Bez komentáře: srovnání mobilního internetu v Česku, Polsku a na Slovensku - iDNES.cz. iDNES.cz. [Online] 16. Březen 2012. [Citace: 24. Listopad 2012.] http://mobil.idnes.cz/bez-komentare-srovnani-internetu-v-mobilu-v-cesko-polsko-aslovensko-125-/mobilni-operatori.aspx?c=A120314_165603_mob_operatori_jm. mediaguru. 2012. Přes mobil chodí na internet 14 % a přes tablet 3 % českých uživatelů: MediaGuru. MediaGuru. [Online] 8. Říjen 2012. [Citace: 22. Listopad 2012.] http://www.mediaguru.cz/2012/10/pres-mobil-chodi-na-internet-14-a-pres-tablet-3-ceskychuzivatelu/#.UK6hSzBPbbz. MobileBurn. 2012. What is "multi-touch"? - Definition. MobileBurn. [Online] 2012. [Citace: 8. Prosinec 2012.] http://www.mobileburn.com/definition.jsp?term=multi-touch. Mrazová, Jana. 2012. User Centered Cross-Platform Application Development for Mobile Devices. Vídeň : University of Applied Sciences Technikum Wien, 2012. Mroček, Michal. 2012. 3G v Česku: sliby vs. realita: Dotekomanie.cz. Dotekomanie.cz. [Online] 9. Listopad 2012. [Citace: 24. Listopad 2012.] http://dotekomanie.cz/2012/11/3g-cesku-reci-vsrealita/. Nadrchal, Tomáš. 2010. Úloha grafiky v internetové reklamě. Praha : Vysoká škola ekonomická, 2010. Neo Insight. 2012. Multi touch and gesture user interaction design principles. Neo Insight. [Online] Leden 2012. [Citace: 3. Prosinec 2012.] http://www.neoinsight.com/newsletter/1201.html. NetMarketShare.com. 2012. Browser Market Share. NetMarketShare.com. [Online] 20. Listopad 2012. [Citace: 20. Listopad 2012.] http://www.netmarketshare.com/browser-marketshare.aspx?qprid=0&qpcustomd=1&qptimeframe=Y&qpct=3. Noska, Martin. 2008. Počet prodaných notebooků v ČR poprvé překonal desktopy!: Computerworld.cz. Computerworld.cz. [Online] 11. Únor 2008. [Citace: 4. Listopad 2012.] http://computerworld.cz/udalosti/pocet-prodanych-notebooku-v-cr-poprve-prekonaldesktopy-1705. O'Lone, Greg. 2012. Real Software: iOS 6, Mobile Safari & Web Applications. Real Software. [Online] 19. Září 2012. [Citace: 15. Listopad 2012.] http://www.realsoftwareblog.com/2012/09/ios-6-mobile-safari-web-applications.html. Pavlíček, Michal. 2012. Multitasking: co to je a jak funguje na jednotlivých systémech?: Mobilenet.cz. Mobilenet.cz. [Online] 21. Únor 2012. [Citace: 8. Prosinec 2012.] http://mobilenet.cz/clanky/multitasking-co-to-je-a-jak-funguje-na-jednotlivych-systemech8602.
105
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal PC.net. 2012. Definition of URL. Pc.net. [Online] 2012. [Citace: 8. Prosinec 2012.] http://pc.net/glossary/definition/url. portable-software. 2008. Co je to PDA? portable-software. [Online] 5. Říjen 2008. [Citace: 8. Prosinec 2012.] http://portable-software.pise.cz/79974-co-je-to-pda.html. Puk, Jaromír. 2008. Kupujeme televizor: HD ready nebo Full HD?: AVmania.cz. AVmania.cz. [Online] 8. Leden 2008. [Citace: 8. Prosinec 2012.] http://avmania.e15.cz/kupujeme-televizorhd-ready-nebo-full-hd. Rabin, Jo a McCathieNevile, Charles. 2008. Mobile Web Best Practices 1.0. W3C. [Online] 29. Červenec 2008. [Citace: 25. Listopad 2012.] http://www.w3.org/TR/mobile-bp/#OneWeb. Raja, Haroon Q. 2011. An Introduction To Modern Mobile Operating Systems. Addictive Tips. [Online] 14. Květen 2011. [Citace: 2. Červen 2012.] http://www.addictivetips.com/mobile/anintroduction-to-modern-mobile-operating-systems/. Ramon.cz. 2005. Ramon.cz. Ramon.cz. [Online] 2005. [Citace: 8. Prosinec 2012.] http://www.ramon.cz/?to=gps&idp=gpsinf. Richtr, Tomáš. 2002. Historie GSM. tomas.richtr.cz. [Online] 2002. [Citace: 8. Prosinec 2012.] http://tomas.richtr.cz/mobil/bunk-gsm.htm. Rivoal, Florian. 2012. Media Queries. W3C. [Online] 19. Červen 2012. [Citace: 20. Listopad 2012.] http://www.w3.org/TR/css3-mediaqueries/. Ronan. 2011. Mobile web content adaptation techniques: mobiForge. mobiForge. [Online] Listopad 2011. [Citace: 24. Listopad 2012.] http://mobiforge.com/starting/story/mobile-webcontent-adaptation-techniques. Seznam blog. 2012. Mobil, nebo počítač? Co vítězí u seznamáckých služeb? - Seznam blog. Seznam blog. [Online] 17. Květen 2012. [Citace: 4. Prosinec 2012.] http://seznam.sblog.cz/2012/05/17/366. Sláma, David a Čížek, Jakub. 2012. Černobíle: Končí doba počítačů a přichází éra post-PC Živě.cz. Živě.cz. [Online] 20. Duben 2012. [Citace: 3. Červen 2012.] http://www.zive.cz/clanky/cernobile-konci-doba-pocitacu-a-prichazi-era-post-pc/sc-3-a163345/default.aspx. Sophos. 2012. Android vs. iOS security: Why iOS is safer than Android : Sophos. Sophos. [Online] 2012. [Citace: 20. Listopad 2012.] http://www.sophos.com/en-us/security-newstrends/security-trends/malware-goes-mobile/why-ios-is-safer-than-android.aspx.
106
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Staněk, Martin. 2012. Přístupy pro tvorbu mobilního webu. Praha : Vysoká škola ekonomická, 2012. Stauffer, Ron. 2012. Building Websites for Mobile: How It Works. Infront. [Online] 30. Březen 2012. [Citace: 23. Listopad 2012.] http://www.infront.com/blogs/the-infrontblog/2012/3/30/building-websites-for-mobile-how-it-works. Sterling, Greg. 2012. Google Survey Reveals What Users Want From Mobile Sites. Marketing Land. [Online] 25. Září 2012. [Citace: 18. Listopad 2012.] http://marketingland.com/googlesurvey-what-users-want-from-mobile-sites-22606. Teco.edu. 2010. PocketWeb. Teco.edu. [Online] 2010. [Citace: 5. Červen 2012.] http://www.teco.edu/pocketweb/. tech.ihned.cz. 2011. Nokia a Microsoft spojují proti Androidu od Google: tech.ihned.cz Mobily. tech.ihned.cz - Mobily. [Online] 11. Únor 2011. [Citace: 6. Listopad 2012.] http://tech.ihned.cz/c1-50060720-nokia-a-microsoft-spojuji-proti-androidu-od-google. Vejtasa, Petr. 2012. Opera Mini 7.0 je venku: nově i pro smarpthony s Androidem : mobilenet.cz. mobilenet.cz. [Online] 29. Březen 2012. [Citace: 29. Listopad 2012.] http://mobilenet.cz/clanky/opera-mini-70-je-venku-nove-i-pro-smarpthony-s-androidem8912. VentureBeat.com. 2012. Tablets With Longest Battery Life. VentureBeat.com. [Online] 2012. [Citace: 20. Listopad 2012.] http://tablets.venturebeat.com/saved_search/Tablets-WithLongest-Battery-Life. Vokáč, Luděk. 2012. Smartphonům je 20 let. Projděte si jejich historii - iDNES.cz. iDNES.cz. [Online] 2. Listopad 2012. [Citace: 8. Prosinec 2012.] http://mobil.idnes.cz/smartphonum-je20-let-projdete-si-jejich-historii-fus-/mob_tech.aspx?c=A121028_220246_mob_tech_vok. Vrbacký, Jakub. 2012. Technologie mobilního internetu – od CSD po LTE Advanced (vědecké okénko): Mobilizujeme.cz. Mobilizujeme.cz. [Online] 12. Únor 2012. [Citace: 6. Červen 2012.] http://mobilizujeme.cz/clanky/technologie-mobilniho-internetu-od-csd-po-lteadvanced-vedecke-okenko/. Warner, Janine, LaFontaine, David a Andron, Lee. 2011. iPhone® & iPad® Web Design For Dummies®. Indianapolis : Wiley Publishing, Inc., 2011. ISBN 978-1-118-00643-6. Webopedia.com. 2012. What is mobile operating system? A Word Definition From Webopedia.com. Webopedia.com. [Online] 2012. [Citace: 8. Prosinec 2012.] http://www.webopedia.com/TERM/M/mobile_operating_system.html.
107
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Wroblewski, Luke. 2011. Mobile First. New York : A Book Apart, 2011. ISBN 978-1-93755702-7. Zandl, Patrick. 2011. Proč máme v Česku předražené telefonování? Splácíme 3G sítě v Evropě... - : Lupa.cz. Lupa.cz. [Online] 9. Listopad 2011. [Citace: 29. Listopad 2012.] http://www.lupa.cz/clanky/proc-mame-v-cesku-predrazene-telefonovani-splacime-3g-site-vevrope/. Žuffa, Libor. 2012. Symbian Belle bude neustále ve vývoji, tvrdí vývojáři Nokia: myNokia.cz. myNokia.cz. [Online] 16. Listopad 2012. [Citace: 22. Listopad 2012.] http://www.mynokia.cz/symbian/symbian-belle-bude-neustale-ve-vyvoji-tvrdi-vyvojarinokia/.
108
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
10.
Seznam obrázků
Obrázek 1: Ukázka platformy tablet PC, Dell Latitude XT3; zdroj: (Javůrek, 2011) ................. 16 Obrázek 2: Základní přehled dotykových gest; zdroj (Wroblewski, 2011) ................................ 17 Obrázek 3: Mapa pokrytí mobilního připojení 2G a 3G napříč střední a západní Evropou, zdroj: převzato z http://client0.cellmaps.com/ ............................................................................... 34 Obrázek 4: Pokrytí signálem mobilního internetu společnosti Vodafone v Rumunsku, tmavá červená barva představuje 3G internet, světlé 2G internet; zdroj: (Zandl, 2011) ...................... 36 Obrázek 5: Dosah palce běžného uživatele na dotykovém displeji chytrého telefonu; zdroj: (Wroblewski, 2011) ............................................................................................................................. 44 Obrázek 6: Základní rozložení webového layoutu, zdroj: (Bedřichová, 2008) .......................... 46 Obrázek 7: Layout mobilního webu pro chytré telefony a ukázka navigace; zdroj: (Warner, a další, 2011) ........................................................................................................................................... 48 Obrázek 8: Layout mobilního webu pro tablety; zdroj: (Warner, a další, 2011) ....................... 49 Obrázek 9: Doporučované velikosti tlačítek u chytrých telefonů dle spol. Microsoft; zdroj: (Wroblewski, 2011) ............................................................................................................................. 52 Obrázek 10: Graf statistického vývoje využívaných rozlišení obrazovky na přelomu roku 2009 a 2010; zdroj: www.toplist.cz ................................................................................................... 55 Obrázek 11: Graf statistického vývoje využívaných rozlišení obrazovky na přelomu roku 2011 a 2012; zdroj: www.toplist.cz ................................................................................................... 55 Obrázek 12: Názorné vysvětlení CSS atributů margin, border, padding a width; zdroj: převzato z www.jakpsatweb.cz/okraje.html .................................................................................. 58 Obrázek 13: Srovnání webového designu zpravodajského serveru Sport.cz v letech 2009 a 2012; zdroje: tým sport.cz (levá ilustrace), vlastní (pravá ilustrace) ........................................... 66 Obrázek 14: Ukázka zobrazení serveru sport.cz na zařízení iPad (nalevo) a iPhone (napravo); zdroj: vlastní ........................................................................................................................................ 67 Obrázek
15:
Mapa
pokrytí
mobilním
internetem
operátora
Vodafone;
zdroj:
www.vodafone.cz ............................................................................................................................ 115 Obrázek 16: Legenda k mapě pokrytí operátora Vodafone, zdroj: www.vodafone.cz .......... 115 Obrázek 17: Mapa pokrytí mobilním internetem operátora T-Mobile; zdroj: www.t-mobile.cz ............................................................................................................................................................. 116 Obrázek 18: Legenda k mapě pokrytí operátora T-Mobile; zdroj: www.t-mobile.cz............. 116 Obrázek 19: Mapa pokrytí mobilním internetem operátora Telefónica O2; zdroj: www.O2.cz ............................................................................................................................................................. 117 Obrázek 20: Graf přístupů na domovskou stránku Seznam.cz během běžného pracovního dne; zdroj: (Seznam blog, 2012) ...................................................................................................... 118 Obrázek 21: Graf přístupů na zpravodajský web Novinky.cz během průměrného pracovního dne; zdroj: (Seznam blog, 2012) ...................................................................................................... 119 Obrázek 22: Graf denních přístupů na zpravodajský portál Sport.cz; zdroj: (Seznam blog, 2012) ................................................................................................................................................... 119
109
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Obrázek 23: Graf přístupů na bulvární server Super.cz během průměrného dne; zdroj: (Seznam blog, 2012) ......................................................................................................................... 120 Obrázek 24: Srovnání zobrazení webových stránek na zařízení Apple iPhone 4S, zleva České dráhy, LEO Express, RegioJet; zdroj: vlastní ................................................................................ 122 Obrázek 25: Zobrazení webových stránek společnosti České dráhy na zařízení Apple iPad; zdroj: vlastní ...................................................................................................................................... 123 Obrázek 26: Zobrazení webových stránek společnosti LEO Express na zařízení Apple iPad; zdroj: vlastní ...................................................................................................................................... 124 Obrázek 27: Zobrazení webových stránek společnosti RegioJet na zařízení Apple iPad; zdroj: vlastní ................................................................................................................................................. 125
110
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
11.
Seznam tabulek
Tabulka 1: Význam gesta "stisknutí" podle mobilních operačních systémů; zdroj: (Neo Insight, 2012) ....................................................................................................................................... 18 Tabulka 2: Srovnání mobilních platforem, zdroj: (Be Money Aware Blog, 2011), (Carphone Warehouse, 2012) ............................................................................................................................... 20 Tabulka 3: Rozdělení mobilních operačních systémů, zdroj: (Raja, 2011) ................................. 21 Tabulka 4: Přehled typů mobilních sítí a jejich rozdělení dle generací, zdroj: (Vrbacký, 2012) ............................................................................................................................................................... 29 Tabulka 5: Podrobné specifikace jednotlivých typů mobilních připojení, zdroj: (Vrbacký, 2012) ..................................................................................................................................................... 32 Tabulka 6: Pokrytí ČR mobilním internetem. Zdroj: (Mroček, 2012).......................................... 33 Tabulka 7: Rychlosti připojení k mobilnímu internetu po uplatnění omezení FUP; zdroj: (Kysela, 2012) ...................................................................................................................................... 34 Tabulka 8: Srovnání cen objemu mobilních dat v sousedících státech, zdroj: (Matura, 2012) 35 Tabulka 9: Přehled parametrů displejů současných chytrých telefonů a tabletů; zdroj: heureka.cz............................................................................................................................................ 51 Tabulka
10:
Přehled
jednotlivých
typů
médií
v CSS,
zdroj:
převzato
z
http://www.w3.org/TR/CSS21/media.html#media-types............................................................. 61 Tabulka 11: Definice doplňkových CSS atributů, zdroj: (Marcotte, 2011) ................................. 63 Tabulka 12: Seznam dělících rozměrů pro volbu designu, zdroj: (Marcotte, 2011) .................. 64 Tabulka 13: Přehled kritérií analýzy; zdroj: vlastní ....................................................................... 70 Tabulka 14: Analýza multiplatformního přístupu k webu Českých drah, zdroj: vlastní ........ 76 Tabulka 15: Analýza přehlednosti a použitelnosti mobilní verze webu Českých drah; zdroj: vlastní ................................................................................................................................................... 78 Tabulka 16: Analýza obsahu a služeb verze mobilní verze webu Českých drah; zdroj: vlastní ............................................................................................................................................................... 79 Tabulka 17: Zhodnocení analýzy mobilní verze webu Českých drah; zdroj: vlastní ............... 80 Tabulka 18: Analýza multiplatformního přístupu k webu spol. LEO Express, zdroj: vlastní 82 Tabulka 19: Analýza přehlednosti a použitelnosti mobilní verze webu společnosti LEO Express; zdroj: vlastní ........................................................................................................................ 84 Tabulka 20: Analýza obsahu a služeb verze mobilní verze webu společnosti LEO Express; zdroj: vlastní ........................................................................................................................................ 85 Tabulka 21: Zhodnocení analýzy mobilní verze webu spol. LEO Express; zdroj: vlastní ....... 86 Tabulka 22: Analýza multiplatformního přístupu k webu spol. RegioJet, zdroj: vlastní ........ 88 Tabulka 23: Analýza přehlednosti a použitelnosti mobilní verze webu společnosti RegioJet; zdroj: vlastní ........................................................................................................................................ 90 Tabulka 24: Analýza obsahu a služeb verze mobilní verze webu společnosti RegioJet; zdroj: vlastní ................................................................................................................................................... 91 Tabulka 25: Zhodnocení analýzy mobilní verze webu společnosti RegioJet; zdroj: vlastní .... 92
111
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
12.
Seznam grafů
Graf 1: Podíly celosvětových prodejů ke koncovým uživatelům dle mobilního operačního systému, zdroj: (Gartner, 2012)......................................................................................................... 22 Graf 2: Celosvětové rozšíření mobilních prohlížečů, zdroj: (NetMarketShare.com, 2012) ...... 23 Graf 3: Průzkum IAB - k čemu uživatelé využívají notebook; zdroj: (iabuk.net, 2011) ........... 37 Graf 4: Průzkum IAB - preferované vlastnosti notebooku; zdroj: (iabuk.net, 2011)................. 38 Graf 5: Průzkum IAB - největší přínosy notebooku; zdroj: (iabuk.net, 2011) ............................ 38 Graf 6: Průzkum IAB - k čemu uživatelé využívají tablet; zdroj: (iabuk.net, 2011) .................. 39 Graf 7: Průzkum IAB - preferované vlastnosti tabletu; zdroj: (iabuk.net, 2011) ....................... 39 Graf 8: Průzkum IAB - největší přínosy tabletu; zdroj: (iabuk.net, 2011)................................... 39 Graf 9: Průzkum IAB - k čemu uživatelé využívají chytrý telefon; zdroj: (iabuk.net, 2011) ... 40 Graf 10: Průzkum IAB - preferované vlastnosti chytrých telefonů; zdroj: (iabuk.net, 2011) .. 40 Graf 11: Průzkum IAB - největší přínosy chytrých telefonů; zdroj: (iabuk.net, 2011) .............. 41 Graf 12: Kde běžně uživatelé používají chytré telefony, zdroj: (Bulger, 2010) .......................... 43 Graf 13: Vývoj prodeje desktopů a notebooků vs. prodeje chytrých telefonů; zdroj: MorganStanley.................................................................................................................................... 45 Graf 14: Srovnání výsledků analýzy; zdroj: vlastní ....................................................................... 94 Graf 15: Činnosti, které uživatelé chtějí provozovat na mobilních stránkách společností, zdroj: (Sterling, 2012) ....................................................................................................................... 121 Graf 16: Čeho si uživatelé cení na mobilních webových stránkách, zdroj: (Sterling, 2012)... 121
112
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
13.
Rejstřík
A
H
AJAX, 24 HSCSD, 28
akcelerometr, 17
HSDPA, 30
Android, 20, 24
HSUPA, 30
Android default web browser, 25
Ch
B
chování uživatele mobilních zařízení, 36
Bada, 20, 27
chytrý telefon, 12, 18, 39
BlackBerry OS, 20, 25 breakpoint, 65
I
C
iOS, 20, 22
CDMA, 29
K
CSD, 28 CSS, 59, 60
kufrový test, 53
D
L
Darwin, 20
layout, 48
dotykový displej, 15
Linux, 20 LTE, 30
E M
EDGE, 29
Maemo, 20
F
media types, 61, 63 Mobile First, 43, 48, 65
feature phone, 12
Mobile OS, 20
flexibilní web, 55
mobilní operační systémy, 20 mobilní webový design, 47
G
mobilní zařízení, 12 GPRS, 29
Mobilní zařízení
GPS, 17
feature phone, 12
gyroskop, 17
113
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
N
Symbian, 20, 26
navigace, 51
T
netbook, 18 tablet, 18, 38
notebook, 17, 18, 37
tablet Computer, 13
O
tablet PC, 14
Opera Mini, 27
U
P
UMTS, 30 URL, 52
PPI, 51
W R webOS, 20 Responsivní webový design, 55
webový design, 46 Windows CE, 20
S
Windows Mobile, 20
Safari, 23
Windows Phone, 26
separátní mobilní web, 54
Windows Phone 7. viz Windows Phone
smartphone. viz chytrý telefon
114
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
14.
Příloha 1: Pokrytí ČR mobilním internetem
Následující mapy zobrazují pokrytí v České republice k 22. listopadu 2012. Vodafone:
Obrázek 15: Mapa pokrytí mobilním internetem operátora Vodafone; zdroj: www.vodafone.cz
Obrázek 16: Legenda k mapě pokrytí operátora Vodafone, zdroj: www.vodafone.cz
115
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal T-Mobile:
Obrázek 17: Mapa pokrytí mobilním internetem operátora T-Mobile; zdroj: www.t-mobile.cz
Obrázek 18: Legenda k mapě pokrytí operátora T-Mobile; zdroj: www.t-mobile.cz
116
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Telefónica O2:
Obrázek 19: Mapa pokrytí mobilním internetem operátora Telefónica O2; zdroj: www.O2.cz
117
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
15.
Příloha 2: Srovnání desktopových a mobilních přístupů na weby
z portfolia společnosti Seznam.cz Společnost Seznam.cz zveřejnila statistické údaje o počtu návštěvníků za březen 2012, ve kterých porovnává přístupy z desktopů a z mobilních zařízení. V této době zaznamenaly služby Seznam.cz, mezi které patří např. email.cz, lide.cz či stream.cz., téměř 5,5 miliardy zobrazení, přičemž na mobilních zařízeních to bylo 200 milionů. Z tohoto počtu měl největší zastoupení operační systém Android, který využívalo 35 % návštěvníků, následoval jej Symbian s 25 % a iOS s 13 %. Z konkrétních zařízení se pak nejvíce lidé připojovali prostřednictvím Apple iPhone (11%), druhé a třetí místo obsadily Samsungy S5830 a S5230 se 4 % a 3 %. Seznam.cz dále uvádí různé zajímavosti a statistiky přístupů ke stránkám z portfolia společnosti (Seznam blog, 2012).
Obrázek 20: Graf přístupů na domovskou stránku Seznam.cz během běžného pracovního dne; zdroj: (Seznam blog, 2012)
Uživatelé mobilních zařízení si během průměrného pracovního dne udržují zhruba 5% podíl na přístupech na domovskou stránku Seznam.cz. Podíl proti desktopům je nejlepší v nočních hodinách, během pracovní doby je situace opačná.
118
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
Obrázek 21: Graf přístupů na zpravodajský web Novinky.cz během průměrného pracovního dne; zdroj: (Seznam blog, 2012)
Obdobně jako v případě domovské stránky Seznam.cz i graf přístupů na zpravodajský portál Novinky.cz drží podobnou křivku v porovnání mobilních zařízení a desktopů. Rozdíl je v poměru přístupů, mobilní zařízení zabírají takřka čtvrtinu ze všech uživatelů. Největší vliv mají mobilní zařízení kolem poledne, kdy uživatelé získávají aktuální informace takříkajíc „k obědu“.
Obrázek 22: Graf denních přístupů na zpravodajský portál Sport.cz; zdroj: (Seznam blog, 2012)
119
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Vysoký poměr uživatelů drží mobilní zařízení i na sportovním zpravodajském serveru Sport.cz, kde tvoří zhruba 20 % zobrazení. Z grafu je také možné vidět, jak jsou čtenáři tohoto serveru citliví na aktuální dění ve světě sportu.
Obrázek 23: Graf přístupů na bulvární server Super.cz během průměrného dne; zdroj: (Seznam blog, 2012)
Poslední graf uvádí přístupy na bulvární web Super.cz, u nějž tvoří část mobilních uživatelů zhruba 15 %. Uživatelé mobilních zařízení mají nejvyšší přístupy ve večerních hodinách, zatímco v pracovní době má server nejvíce přístupů z desktopů.
120
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
16.
Příloha 3: Grafy ke kapitole psychologie chování uživatele Činnosti, které uživatelé chtějí provozovat na mobilních stránkách společností 41%
Přehrát si videoklip
48%
Dostat se na stránku společnosti na sociálních…
53%
Stáhnout si aplikaci
54%
Poslat email
61%
Najít telefonní číslo a volat
76%
Zjistit adresu nebo otevírací hodiny 30%
40%
50%
60%
70%
80%
Graf 15: Činnosti, které uživatelé chtějí provozovat na mobilních stránkách společností, zdroj: (Sterling, 2012)
Čeho si uživatelé cení na mobilních webových stránkách 64%
Skrolování pouze v jednom směru (buď nahoru-…
66%
Volání telefonního čísla jedním kliknutím
73%
Neskrolující formuláře s nepříliš mnoho poli 69%
Velká, prstem dobře ovladatelná tlačítka
73%
Jednoduché uložení pro příště
74%
Možnost přejít na plnohodnotnou webovou …
74%
Vypadají čistě a výkonně
76%
Vejdou se na malý displej
78%
Dostatečně velký, jednoduše použitelný …
78%
Jen jedno nebo dvě kliknutí pro více informací
60% 62% 64% 66% 68% 70% 72% 74% 76% 78%
Graf 16: Čeho si uživatelé cení na mobilních webových stránkách, zdroj: (Sterling, 2012)
121
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
17.
Příloha 4: Ilustrace k analýze V příloze
přikládám
ilustrace
k analýze
multiplatformních
přístupů
k webovým stránkám železničních dopravců v ČR. Nejprve následuje zobrazení jednotlivých webových stránek na zařízení Apple iPhone 4S:
Obrázek 24: Srovnání zobrazení webových stránek na zařízení Apple iPhone 4S, zleva České dráhy, LEO Express, RegioJet; zdroj: vlastní
122
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal Další trojice ilustrací předvádí zobrazení jednotlivých webových stránek na zařízení Apple iPad.
Obrázek 25: Zobrazení webových stránek společnosti České dráhy na zařízení Apple iPad; zdroj: vlastní
123
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
Obrázek 26: Zobrazení webových stránek společnosti LEO Express na zařízení Apple iPad; zdroj: vlastní
124
Přístupy k řešení mobilních webových aplikací Bc. Tomáš Nadrchal
Obrázek 27: Zobrazení webových stránek společnosti RegioJet na zařízení Apple iPad; zdroj: vlastní
125
