Mobile Web Design 10 tipů pro lepší využití

Očekává se, že mobilní prohlížení webových stránek se změní na další hlavní internetovou platformu. Nyní je snadné procházet síť z téměř kdekoli pomocí mobilních zařízení, která se vejdou do ruky kvůli technologii. Být krátký v dobré implementaci použitelnosti v mobilní web design je obtížné procházet si cestu kolem různých populárních mobilních webových stránek. Projektování pro mobilní zařízení musí být jednodušší než jeho standardní webová stránka a více úkolů, aby bylo možné práci provést, protože uživatelé hledají něco konkrétního a naléhavého.

Měli byste vzít v úvahu, jak používat nejmenší dostupné místo pro váš hlavní obsah a zůstat zajímaví pro mobilní uživatele. Vyhněte se velkým obrázkům a flash animaci, protože zpomalí vaše stránky. Nezapomeňte, že funkce je důležitější než styl pro mobilní webové stránky. Pokud vaše webové stránky nejsou kódovány a design správně, mohlo by to vypadat lépe na jednom telefonu, nejhorší na jiném nebo horším, není zobrazování vůbec. Otestujte, ověřte a zkontrolujte, zda je kompatibilní se všemi mobilními zařízeními.

Chcete-li pomoci při vytváření webových stránek, které jsou přístupné nejen na stolních nebo přenosných počítačích, ale také na mobilních zařízeních, zde jsou některé z věcí, které je třeba zvážit na mobilní web design s ukázkovými obrázky spolu s mobilní verze webové stránky přímý odkaz.

1. Rozhodněte se o rozlišení obrazovky

Mobilní svět obsahuje bohatou variaci designových úvah od různých velikostí obrazovek a rozlišení až po různé tvary. Cílem je dosáhnout rovnováhy mezi dostatečnou šířkou obrazovky a velikostí publika. Zjistěte si specifikace současných mobilních zařízení a použijte svůj nejlepší úsudek. Co je pro mobilní vývojáře náročné, je způsob, jak je přimět k tomu, aby se zobrazoval v různých velikostech obrazovky bez nutnosti znovu vytvářet stránky pro různé platformy..

Zde je seznam webových řešení populární na mobilních zařízeních od února 2011 předložené Uxbooth.com s jejich publikovaným článkem, Úvahy pro mobilní web design (část 2): Dimenze, David Leggett. Autor vysvětluje několik bodů o zobrazení rozměrů a řešení pro návrh rozvržení.

2. Rozdělte webové stránky na malé části

Dlouhé části textu mohou být těžko čitelné, takže jejich umístění na několik stránek omezuje posouvání na jeden směr. Zbavte se obsahu s nízkou prioritou. Držte se jednoho sloupce textu, který zabalí, takže zde není žádné vodorovné posouvání.

Pro níže uvedený příklad ukazuje verze CBS News mobilní webové stránky pouze hlavní zpravodajskou sekci a rozděluje zpravodajské články na malé části. Zatímco Treehugger se prezentuje s jejich nedávnými články a nejnovějšími tweety s některými rysy celého webu. Obě stránky mají uživatel kliknout na textový odkaz pro zobrazení zbytku článku.

CBS News

Objímač stromů

3. Zjednodušte návrh

Jednoduchost odpovídá použitelnosti. Ať se pohybují po stránkách bez problémů. Vyhněte se zahrnutí tabulek, rámců a dalšího formátování. Pokud používáte výplň, nezapomeňte ji udržet na absolutním minimu, který je mnohem menší, než byste použili pro normální webovou stránku. Oproti stolním počítačům, čím více kliknutí na odkazy na mobilních webových stránkách, tím více budete čekat z důvodu doby načítání. Díky tomu musíte své webové stránky odstranit a zjednodušit tak, aby byla zajištěna rovnováha mezi obsahem a navigací.

Pro náš příklad, mobilní verze webových stránek Best Buy uvádí pouze ty nejzákladnější kategorie produktů, které snižují úroveň hierarchie obsahu. Zatímco domovská stránka služby YouTube zobrazuje pouze čtyři nejnovější videa zaměřená na pozornosti.

Nejlepší nákup

Youtube

4. Možnost zobrazení celé webové stránky

