Style guide

Stránka pro testování různých WYSYIGu a prvků definovaných přímo v šabloně /styleguide.tpl.

Mobilní webdesign: 10 tipů pro lepší použitelnost

Při tvorbě webu pro mobilní zařízení je potřeba brát v úvahu, že byste měli zobrazovat jen ten nejnutnější obsah, který však bude zajímavý pro vaše mobilní uživatele. Vyvarujte se velkým obrázkům i flashovým animacím – funkčnost je v tuto chvíli důležitější než vzhled. Zvažujete-li vytvoření webu, který bude optimalizovaný pro mobilní telefony a tablety, nebo vytvoření mobilní verze vašeho aktuálního webu, měli byste dbát na použitelnost a rozvržení prvků tak, aby se uživatelům mobilní web dobře používal.

Pomůžeme vám vytvořit stránky, které budou přístupné nejen na stolních počítačích, ale i mobilních zařízeních. Co tedy zvažovat, na co se zaměřit, co můžete ignorovat a co rozhodně neopomenout?

1. Rozlišení obrazovky

V mobilním světě se vyskytuje nespočet variací a designů telefonů a tabletů s různými velikostmi displejů. Cestou je nalézt řešení, které se bude zobrazovat konzistentně na všech zařízeních. Vývojáři hledají způsoby jak vyhodnotit, které rozlišení displeje je nejpoužívanější a podle toho vytvářejí svoje mobilní aplikace. Při vytváření webu, který se přizpůsobuje všem zařízením, je možnost využít responsive webdesignu. Zde je seznam rozlišení obrazovek na mobilních zařízeních k únoru 2011 zveřejněné uxbooth.com.

2. Rozdělení webových stránek na menší části

Dlouhé texty mohou být pro uživatele nepoužitelné při zobrazení ve sloupcích. Držte se jednoho sloupce textu, který případně obtéká obrázky, ale tak aby nedocházelo k horizontálnímu rolování.

3. Zjednodušený návrh webu

Jednoduchost rovná se použitelnost. Vyhněte se tabulkám, rámům a jiným druhům formátování. Používáte-li odsazení, pamatujte, že minimální vzdálenost je nižší než u běžných stránek. Je potřeba pamatovat, že uživatelé po klinknutí na odkaz v mobilním webu nechtějí příliš dlouho čekat, očekávají dokonce, že se jim mobilní web načte rychleji, než u běžného webu. Musíte tedy počítat s co nejjednodušším variantou, kde bude vyvážen obsah, grafika i navigace.

4. Možnost zobrazení originálu webu

Poskytněte uživatelům odkaz na full verzi vašich webových stránek, kde najdou další obsah a funkcionality.

5. Umístění navigace

Zjistěte si, jaké stránky webu vaši návštěvníci používají nejčastěji. Vytvořte navigační menu mobilního webu právě dle analýz webu pro standardní rozlišení. Vaši uživatelé mobilní verze webu se na stránkách chtějí pohybovat rychle. Není potřeba jim zobrazovat dlouhé obsahy, stačí je jen rychle dovést k obsahu, který hledají.

6. Používání odkazů

Webové stránky mívají různá zpracování odkazů např. v hlavním navigačním menu pomocí java skriptu. Mobilní prohlížeče však tyto druhy odkazů nemají moc rády. Je potřeba si uvědomit, že dynamické prvky stránky a grafické odkazy ovlivňují množství stažených dat.

7. Rozlišení důležitosti odkazu

Uživatelé při pohybu na mobilním webu mohou nabít dojmu jednotnosti odkazů. Zobrazujte uživatelům odkazy dle důležitosti. Odkazy můžete odlišit jak velikostí písma, nebo barvou pozadí tlačítek, případně přidáním grafiky kolem odkazu.

8. Vyvážení odkazů a obsahu

Každá znovu načtená stránka bere čas a stažená data. Při vytváření informační architektury mobilního webu se snažte, aby se uživatel dostal co nejrychleji k požadované informaci. Je tedy potřeba nalézt rovnováhu mezi počtem odkazů na každé stránce a kam vede.

9. Snižování nutnosti zadávat text

Pamatujte, že mobilní telefony nemají možnost přístupu k běžné klávesnici a myši. Nahrazujte pole pro vkládání textu radio buttony a select boxy. Využívejte pro stránky zkrácené URL odkazy pro snadnější zadávání do mobilních prohlížečů.

10. Pop-up okna

Webové mobilní prohlížeče obvykle nepodporují pop-up okna. K zobrazení pop-up okna má prohlížeč omezený prostor. Vyhněte se jejich používání, abyste zabránili nežádoucímu chování.

Co říci závěrem?

Buďte kreativní a nechte si navrhnout mobilní web novým způsobem. Vytvořte dostatečně přesvědčivý a použitelný obsah. Dejte uživatelům, co chtějí a kdy to chtějí. 

Jaký vliv má velikost displeje pro návrh mobilního webu

Web pro více než jen dva displeje

Dnes se navíc nesoustředíme na dvě velikosti – chytré telefony a tablety. Každý z výrobců nabízí telefony i tablety s různými velikostmi displejů a odlišnými operačními systémy. Velikost rozlišení displeje určuje množství detailů, které můžete ve své mobilní verzi mít, nevyjímaje grafiku.  

 

Mobilní aplikace

Je možné vytvořit mobilní aplikaci, která bude nahrazovat webové stánky při prohlížení na chytrých zařízeních. Mobilní aplikace je navíc většinou optimalizovaná pro smartphony a na tabletech nemusí vypadat vždy dobře. Je tedy lepší mít aplikace dvě - pro mobily a tablety. Skript pak na základě velikosti displeje pozná, kterou aplikaci zobrazit. Následná editace mobilní aplikace je v budoucnu náročnější – je potřeba vždy komunikovat s výrobcem aplikace. Řešením je web, který má tzv. responsive webdesign.

Responsive webdesign

Jedny webové stránky se přizpůsobí jakémukoli zařízení a dokážou přeskládat obsah webu tak, aby se pohodlně ovládal a byl pro uživatele snadno použitelný. Navíc zobrazují jen informace, které jsou pro uživatele nejdůležitější. Responsive webdesign mění velikost grafiky, aby se v každém zařízení zobrazila varianta webu, která je pro dané zařízení nejvhodnější. Web vytvořený s responsive webdesignem si navíc můžete upravovat sami v redakčním systému.

Kompatibilita responsive webdesignu s prohlížeči