Mobilní web .info

Jak skládat stránku pro mobilní web

10.03.2008 – 23:43:06

Spoustu lidí má zkušenosti s designem webových stránek, ale málokdo s designem mobilního webu. Protože byl vývoj mobilního webu takový, jaký byl, tak také spoustu lidí nemá povědomí o tom, čeho všeho lze v mobilním prohlížeči dosáhnout.

Rozložení prvků na stránce

Obecná pravidla jsou vlastně stejná pro normální (nebo někdy říkám velký) a mobilní web. Každá stránka by měla mít hlavičku, aby uživatel věděl, kde se nachází a patičku s nějakým tím copyrightem. Z úplně jiného pohledu je nutné brát navigaci na stránce a mezi jednotlivými stránkami. Je nutné si uvědomit, že nějaké dvou a více sloupcové layouty jsou na malém displayi telefonu naprosto nepoužitelné a je nutné veškerý obsah naskládat nějakým způsobem pod sebe.

Další velice důležitým prvkem návrhu mobilní stránky je, co bude první, co uživatel uvidí jakmile vstoupí na vaší stránku. V Seznamu jsme dlouho řešili, jak vyřešit umístění navigace na stránce, tak aby byla při ruce a zároveň tím neodsunula obsah na stránce. Řešením jsou kotvy. Skoro všechny telefony (snad kromě iPhonu) podporují kotvy, takže pod hlavičku stačí dát jednoduchý odkaz s odkazem na navigaci po webu a celý problém se tím řeší. Menu stránky potom můžeme posunout úplně dolu na stránku a nebude nám odsouvat obsah, který chceme ukázat uživateli. U služeb jako jsou Firmy.cz jsme těchto kotev dali více do řádku a uživatel může hned na začátku stránky přeskakovat kamkoliv po stránce. Pokud má každá část obsahu stránky svojí sekci, je přeskakování z jedné na druhou pomocí kotev rychle a jednoduché. Stránka se přitom nemusí znovu načítat a uživatel tak nemusí platit za další data pro navigaci po webu.

Ještě bych měl určitě zmínit, že se pro menu na stránce někdy používá formulářový prvek select. Je to sice malé a na stránce to zabere pouze dva řádky, ale jednak mi to nepřijde zrovna uživatelsky moc přívětivé a jednak na Motorolách se celý seznam stejně vypíše prostě pod sebe, takže je to ve výsledku jen horší.

Jednou jsem se dokonce setkal s ještě zajímavějším řešením. Bohužel už nevím, kde to bylo, ale navigace po stránce, ale i mezi stránkami byla řešena pomocí menu, které bylo umístěné mimo stránku. To znamená, že vlastní stránka skončila patičkou a po patičce bylo pomocí CSS menu odsazené hodně dolu. Takto skryté menu potom obsahovalo jak navigaci po stránce pomocí kotev, tak navigaci po webu na ostatní stránky. Navigace tak nerozbíjela design stránky, ale načítala se současně s každou stránkou.

Barvičky a obrázky

Tady musím opět vyvrátit další mýty a polopravdy: na mobilním webu je možné používat barvy pro pozadí, barevné ohraničení elementů, barvy písma a různé další vymoženosti. Vše se nastavuje pomocí CSS, takže je možné kráse využít toho, že máte oddělený obsah od vzhledu a šetřit tak drahá data.

Protože mobilní stránka je vlastně jenom dlouhá nudle, doporučuji používat různé barvy pozadí pro různé sekce stránky, nebo pro jejich oddělovače. Stránku nejen zpřehlední, ale také oživí. Stejně tak různé barvy pro nadpisy, různé druhy odkazů atp. Při výběru barev je nutné brát v potaz to, že ne všechny telefony mají věrné barvy. To, co na jednom telefonu vypadá jako zelená, může na jiném vypadat jako žlutá a naopak. Proto doporučuji používat hlavně základní barvy, případně websafe paletu, ale i tam je potřeba si dát na některé odstíny pozor. Aby nedocházelo ke slévání podobných barev, protože mobilní displaye mají poměrně vysoký kontrast, je také potřeba používat dostatečně kontrastní barvy, aby text zůstal čitelný.

Obrázků se nebojte. Pokud jsou uložené v rozumném formátu a rozumně velké, stránka nebude zas tak moc drahá, ale výsledek bude o několik řádů lepší. Zvláště obrázky k odrážkám dělají divy. Ikonka složky na Firmy.cz udělala z nudného seznamu kategorií zajímavou podívanou Tato ikonka se navíc načítá pouze jednou.

Pokud plánujete na mobilním webu používat obrázky, tak je nejprve zmenšete a to ze dvou důvodů. Zaprvé budou datově menší a rychleji se načtou a za druhé se rychleji vykreslí. Při ukládání si dejte pozor, aby jste je uložili do správného formátu, aby jim telefon rozuměl. Ne všechny formáty JPG jsou v mobilních telefonech podporované.

Accesskeys

Accesskeys, stejně jako kotvy, mají pro mobilní web mnohem větší význam, než pro web normální. Je to další jednoduchý způsob, jak zpřehlednít navigaci na dlouhé stránce. Pokud navíc používáte na celé stránce jednotné znaky pro navigaci, je to pro uživatele jen plus.

Formuláře

Pro formuláře platí opět dost podobná pravidla jako na velkém webu. Je tu ovšem několik zásadních rozdílů. Tak jako na webu příliš složité formuláře matou uživatele, tak na u mobilních prohlížečů si ani nebude jistí, jestli ten prohlížeč váš formulář správně pochopí. Takže formuláře by měli být co nejjednodušší a co nejkratší (pokud to je jen trochu možné). Používejte input-fomat. Standartní formulářový vstup jsou písmena i čísla. Pokud má uživatel zadat čísla, tak vstupní pole nastavte jako číselné, aby jste uživateli zjednodušili psaní.

No tak to je asi pro dnešek všechno. O čem napíšu příště ještě nevím, ale určitě to bude něco zajímavého … dlouho sem nepsal o žádném mobilním webu a ještě mi chybí napsat něco o O2 Actice T-zones.