Poskytněte svým mobilním návštěvníkům odkaz na přepnutí zpět na plnou webovou stránku, ve které může uživatel najít a zobrazit další obsah a funkce, které jsou dostupné pouze ve verzi pro stolní počítače. Vaši diváci jistě udělají spoustu vertikálního rolování, takže jim pomůžete s odkazy 'Zpět na začátek', aby mohli přeskočit na začátek stránky.

Například Ars Technica má odkaz na standardní webovou stránku umístěnou na záhlaví. Zatímco Shangri-La mají své plné webové stránky odkaz umístěn na zápatí.

Ars Technica

Shangri-La

5. Umístění navigace

Poznejte své publikum a uvědomte si, co hledají. Zjistěte, jak budou chtít vaše stránky navigovat. Umístěte navigační nabídku pod obsah, pokud cílení mobilní uživatelé chtějí rychle měnit obsah. Obsah a titulek musí být viditelný nejprve, aby se nedostal do cesty zobrazení obsahu stránky. Uživatelé, kteří chtějí navigovat v určité kategorii ihned, umístěte navigaci v horní části stránky. Níže jsou uvedeny různé příklady umístění navigace používané v mobilním web designu.

D&G

Politico

denní horoskop

6. Použijte textové odkazy

Vaše hlavní webové stránky mohou zaměstnávat šlehající fly-out menu, rollovers nebo jiné fantazie gadgetry, ale mobilní prohlížeč pravděpodobně nebude. Uvědomte si, že dynamické prvky stránky a grafické odkazy spotřebovávají zdroje, takže se rozhodněte pro dobře označené textové odkazy.

Seznam Apart

Reddite

7. Rozlišujte mezi vybraným odkazem

Posunutím kurzoru dolů přejdete na stránku a zvýrazníte odkazy najednou. Je tedy důležité, abyste jasně informovali uživatele o tom, jaká položka je v centru pozornosti. To lze provést změnou barvy písma a pozadí odkazů a tlačítek nebo jednoduchým přidáním nějakého polstrování kolem odkazů, aby byla plocha, na kterou lze kliknout, větší o 44px o 44px. Geek Squad a Diesel používali velká písma pro text, na který bylo možné kliknout.

Skupina šprtů

Nafta

8. Bilance vazeb

Ke stažení každé stránky dochází ke ztrátě času a systémových prostředků, z čehož je nedostatek, a proto se snažte návštěvníka stránek nenutit, aby prohledával množství stránek, aby získal přístup k požadovaným informacím. Strike rovnováhu mezi počtem odkazů na každé stránce a hloubkou webu.

Flickr

Cvrlikání

9. Omezte zadávání uživatelského textu

Je těžké vkládat text do mobilních verzí webových stránek. Místo toho nahraďte radiovými tlačítky nebo seznamem, aby se mohli snadno rozhodnout, co potřebují. Nezapomeňte, že mobilní uživatelé nemají přístup k běžné klávesnici a myši. Čím kratší je adresa URL, tím lepší je, když zadáváte dlouhé adresy URL.

Pro náš níže uvedený vzorek využil Fedex kontrolní seznam a rozbalovací nabídky. Zatímco Tumblr vás vybral jazyk pomocí rozevírací nabídky.

Fedex

Tumblr

10. Žádný pop nebo občerstvení

Mobilní prohlížeče obvykle nepodporují automaticky otevíraná okna. A kdyby to udělali, měli by velmi úzký prostor na to, aby se mohli dostat. Vyhněte se jejich používání, abyste se vyhnuli nepředvídatelným výsledkům. Také se pravidelně neobnovují stránky, aby se zabránilo zaplnění paměti zařízení. Nechte uživatele aktualizovat obsah.

Ve zkratce

Buďte kreativní a používejte svůj mobilní web novým způsobem. Udělejte svůj obsah dostatečně přesvědčivý a použitelný. Dejte svým uživatelům to, co chtějí, když to chtějí. Uživatelé nechtějí kopat hlouběji na stránky, aby našli v mobilním webu to, co hledají.

Máte nějaké preferované mobilní stránky, které vás opravdu inspirovaly? Můžete sdílet některé z vašich tipů pro mobilní web design? Dej nám vědět!

Další čtení

1. Reagovat Web Design (alistapart.com)
2. Udělej si svůj web Mobile Friendly (thinkvitamin.com)
3. W3C mobileOK Checker (w3.org)
4. Simulátor iPhone