Některé mobilní stránky pro iPhone se chovají jinak, než klasická stránka. U mobilních stránek není potřeba scrollování do stran, není tam potřeba zoomavání atp. To vše jsou vlastnosti, které se dají vypnout, nebo nastavit.

Jak jsem zmínil v nadpisu, chování prohlížeče se nastavuje v xHTML hlavičce meta s parametrem name="viewport" kde máme k dispozici tyto vlastnosti:

• width - šířka viewportu, na který se vykreslí stránka. Pokud se nastaví moc velký, pak je text nečitelný, takže pokud nastavíte tuto hodnotu, iPhone nekontroluje čitelnost textu.
• height - výška viewportu. Chová se stejně jako width.
• initital-scale - úvodní zoom. Díky této vlastnosti je možné nastavit základní přiblížení nad stránkou. Opět je potřeba používat s rozumem. Může se hodit pokud máte nějakou stránku s pevnou šířkou upravenou pro ostatní telefony a chcete pro iPhone jen nazoomovat. Obecně pro mobilní weby pro iPhone doporučuji nastavit na 1.0
• user-scalable - tímto atributem je možné vypnout zoomování na stránce. To je opět užitečné pro mobilní web a zároveň tím zamezíte horizontálním scrollování
• minimum a maximum scale - pomocí těchto parametrů je možné definovat rozmezí zoomování na stránce

Tabulka s vlastnostmi bude potom vypadat takto:

Kombinací těchto hodnot je hodně, ale většina z nich napáchá spíš škodu než užitek, nebo jsou k ničemu.

Pro uživatelsky příjemné prohlížení mobilního webu používám:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

tato konstrukce způsobí, že se zamkne posouvání do stran, nastaví se zoom na 1, zamezí se a zoomování. Nic se potom nezvětšuje/zmenšuje a dá se říct, jak se stránka zobrazí. Navíc ji je možné posouvat jenom nahoru a dolu, takže při čtení textu neutíka odstavec do stran (ano stává se mi to ).

Hlavička User-Agent vznikla k tomu aby identifikovala prohlížeč, který právě přistupuje na stránku. Kompletní historii obsahu hlavičky User-Agent a proč se i Internet Explorer hlásí jako Mozilla tu nebudu rozebírat, protože už napsali jiní.

Než se pustím do povídání o User-Agentech v souvislosti s rozpoznáváním mobilního telefonu, musím zmínit další užitečnou HTTP hlavičku a to x-wap-profile, která má obsahovat URL k RDF souboru, popisujícímu vlastnosti daného zařízení, ale o tom někdy jindy.

User-Agent, kterým se identifikují standardní internetové prohlížeče se postupem doby poměrně standardizoval a je z něj možní vyčíst několik běžných informací o daném prohlížeči. Pro příklad uvedu UA Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_5; en-us) AppleWebKit/525.18 (KHTML, like Gecko) Version/3.1.2 Safari/525.20.1, kde jednotlivé části znamenají:

• Mozilla/5.0 slouží pro zpětnou kompatibilitu - znamená, že je funkčně ekvivalentní Mozille ve verzi 5
• ( uvozuje komentář
• Mackintosh platforma
• U bezpečnost, kde U je silná, I je slabá a N žádná podpora šifrování
• Intel Mac OS X 10_5_5 na tomto místě je operační systém, nebo architektura systému … i686, ARM, PPC, atp.
• en-us Jazyková mutace prohlížeče
• ) konec komentáře
• AppleWebKit/525.18 je název vykreslovacího jádra a jeho verze
• ( … opět komentář
• KHTML, like Gecko znamená, že WebKit vychází z jádra KHTML, podobnému Gecku
• )
• Version/3.1.2 verze prohlížeče
• Safari/525.20.1 název prohlížeče a aktuální sestavení

U mobilních prohlížečů je to bohužel jinak. Je zde sice vidět, že se někteří výrobci snaží podporovat tento formát zápisu, ale mnoho jich není. Obecně lze říct, že nejhůř je na tom Windows Mobile. Proč si ukážeme vzápětí.

Pro začátek začneme tím nejjednodušším a to je User-Agent pro Nokie Series 40 (S40), v tomto případě Nokia 6230i: Nokia6230i/2.0 (03.23) Profile/MIDP-2.0 Configuration/CLDC-1.1


