Nová éra webu? Pomocí zařízení ovládaných dotykem

Před rokem jsem dělal na vysoké škole seminární práci ohledně mobilních zařízení a jejich operačních systémů. V té době našim dlaním, prstům a kapsám vévodily starší verze Android, iPhone 3, Windows Mobile 6.5 (v té době byl Windows Mobile (Phone) 7 ještě nevydaný – což mi přijde, že není ani dnes). Nějaký rok před tím však také existovala zařízení, která se ovládala dotykem nebo alespoň dotykovým perem. V té době to však bylo spíše vyjímkou.

Dnes jsou však tato zařízení na vzestupu. Zařízení jako iPhone 4. generace, iPad, Samsung Galaxy Tab, LG Optimus 2X, BlackBerry Playbook nebo Motorola Xoom mají poměrně vysokou prodejnost – těší se vysoké oblibě a to i díky stále větší dostupnosti rychlého Internetu a prostředkům (např. pokročilé ovládání, operační systémy a nástroje). Když si na těchto zařízeních zabrouzdáte na Internetu, je to rozdílné než na desktopu, notebooku nebo na maličkých netboocích. Prohlížeče stále nedosahují takových možností a vlastností, jako jejich desktopoví protějšci a displeje některých zařízení jsou stále poměrně malé (na desktopu už jdou nahoru rozlišení typu 1680×1050, na smartphonech je to 800×480 a na tabletech se začínají objevovat 10″ displeje s rozlišením 1280*800), ale už je to mnohem lepší než na starších generacích mobilních telefonů s rozlišením okolo 320*200.

Jenže jak jsem psal, tato zařízení získávají na oblibě, prodáno jich bylo již několik stovek milionů kusů a každý den se toto číslo neustále zvyšuje. Prohlížení internetu na takovém zařízení se stává poměrně obvyklou činností (a to i u nás, kde rychlý mobilní internet nemá dostatečné pokrytí). Plno webových stránek však zatím není na podobná zařízení připravena (ano, zatím ani moje není, avšak pomalu připravuji úpravy – viz má Facebook Page). Mělo by se s tím pomalu něco dělat, i když asi bude lepší si položit otázku – jde s tím něco dělat?

Web krásně funguje na desktopu, proč dělat za další peníze verzi šítou pro mobilní zařízení?

Nejsem marketingový specialista a ani si na něj nechci hrát. V předchozím článku Tvořím web – myslím na návštěvníkyjsem se zmínil o tom, že web je dělán především pro uživatele. Pokud bychom to měli rozšířit, tak i když vlastníme a provozujeme nějaký e-shop nebo jiný webový obchodní model, měli bychom myslet především na uživatelský komfort, protože nám návštěvníci, jakožto potencionální zákazníci, vytvářejí obrat.

Otázkou může být, zda se vyplatí vytvářet menším subjektům i oddělenou nebo alespoň z části optimalizovanou (o obou možnostech se zmiňuji níže) webovou podobu, protože to může vytvořit poměrně slušné finanční náklady navíc nejen při samotné tvorbě, ale i následném spravování. Nebyly by to jen subjekty co se týče velikosti, které by se případně mohly rozmýšlet nad pořízením verze své webové prezentace optimalizované pro mobilní telefony, ale také některá odvětví provozující své eshopy. Ale mít optimalizovanou verzi webu pro mobilní zařízení se stává pomalu samozřejmostí (opravdu pomalu).

Web tedy krásně funguje, vykazuje desetitisíce návštěv denně, generuje vysoký obrat. Proč tedy vytvářet mobilní verzi? Jak jsem psal v předchozích odstavcích, zajistí to uživatelům vyšší komfort i na mobilním zařízení. Například při cestě autobusem si chceme přes e-shop něco objednat přes mobilní zařízení a musíme se zdlouhavě proklikávat neforemnou strukturou webu, čekat na nahrávání velkých obrázků apod. Nebo nemusí to být pouze na cestě. I já se občas přistihnu nad tím, že jsem doma a nechce se mi zapínat počítač, tak se na Internet podívám skrze tablet nebo mobilní telefon (i když na tabletu na wifi problém se stránkou samotnou problém nemám, pouze s některými prvky webu – čemuž se věnuji níže). Takto se může chovat dalších XX tisíc potencionálních zákazníků a mohlo by to vytvořit obrat do budoucna – a to je právě jeden z těch důvodů. Mít připravenou verzi pro mobilní zařízení, v budoucnu se bude jistě velice hodit.

