O mobilní verzi webu
Pokud chcete zpříjemnit čtení blogu vašim drahým návštěvníkům používající mobilní zařízení, máte hned několik možností:
- Nechat web tak, jak je
- Stáhnout plugin typu WPTouch (samostatná šablona)
- Vytvořit zcela samostatnou webapp
- Posílat přeformátovaný CSS styl
Všímaví čtenáři si jistě všimli, že jsem jednu z těchto variant na tenhle blog nedávno nasadil (po delší existenci pouze varianty 1). Není to ovšem varianta 2.
Myslím si, že web jako takový by se neměl snažit napodobovat UI nějakého konkrétního operačního systému (s drobnou výjimkou pro formulářové prvky), a to ani mobilní zařízení, protože web je jaksi ze své podstaty multiplatformní (nebo “otevřený”, jak je teď v módě říkat) a tak nějak to celé nedává úplně smysl. Takhle neelegantně se chová WPTouch – napodobuje vzhled iPhone OS. Kromě toho, že by můj blog vypadal jako “další WordPress s WPTouchem”, ještě mi budou nadávat uživatelé Androidu a jiných mobilních OS, protože budu v jejich očích ovce Steva Jobse s žádným smyslem pro otevřenost. Pro tyto účely je vhodné najít nějakou kreativnější a méně arogantní možnost.
Pokud opravdu nechcete ztrácet čas optimalizací a nelíbí se vám ošklivý plugin, ve většině případů je OK nechat web být tak jak jste ho napsali pro desktop. Moderní WebKit prohlížeče se s úspěšností prokousávají vším možným, co jim předhodíte a pokud váš web není extrémně datově či layoutově náročný, tak se dá z iPhonu docela pohodlně používat (údajně i z Androidu).
Variantu 3 na blog spíše nevyužijete. Hodí se spíš na velké sociální weby typu Last.fm a Facebook, u kterých spousta features na mobilním zařízení nedává smysl a nabízí více focused rozhraní. Tyhle specifické mobilní aplikace jsou v zásadě napsané od začátku pro mobilní browsery a využívají vlastní, optimalizované přístupy k databázím, nebo třeba se službou komunikují přes veřejná API. Pro blog je to holt overkill.
Jak správně tušíte, používám poslední variantu. Do hlavičky stačí přidat referenci na CSS styl s atributem media="handheld, only screen and (max-device-width: 480px)", čímž zahrnete většinu mobilních zařízení a zároveň chytře vypustíte iPad, na kterém vypadá plný web úplně akorát. Inspiroval jsem se u blogu TapTapTap (prohlížejte na mobilu a porovnávejte s desktopem), kde mobilní verze vypadá prakticky stejně jako ta plná, jen je šikovně přeformátovaná a optimalizovaná pro 320px na šířku (nojo, dělají iPhone aplikace).
Tak nějak vypadá i NiceOne, obsah je o něco užší, obrázky trochu menší a je to príma. Slepí mohou otočit na šířku – tam se nepřepočítává šířka, jen se zvětšuje font.
Odzkoušeno mám na iPhonu, dokonce jsem si i stáhnul emulátor Android browseru a na obou N1 šlape tak, jak by mělo. Pokud máte nějakou minoritní platformu (Nokii, Palm, WinMobile, exotické rozlišení Androidu?), ozvěte se prosím s chybami na můj Twitter.
Příjemná věc při tvoření na mobilní browsery je, že WebKit prohlížeče (iPhone, Android, Palm WebOS a snad i BlackBerry) jsou zdaleka nejdál v implementaci HTML5 a CSS3, takže se nemusíte při vývoji nijak omezovat. Podívejte se třeba na citace z Twitteru v článku o iPadu, které mají nastavenou transformaci, stín a kulaté rohy. Na iPhonu se nejenom zobrazí správně, ale taky se šikovně přeformátují na šířku. Baví mě to.
Pro shrnutí – mobilní verze webových stránek jsou rozhodně přínosná věc, jen nesmí být na úkor kreativity vložené do původního layoutu, je-li to alespoň trochu možné. Také by si web neměl hrát na nativní rozhraní OS, protože to prostě dost dobře nejde, nativní UI má všude prostě jiný feeling (a kromě toho jde proti principům otevřeného webu).