• Nokia6230i/2.0 identifikuje telefon Nokia 6230i a verzi S40, tedy 2.0
• (03.23) verze firmwaru v komentáři
• Profile/MIDP-2.0 je podpora MIDP ve verzi 2
• Configuration/CLDC-1.1 znamená podporu CLDC v J2ME ve verzi 1.1

Jak je vidět, tak u takového User-Agenta stačí získat znaky do prvního lomítka a víme o jaký telefon se jedná. Tento postup se poměrně často používal, dokud se nazačaly objevovat až moc odlišné varianty UA. Pomocí porovnávání od počátku je možná pracovat s UserAgenty typu:

Alcatel-BH4/1.0 UP.Browser/6.2.ALCATEL MMP/1.0
BlackBerry8100/4.2.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/100
LG-CU920/V1.0h Obigo/Q05A Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Link/6.3.1.20.0
MOT-L7e/CFWG2103AD 08.01.0AR/10.21.2005 MIB/BER2.2 Profile/MIDP-2.0 Configuration/CLDC-1.1 EGE/1.0
SAMSUNG-SGH-E250/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Browser/6.2.3.3.c.1.101 (GUI) MMP/2.0
LG-CU920/V1.0h Obigo/Q05A Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Link/6.3.1.20.0
SIE-C65/14 UP.Browser/7.0.0.1.c.2 (GUI) MMP/2.0 Profile/MIDP-2.0 Configuration/CLDC-1.1

Takovýchto UA je sice většina, ale není možné spoléhat pouze na tuto variantu. Nyní totiž přicházejí do hry malé modifikace:

LG/KU990/v10a Browser/Obigo-Q05A/3.6 MMS/LG-MMS-V1.0/1.2 Java/ASVM/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1
SonyEricssonK600i/R2BA/SN356572006901050 Browser/SEMC-Browser/4.2 Profile/MIDP-2.0 Configuration/CLDC-1.1
Vodafone/1.0/LG-KU990/V10i Browser/Obigo-Q05A/3.6 MMS/LG-MMS-V1.0/1.2 Java/ASVM/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1

Tady už máme oproti základní specifikaci ještě obecnější frázi. V této kategorii rozhodně kraluje Vodafone, který si bez skrupulí přidal na začátek “Vodafone/1.0/” a nalepil to přímo na původní UA, bez zamyšlení, co to udělá poskytovatelům obsahu. Pamatuji si, jaká byla tehdy zábava to řešit.

To byly ty jednoduché, teď pokročíme. Další oblíbenou částí User-Agentu, kde se nachází identifikace telefonu, je komentář. Do této kategorie patří Symbian, Opera Mini, atp. :

Opera/8.01 (J2ME/MIDP; Opera Mini/3.1.9127/hifi/tmobile/cz; Motorola V3; en; U; ssr)
Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; MDA Compact/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1)
Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_1 like Mac OS X; sk-sk) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5F136 Safari/525.20
Mozilla/4.0 (compatible; MSIE 6.0; Symbian OS; Nokia N93/20.0.058; 9730) Opera 8.65 [cs]
Opera/9.0 (Microsoft Windows; PPC; 640x480; HTC_X7500/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1; Opera Mobile/331; U; en)
Mozilla/5.0 (SymbianOS/9.2; U; Series60/3.1 NokiaE66-1/100.07.76; Profile/MIDP-2.0 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413
Mozilla/5.0 (PLAYSTATION 3; 1.00)
Mozilla/4.0 (PSP (PlayStation Portable); 2.00)

V některých připadech se je i přes upovídaný komentář informace stále na začátku:

8900a/1.2 Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 7.6) UP.Link/6.3.0.0.0
Palm750/v0101 Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11)
Qtek8010 (Mozilla\\4.0 compatible; MSIE 4.01; Windows CE; Smartphone; 176x220)

Někteří preferují mít tu základní informaci uprostřed, nebo rovnonu nakonec:

Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 7.6) SonyEricssonK610i/R1L Browser/NetFront/3.3 Profile/MIDP-2.0 Configuration/CLDC-1.1
Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 7.6) PPC; MDA compact/3.1 Profile/MIDP-2.0 Configuration/CLDC-1.1
MOT-E8/R6713_G_71.03.0AR MotoWebKit/417.19 (KHTML, like Gecko) BER/2.0 Mozilla/5.0 (compatible; OSS/1.0; Chameleon; Linux) Profile/MIDP-2.0 Configuration/CLDC-1.1 EGE/9.0
Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11) SAMSUNG-SGH-i900V/ACHH3