Mobilní internet – dnes dostupná zábava. Za příplatek!

Dnes je téměř vše možné, to samé platí i o mobilním internetu. Díky 3G sítím je možné získat do mobilního zařízení poměrně dost rychlé internetové připojení, na kterém lze sledovat klipy na YouTube, posílat tweety na Twitter, sdílet nálady na Facebooku a nebo si prohlížet internetové magazíny plné obrázků. Má to však poměrně velkou nevýhodu a to tu, že FUP takových tarifů se pohybuje poměrně nízko (např. u Vodafone je v aktuální nabídce datový tarif s FUP 3GB za 525 Kč a u O2 je FUP 10GB za 750 Kč – což už není vůbec špatné, ale za tu cenu …) a pokud tento limit překročíte, bude vám opravdu hodně citelně stažena rychlost.

A v tom právě tkví ta slabina mobilního internetu. Buď si uživatel připlatí nemalé peníze za vysoké FUP a nebo si pořídí menší tarif, kde daný limit může brzy překročit a rychlost mu tak citelně klesne (při současných ~1.8Mb/s u 3G na ~150kb/s u EDGE je opravdu rozdíl). V dané situaci je pak poměrně obtížné prohlížet si webové strányk plné videa nebo objemné grafiky. Návrháři nemohou a ani by neměli (vzhledem k uživatelům), že budou mít bezproblémový přístup k Internetu za všech podmínek.

Mobilní internet, jeho rychlost a omezení datových přenosů nejsou jedinou mitující překážkou pro prohlížení webových stránek na mobilních zařízeních typu smarthphone nebo tablet.

To je všechno hezké, ale …

Ano, podobné věci obhajovat před klientem nebo před sebou samým, že je to potřeba a věnovat tomu čas a peníze, může být poměrně složité, když statistiky hovoří jasně. Ale nyní právě statistiky mohou ukázat, že počet mobilní zařízení, se kterými návštěvnici přišli, se začínat zvyšovat a neoptimalizovaná verze může některé zákazníky odradit.

Informací ohledně prohlížečů na mobilních zařízení jsem zatím přiliš moc nenašel. Zatím jsem zkoukal vlastnosti některých prohlížečů pomocí metody pokus omyl, kdy jsem zkoušel jednotlivé elementy s různými CSS atributy, jednoduché a složitější JavaScripty a sledoval, co který prohlížeč zvládne. Mohu říct, že je to opravdu dobré a byl jsem mile překvapen, co všechno tyto prohlížeče zvládnou, ale často jsem byl překvapen, které vlastnosti dané prohlížeče neumí správně zobrazit a může to působit neforemně. A také jsem zkoušil ovládání na webech, které jsou hodně interaktivní (i když to nemusí být zrovna v pozitivním ohledu), např. pomocí mnoha lightboxů, sliderů a „AJAXů“.

