Pár pravidel pro mobilní web
31.03.2008 – 22:07:59Zatím jsem tu v různých článcích jenom naťuknul, co by měla správná mobilní stránka obsahovat a jak by měla vypadat. Tentokrát k tomu přidám ještě jaká pravidla dodržovat při vývoji a na co si dát pozor. Takže bez zbytečného povídání soupis v několika bodech:
- 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 - Zapomeňte na tabulky. Některé telefony sice tabulky vykreslovat umí, ale stejně se vám toho moc nevejde … viz 1
- Čí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
- 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.
- 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é
- 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
- 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).
- 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
- 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.) - Definujte velikost písma. Ve velikosti např
<h1>jsou obrovské rozdíly - 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.
- 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.