No a aby toho nebylo málo, tak si vysoké ocenění zaslouží i Nokia s E series (v tomto případě E60):

Mozilla/5.0 (SymbianOS/9.1; U; en-us) AppleWebKit/413 (KHTML, like Gecko) Safari/413 es60

Ještě přidám několik perliček:

• Mozilla/5.0 (SymbianOS/9.1; U; en-us) AppleWebKit/413 (KHTML, like Gecko) Safari/413 Nokia jeden čas vydala několik telefonů, které se nehlásili nijak …
• HTC_P3300 Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 7.6) Při pokročilejším parsování vám ta mezera před “Mozilla” udělá vyloženě radost
• MAUI WAP Browser MAUI WAP Browser
• MOT-RAZRV3xx/96.66.72CR BER2.2 Mozilla/4.0 (compatible; MSIE 6.0; 11033063) Profile/MIDP-2.0 Configuration/CLDC-1.1 Opera 8.00 [en]
• ASUS-GalaxyII/1.0 Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240x320; ASUS-GalaxyII) Jednou nestačí
• Mozilla/5.0 (Windows CE; U; Mobile; iPhone; PPC; en) AppleWebKit/522+ (KHTML, like Gecko) WM5 Iris/1.0.14 Safari/419.3
… Jsem mozilla, Windows CE, iPhone, Webkit, Windows Mobile 5 a nakonec Safari, tak si vyberte!
• Xda Orbit; 240x320 (compatible; MSIE 6.0; Windows CE; IEMobile 6.12)
• Mozilla/4.0 (Vodafone/1.0/LG-KF310/V10b Browser/Obigo-Q05A/3.12 MMS/LG-MMS-V1.0/1.2 MediaPlayer/LGPlayer/1.0 Java/ASVM/1.1 Profile/MIDP-2.0 Configuration/CLDC-1.1) UP.Link/6.3.0.0.0 jeden z nejdelších
• XJXN-F420/(2006.12.25)M.RF4201111.M01001.V1.0/WAP2.0 Profile/MIDP-2.0 Configuration/CLDC-1.0 UP.Link/6.3.0.0.0

To byly stále rozpoznatelné, ale …

Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240x240)
Mozilla/4.0 (compatible; MSIE 4.0; SmartPhone; SymbianOS-UIQ/1.0.0) NetFront/3.1
Mozilla/4.0 (compatible; MSIE 5.5; Windows CE; PPC; 240x320)
Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11) UP.Link/6.3.0.0.0
Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; PPC) Opera 8.65 [en]
Mozilla/4.1 (compatible; MSIE 5.0; Symbian OS) Opera 6.20  [cs]
Mozilla/4.0 (compatible; MSIE 4.01; Windows CE)
Mozilla/5.0 (SymbianOS/9.1; U; [cs]; SymbianOS/9.1 Series60/3.0) AppleWebKit/413 (KHTML, like Gecko) Safari/413
Mozilla/5.0 (SymbianOS/9.2; Series60/3.1 NokiaN82/30.0.019; Profile/MIDP-2.0 Configuration/CLDC-1.1 U; ) AppleWebKit/413 (KHTML, like Gecko) Safari/413
Mozilla/5.0 (Windows; U; Windows CE 4.21; rv:1.8.1a3) Gecko/20060610 Minimo/0.016
Opera/8.01 (J2ME/MIDP; Opera Mini/1.2.2960/1724; en; U; ssr)
Opera/9.50 (J2ME/MIDP; Opera Mini/4.0.10269/hifi/tmobile/sk; sk; U; ssr)
Opera/9.51 Beta (Microsoft Windows; PPC; 240x320; Opera Mobi/1718; U; en)
UNTRUSTED/1.0

Obecně je možné říct, že nejhůř je na tom Opera Mini, která ve většině případů neposílá o jaký telefon se jedná a potom Windows CE, které se nejspíš stydí za svůj prohlížeč. Každopádně jistá dávka studu se dá najít u většiny prohlížečů, protože každý druhý se snaží tvářit tu jako MSIE 6.0, tu jako Mozilla, tu jako PocketPC, i když je to Palm.

Jak postupovat

Když se mě někdo zeptá, jak identifikovat telefon z User-Agentu, tak mu většinou odpovídám že “blbě”. Jde to, ale …