Dnes je plno zajímavých nástrojů a postupů, pomocí kterých vyvíjet web pro mobilní zařízení. Pro tento typ vývoje vzniká plno zajímavých frameworků (např. jQuery Mobile nebo Sencha Touch – i když ty jsou spíše pro mobilní aplikace než pro samotné webové stránky). Díky těmto nástrojům je vývoj o dost jednodušší a mobilní webové stránky dostanou úplně jiný rozměr. A hlavně, počítají s možnostmi mobilních prohlížečů. Pokud bychom web vyvíjeli na desktopu a následně se pokoušeli odladit pro mobilní prohlížeče, může to být procházka peklem (může, protože které mobilní prohlížeče jsou nejpoužívanější, když je mobilních systémů tolik?). Prohlížečů pro mobilní zařízení je poměrně dost a stále vznikají nové a nové (stejně jako pro desktopy. Dalo by se také říci, že nejolibíbenější jsou Browser for Android, mobilní Safari (je to na i-zařízeních opravdu mobilní Safari?), Opera Mini/Opera Mobile a možná se začíná prosazovat také Firefox Home.

Také mě přímo napadlo, ještě toho trochu. Stačí optimalizovat pro desktopové prohlížeče a ještě ztrácet čas s mobilní verzí. Ono to není tak složité, jak by se mohlo zdát. Na mobilním webu nefungují některé dané prvky, které by mohly ztížit například orientaci na menším displeji nebo ztížit samotné ovládání prstem. V tom vidím pozitivum. Problém je však v tom, že podobných prvků je na webech hodně, někdy až příliš. Tím myslím například JavaScriptové tzv. Lightboxy, fixní pozicování, vykreslování různorodých velikostí písma atd. Díky optimalizovanému webu se tak dostatne jednoduchá podoba (plně funkční) do mobilního zařízení, půjde rychle a uživatel bude stránku moci pohodlně ovládat pomocí svých prstů a obrazovky.

Jaké jsou možnosti?

Nejsem zatím v tvorbě mobilních webů tolik zkušený, abych mohl něco kázat nebo poučovat. To ani nechci. Jen jsem si všiml, jak jsou některé mobilní verze webů (některé jsou navrhovány tak, aby se tvářily jako mobilní aplikace – téměř nativní!). Protože podobná zařízená neustále narůstají, chci jako front-end developer držet hladinu svých znalostí alespoň na trochu vyšší úrovni, snažím se testovat, zkoumat a nechat se inspirovat kde to jen jde.

Nová stránka přímo a pouze pro mobilní zařízení

Asi nejsložitější, nejnáročnější a respektive také nejdražší formou je vytvořit samostatnou verzi přímo pro mobilní zařízení. Vyžádá si to například úpravu celé HTML struktury webu, optimalizace JavaScriptu, vypuštění některých obrázků a úpravu navigace tak, aby to bylo na mobilním zařízení co nejjednodušší. Daná prezentace však musí být v jiném prostoru, než prezentace pro normální počítače (například http://www.twitter.com a http://mobile.twitter.com/)

Má to však tu výhodu, že taková stránka se bude na takovém zařízení zobrazovat rychle, objem přenášených dat k návštěvníkovi bude teoreticky minimální a základní funkčnost bude zachována. Je tak snadné také vytvořit rozložení tak, aby se zobrazovala na libovolně velkém displeji – nebude záležet na tom, zda to je tablet s 10″ displejem nebo starší telefon s 320*200 rozlišením. To však může být také nevýhoda, protože není na takovou stránku umístit tolik obsahu, kolik by bylo vhodné (např. perexy článků novinek, dlouhé popisky produktů, apod.). Výhodou také může být použití některého ze specializovaných frameworků, jak jsem již zmiňoval například jQuery Mobile nebo Sencha Touch.

Media queries

Technika media queries není teoreticky nic nového. Na mnoha webových stránkách se to již poměrně dlouho používá (např. pro definování stylů pro tisk, pro obrazovku nebo handheld zařízení. V poslední době však možnosti media queries nabývají nových rozměrů díky možnosti upravit vzhled stránky pro různě velké displeje. Webová prezentace tak bude optimalizována pro malé displeje, pro střední a pro velké.

Stává se velice oblíbenou a je možné jí nalézt již na mnoha webech a při procházení na mobilním zařízení návštěvník ani nepozná rozdíl a není nutné přesměrovávat na jinou doménu nebo subdoménu. Je zde však velká nevýhoda a to ta, že objem přenášených dat neklesne. Stránka se pouze přizpůsobí velikosti displeje a zobrazí pouze ty nejdůležitější prvky. To může být v našich končinách, kde ještě všude není vysokorychlostní mobilní internet, poněkud problém.

Tato úprava je však mnohem jednodušší, než vytvářet samostatnou webovou prezentaci. Je nutné pouze patřičně upravit CSS styly a v případě potřeby patřičně upravit HTML strukturu.

Jiné techniky?

Na jiné možnosti tvorby mobilního webu jsem zatím nenarazil, nebo jsou zahrnuty ve dvou zmíněných možnostech. Pokud jde mobilní web vytvořit ještě jiným způsobem, rád se nechám poučit. Už jsem také slyšel o možnosti vytvořit aplikaci pro mobilní zařízení, která by suplovala funkce webu. Ale to již nemá s webem nic společného, je to velice drahé a i pro uživatele to není zrovna nejlepší řešení.

Ještě je zde možnost použít některých z dalších frameworků, například Backbone.js, avšak s tím zatím nemám příliš mnoho zkušeností, pouze nějaké teoretické znalosti.

Mobilní web do budoucna

V mobilním webu do budoucna vidím sílu. Počet mobilních zařízení neustále roste, mobilní internet se pomalu zrychluje, výkon těchto zařízení také rapidně roste a i samotné webové technologie prožívají výrazný pokrok. Web je však stále doménou stolních počítačů, ale pomalu by se měl připravovat i na mobilní zařízení, protože potkat v MHD, v parku nebo v kavárně člověka, který brouzdá přes chytrý telefon nebo tablet, není nic neobvyklého.