Jak postavit webovou
stránku pro mobilní
zařízení
Lukáš Kokoška
Mobilní web?
Mobilní prohlížeč
Keyhole browsery
Zoom-in-out browsery
Zbytek
Mobilní web?
Mobilní připojení
GPRS / EDGE
ping 220ms / 110kB/s down
3G
ping < 100ms / ???kB/s down
Mobilní web?
Mobilní uživatel
potřeba
praktické informace
zabít čas
chce rychlost, málo dat
Design stránky
Jednoduchost
Přehlednost
Obsah na prvním místě
Navigace
Design stránky
Ovládání
dotykové
do odkazu se musím trefit palcem
kurzor
do některých odkazů se prostě nedá trefit (kdo si četl manuál, ví že to jde)
řádek
co všechno musím přeskákat, než se dostanu k obsahu
Design stránky
Rychlost
síť
vložený obsah (CSS, obrázky, JS)
rendering
Jak na to ...
Mám web, jak ho dostanu do mobilu?
transcoding
responsible webdesign
mobilní verze
adaptive rendering
Možná řešení
Čas Náklady
Podpora
zařízení
Vzhled Použitelnost
Ttranscoding
☺ ☺ ☹ ☹ ☹
Responsive
Webdesign ☹ ☺ ☹ ☺/☹ ☺/☹
Mobilní verze
☹ ☺ ☺ ☺/☹ ☺/☹
Adaptive
rendering ☹ ☹ ☺ ☺ ☺
Transcoding
Služba třetí strany
Nějak to načte stránku a nějak ji to překreslí
Naprosto nezaručený výsledek
Nouzové řešení
Responsive webdesign
Malá podpora zařízení
iOS 4.2+, Android 2.2+, BrowserNG 7.4
Složité odladění/debug
datová náročnost
jeden vzhled / ovládání
Mobilní verze
Pro průměrný telefon
omezení vzhledu, designu a ovládání
funguje na dostatečném množství telefonů
Adaptive rendering
Rozpoznání telefonu
Stránka se vykresluje podle schopností a vlastností
telefonu
Automatické zmenšování grafiky
Do stránky se vloží takový obsah, který zařízení
zvládne
Pro jaké telefony to bude
Za říjen přišlo na mobilní verzi služeb Seznamu 1353
různých mobilních telefonů, které jsme rozpoznali
11% nerozpoznáme přesně a obsah renderujeme
podle částečného rozpoznání (prohlížeč, OS)
Graf zobrazených stránek tvoří neskutečný long tail
Very very long tail 1353
OK, omezíme to na první stovku
Very long tail 100
To už vypadá líp ;-)
Top 20
Tady je už i něco vidět
Ještě jeden pohled
Kolik zařízení má smysl
podporovat?
nejhorší v top 10 je Nokia
E52
nejhorší v top 100 je
Samsung E250 a Nokia
N70
Top n telefonů %
10 31 %
20 44 %
50 62 %
100 73 %
Prohlížeče
Na klasickém webu je to sranda: 5 prohlížečů a
několik jejich verzí
Na mobilu máme Webkit od Nokie, Googlu, Applu,
atp
Pak máme Operu (Mini/Mobi), NetFront, OpenWave,
Obigo,
Výrobci telefonů taky mají své: Motorola Internet
Browser, SonyEricsson Browser, BlackBerry browser,
atp.
Kolik jich musíme
podporvat?
V top 100 máme zhruba 25 browserů, každý asi tak v
6ti verzích
Každá verze má své specifické bugy a “fíčury”
Jak se to dá řešit?
Buď uděláme tak jednoduchou a ošklivou verzi, že
bude fungovat všude
Nebo budeme renderovat obsah podle schopností
telefonu
Rozpoznání telefonu
HTTP hlavička User-Agent + další hlavičky
User-Agent standardizovala Mozilla a webové
prohlížeče to respektují
Výrobci mobilních zařízení mají jiný názor
Aktuálně máme automat na dekompozici user-agenta
asi na 200 řádků, který pojme 99% všech variant
perlička: některé telefony mají v user-agentu
dokonce překlepy
Rozpoznání telefonu
Z User-agenta dostaneme sadu krátkých frází a ty
potom dohledáme v databázi.
Jakmile poznáme telefon a nebo prohlížeč a nebo
operační systém a nebo transcodér, databáze nám
vrátí sadu vlastností, podle kterých vykreslujeme
stránku
Vlastností máme přibližně 150
Rozpoznání telefonu
Zbytečně robustní řešení ... pro většinu asi ano
Pro pokrytí top 50 by stačilo poznat platformu a
prohlížeč a pro každou platformu si nadefinovat
základní rozlišení
Skupiny
Asi nejjednodušší způsob je připravit si několik skupin
telefonů a připravit si šablony pro jednotlivé skupiny
Pak už stačí poznat do které skupiny telefon/prohlížeč
zařadit
Skupiny
Pro každou skupinu vytvoříme šablonu
Kolik budeme mít skupin záleží čistě na nás
Pro začátek stačí 3 - Low, Mid a High
Skupiny
HighEnd
iPhone, nové Androidy a nové Nokie
dotykové, JavaScript
MidEnd
běžné telefony, kompletní obsah
LowEnd ≠ WAP
dřevěné telefony a jiné vykopávky z doby kamenné :-)
HighEnd
Tady se můžete vyřádit
HTML5
Dotykové rozhraní
Dobrá podpora JavaScriptu
10 - 15% uživatelů si to opravdu užije
MidEnd
Největší skupina
XHTML MP + WCSS
rozlišení od 168x220 do 320x480 - ovládací prvky
rozumná podpora formátů
nezkoušejte vylomeniny, některé browsery dokážou
restartovat nejen sebe, ale i telefon
LowEnd
XHTML MP 1.0 / WCSS
Rozlišení displaye do 240x320
mizerná podpora čehokoliv
pozor na gify, pngy
čím míň obsahu na stránku, tím lépe
Seznam
Vlastnosti telefonů máme ve skupinách
Skupiny definují jak se renderují jednotlivé části
stránky
Každá stránka se skládá z malých komponent, které
se sami renderují
Každá část stránky je definovaná v různé a
dynamicky se dědí podle rozpoznaných skupin
telefonu
Některé skupiny mají speciální kód, jiné se renderují
obecně jen podle vlastností
Seznam
Výhody
Veškeré problémy s vykreslováním řešíme na
jednom místě pro všechny služby
Do webovky pak jenom definujeme, kde a na co se
má která komponenta použít
Nevýhody
Správa a přehlednost
Co dál? Rychlost načítání
Kde to jde, řešit maximum grafiky pomocí CSS
Co nejméně HTTP požadavků
Jen nutný obsah
Proč?
Datová náročnost
EDGE je pomalý, 3G jen ve městech
latence
rychlost renderování
datové limity FUP (5MB na den)
max 2-3 HTTP požadavky najednou
Jak dál
Testovat, testovat a testovat na každém telefonu,
který potkáte
Na internetu je spoustu užitečných informací
http://mobilniweb.info
twitter @lukoko_name