První možnost je ukládat v databází kompletní User Agenty a potom je porovnávat. To by sice bylo asi nejpřesnější řešení, ale nároky na správu jsou zbytečně vysoké. Jenom za 3 dny jsem nachytal přes 3000 unikátních mobilních agentů (velké prohlížeče jsem nejprve promazal). Výrobci telefonů neustálě vydávájí nové firmwary, které změní UA a hlavně uživatel může na jednom zařízení používat více prohlížečů (IEMobile, Opera Mobile, Minimo). Takže tudy cesta vede pouze pro ty nejodvážnější.

Další způsob je ukládat do databáze část agena od počátku až tam, kde se dostanu k jednoznačné identifikaci telefonu. Většinou to ale dopadá tak, že máte potom databázi plnou zbytečně dlouhých frází.

Poslední možnost na napsat si parser všech možných variant User-Agentu a potom pracovat s jednotlivými slovy, které nám z parsování vypadnou. Tuto poslední variantu považuju za tu nejlepší, protože není nutné cokoliv upravovat se změnou firmwaru a v některých případech ani pokud uživatel přistupuje z jiného prohlížeče. Tato varianta je tedy nejlepší na správu.

Z těchto tří možností zároveň i vyplývá jakým způsobem rozpoznávat telefon. Prostě a jednoduše se daný UserAgent, nebo jeho část, ověřuje proti databázi telefonů, která obsahuje všechny potřebné informace včetně User-Agentu.

Na závěr …

… na závěr snad jen podotknout, jak by byl život sladký, kdyby výrobci mobilních telefonů a prohlížeču alespoň tušili, co znamená zkratka RFC.

Co jsem zkoušel na N95, tak je vidět, že se snaží využít mobilního prohlížeče, jak to jen jde. Stránka je zajímavá, dobře poskládaná a není zbytečně přeplácaná.

Video je možné stáhnout, streamovat, nebo zobrazit slideshow, takže i starší prohlížeče si přijdou na své.

Nakonec se mi povedlo donutit mobilní JavaScript zachytit událost stisku klávesy, ale tím jsem skončil. Nokia byla nakolik prozíravá, že na tlačítka navázala vlastní události, jako náhled stránky, hledání na stránce a podobně, které prostě nejdou zrušit.

Dokonce jsem strávil nějakou dobu hledáním řešení na webu až jsem se dostal na vývojářský web nokie, kde někdo z nokie na tento problém reagoval slovy ve smyslu, že moderní prohlížeče accesskey nepotřebují, tak proč to řešit.

Výsledek je tedy takový, že zachycená událost nastane, dokonce se na ní dá reagovat, ale nijak nejde zamezit události přímo v UI prohlížeče.

Návody, tutoriály, specifikace a dokument

• Global Authoring Practicies for mobile web
• Mobile Web Developer Guide - od dev.mobi
• WCSS specifikace (pdf)
• XHTML Basic 1.1 Cheat Sheet
• GRPS a APN - Návody na připojení přes GPRS

Transcodery

• Skweezer

Telefony

• GSM Arena - Databáze telefonů
• Phone Arena - Databáze telefonů
• Seznam telefonů - Seznam telefonů a jejich vlastností
• WURFL ProWURFL dostupný online

Nástroje

• Validator MobileOK - Validátor od W3C.
• ready.mobi - Validátor od dev.mobi
• dev.Mobi tools

Software

• Niime - N95 jako HID
• LightBlue - bluetooth knihovna pro Python
• python-mms - zpracování mms v Pythonu

Ostatní

• MobileOpen - o mobilním webu
• Introduction to Phone Web Browsers
• http://gm.knez.cz/ - seznam mobilních stránek
• Mobile design web resources
• Mobile UI design resources
• Vodafone BetaVine

2D kódy

• Nokia Mobile Codes
• QR Code generator
• Jak generovat QR cody

Český tutoriál XHTML Mobile Profile

• jako DTD používají XHTML 1.1 Strict místo XHTML Mobile Profile
• Stránky nejsou validní (podle ready.mobi)
• na Nokii N73 je rozsypaná patka
• některé části jsou hodně nepřehledné
• reklamní bannery jsou i na velkých displayích malé. Evidentně mají jen jednu velikost. Na druhou stranu je to lepší, než když u Vodafonu automaticky zvětšovali obrázek přesně na šířku displaye, to bylo opravdu ošklivé

Co na to Ready.mobi

Ready.mobi hodnotí mobilní t-zones stejně špatně jako homepage Vodafonu … to znamené 3. Jako vyloženě problématické body tam jsou zmíněné: Nedefinované kódování, Nespecifikovaná velikost obrázků (pak se to mnohem déle načítá, protože prohlížeč během načítání obrázku stránku neustále překresluje) a pagesize v případě operátora opět nehraje roli.

Obsah

T-mobile na rozíl od Vodafonu nepoužívá žádný systém pro skládání obsahu a asi je to i lépe. Každý dodavatel obsahu musí zaručit, že jeho řešení bude fungovat na většině (všech) přistupujících zařízeních.

Pokud pomineme tu ošklivou barvu, tak web T-zones pro mobil se snaží vypadat jako klasická webová stránka, kde jsou ale jednotlivé bloky poskládané pod sebe. Žádné další využití, nebo přizpůsobení není na první pohled patrné. Některé části, jako třeba seznam doporučených odkazů jsou velice nepřehledné, navíc je tam tolik odkazů, že pokud někdo s prohlížečem, který neumí skákat po řádcích odkazů, ale projede postupně jeden každý, si dá opravdu dost práce, než se dostane dolu na stránku.

T-mobile se prostě snaží udělat do mobilu normální web, jaksi nebere tolik ohledy na mobilní prostředí. Na druhou stranu se jich musím zastat, že jsem koukal jenom verzi pro N73 a N95, tak asi dávají ten nejlepší výstup, ale stejně mě to nijak nenadchlo.

1. Stránka na mobilním webu je dlouhá nudle, nesnažte se naskládat věci vedle sebe. Jednak se vyhnete velkému bolení hlavy při řešení floatování a jednak se to tam na většině zařízení nebude vejít
2. Zapomeňte na tabulky. Některé telefony sice tabulky vykreslovat umí, ale stejně se vám toho moc nevejde … viz 1
3. Čím méně vloženého obsahu, tím lépe. Neříkám, že obrázky jsou zlo, ale je potřeba si uvědomit, že pro každý obrázek musí telefon udělat jeden HTTP požadavek na server a ten trvá většinou dost dlouho
4. Mobilní web není jenom text (není WAP), tak používejte CSS. Podbarvení textu, odsazení a podobné věci neuvěřitelně zpřehlední celou stránku.
5. Dobře propracujte navigaci. Zamyslete se nad tím, kam se uživatel může potřebovat dostat při čtení jaké části stránky a takové ovládací prvky mu tam poskytněte. Nejen odkazy, ale i kotvy jsou na dlouhých stránkách víc, než užitečné
6. Dodržujte standardy XHTML MP. Při dodržení standardů se bude stránky rychleji vykreslovat a do jisté míry můžete předpokládat jak se budou vykreslovat
7. Udržujte stránku co nejmenší, ale co nejvíce naplněnou obsahem. Data jsou drahá a čas na načtení je dlouhý. Spoustu zařízení má paměťové omezení na velikost stránky (do tohoto omezení se počítá stránka včetně obrázků a CSS).
8. Opakující se motivy jsou nejen přehledné, ale i šetří data. Čím více prvků nastylujete podobně, tím méně dat se bude přenášet
9. Používejte CSS atribut -wap-input-format. Zadávání čísel do formuláře je mnohem rychlejší pokud je nastaven jako číselný vstup. (Pozor, někdy ne jako CSS vlastnost, ale jako atribut na tagu input.)
10. Definujte velikost písma. Ve velikosti např <h1> jsou obrovské rozdíly
11. Zvolte si cílové zařízení a pro ostatní se jen přizpůsobujte. Nesnažte se hned najednou napsat mobilní web pro všechny telefony. Zvolte si nějaký průměr a web pište pro něj. Pro ostatní jen optimalizujte.
12. Přesměrovávejte uživatele z webu. Pokud uživatel chce jít váš web a na mobilu zadá adresu “velkého” webu, tak ho přesměrujte na mobilní variantu

Je mi jasné, že to není zdaleka všechno, na co by se mělo při vývoji mobilního webu myslet, ale jako vyzdvižení některých podstatných bodů to myslím stačí.

Komentáře prosím do diskuze. Předpokládám, že tento článek budu časem updatovat a měnit.