10 RAD PRO LEPŠÍ MOBILNÍ WEB DESIGN

Webdesigning / 15. august 2014 / Business

Inter­na­ti­onal Tele­coms Union před­po­vídá, že v průběhu něko­lika měsíců bude na světě pou­ží­va­ných více mobil­ních tele­fonů než je počet oby­va­tel. Smartp­hony jsou všude kolem nás a není možné tuto sku­teč­nost zasta­vit. To, zda byz­nys v těchto časech vydrží mezi vel­kou kon­ku­rencí záleží od mnoho fak­torů a jed­ním z nich je určitě i mobilní sféra. 

Tuto sku­teč­nost si uvědo­muje i mnoho “kli­entů” a mobilní stránky o to žádají. Nejedná se jen o mobilní stránky ale i apli­kace a jiné mož­nosti.

Design pro mobilní zaří­zení zna­mená pře­mýš­lení nad růz­no­ro­dými mobil­ními zaří­ze­ními od tab­letů, které jsou často schopny pro­chá­zet celou stránku, přes smartp­hony s ome­ze­ným pros­to­rem pro obsah. Stále více vzpo­míná se res­pon­zívny design, či mobilní design nebo “mobile-friendly” stránky. Proto bychom rádi před­sta­vili 10 základ­ních rad pro tvorbu mobil­ního web designu.

1. Poznej své pub­li­kum a zaří­zení které pou­žívá
Stále bohu­žel není možné dělat doko­nalé web stránky pro všechny mobilní zaří­zení najed­nou. Proto je ide­ál­nější se sous­tře­dit na to nej­pou­ží­va­nější, udělat web stránky “doko­nalé” pro něj, ale nechat kva­litní roz­hraní i pro ostatní zaří­zení.

Proto poznání zda pou­ží­vají vaši návš­těv­níci např. iPhone nebo Android hraje v tomto význam­nou roli. Pro zjiš­tění můžete využít průz­kum, Google ana­ly­tics či jiné ana­lýzy. Další pod­statná věc, která se dost spo­juje se zaří­ze­ním je rych­lost při­po­jení. V našich zeměpis­ných šířkách je stále mobilní inter­net pod­statně ome­zen, proto je nutné mys­let i nato.

2. Buďte stručný
Ať už se jedná o frázi KISS (Keep it sim­ple, stu­pid) na mobil­ních zaří­ze­ních je esen­ciální vědět účel stránky, designu nebo apli­kace. Pak je na vás dostat uži­va­tele co nej­rych­leji z bodu A do bodu B bez zby­teč­ných zdr­žo­vání. Pokud je možné vyne­chat něja­kou část stránky, tak ji vynechte. V designu pro mobilní zaří­zení není místo pro zby­teč­nosti. Je esen­ciální být stručný, výstižný a bez zby­teč­ností.

3. Jedno-sloup­cový lay­out je fajn
S tím, že mys­líte na již napsáno je jeden slou­pec posta­ču­jící k pře­dání potřeb­ných infor­mací. Nejen že fun­guje fajn ale je fajn pro menší disp­leje s limi­to­va­ným pros­to­rem. Zde se určitě osvědčí res­pon­zívny design, kde můžete změnit více sloup­cový design na jedno-sloup­cový.

4. Ikony šetří nejen místo
O ham­bur­ger ikoně pro menu se poslední dobou píše hodně nega­tiv. Ale využití ikony pro hle­dání, sociální ikony, klik­nu­tím zavo­lat a podobné prvky je určitě vhodné. Jeli­kož byly před­sta­veny i SVG ikony, není prob­lém s opti­ma­li­zací i pro větší disp­leje. Využi­tím ikon uše­tříte místo a často i počet kliků, které musí uži­va­tel udělat, aby se dostal do “cíle”.

5. Mys­lete prs­tem.
8 x 8 mm je průměrná doty­ková plo­cha palce a 7​x 7 mm je plo­cha uka­zo­váčku. To zna­mená, že plo­cha jed­noho tla­čítka by neměla být menší než 1 cm / 28 px a podle něk­te­rých výzkumů až 44 pixelů.

Mys­lete nato, že nikdo nechce držet tele­fon ve dvou rukách, proto se zaměřte nato aby byla vaše stránka plně ovla­da­telná jed­ním pal­cem a nevy­ža­do­vala žádné jiné prsty navíc. Pokud není možné vaši stránku takto pro­jít celou, asi nebude dobře zop­ti­ma­li­zo­vání pro tele­fony.

Buďte si jistý, že menu, tla­čítka a všechny call to action prvky jsou dost velké i pro tučné prsty a mají dosta­tek pros­toru od sebe. Nikdo nechce klik­nout na nesprávné tla­čítka a pak se muset vra­cet.

6. Kon­taktní infor­mace mějte vidi­telně
Vždy je třeba mít kon­taktní infor­mace vidi­telné a po ruce. Uži­va­telé často hle­dají, kon­takt, adresu či ote­ví­rací hodiny. Nenechte je hle­dat tyto infor­mace po celé stránce a poskyt­něte jejich tak rychle jak je možné pro lepší UX.

7. Označ­kujte stránku pořádně.
Bran­ding z mobilní stránky musí sršet. Samo­zřej­mostí je logo ale i barvy a styly, které dělají značku roz­poz­na­tel­nou. Kor­po­rátní iden­titu je třeba zapo­jit důmy­slně bez naru­šení pou­ži­tel­nosti.

8. Mys­lete i na baterku.
Možná to bude znít směšně ale kva­litně opti­ma­li­zo­vána stránka šetří smartp­hone i baterku. Čím více musí smartp­hony sta­ho­vat různé ani­mace, nástroje, geo-loca­li­zá­ciu a jiné, rychle vyčer­pá­vají baterku. Proto se snažte vyčis­tit vaše stránky od nepo­třeb­ných hlou­postí a uše­třit tím uži­va­te­lům čas nato, aby ho mohli strá­vit možná i na vašich strán­kách.

9. Rych­lost na prv­ním místě.
Opti­ma­li­zace obrázků, počtu requ­estu je nez­bytné. Jak jsme vzpo­mí­nali ne všude je pokrytí 3G dobré, ne to 4G. Pokud chcete aby se vaše stránka načí­tala letos, opti­ma­li­zujte. Odpojte se z kabelu, jděte ven a uvi­díte, že inter­net pak není až takový rychlí jako v “labo­la­tór­nych” pod­mín­kách.

10. Tes­tujte na zaří­zení, ne v gene­rá­to­rech a jiných nástro­jích
Když už víte pro jaké zaří­zení opti­ma­li­zu­jete web, tak ho i pou­ží­vejte v první řadě. Ale mys­lete i na ostatní zaří­zení a určitě i na různé verze ope­rač­ních sys­témů.

Někdy pro tes­to­vání stačí zajít do nejb­liž­šího elek­tra a pop­ro­sit je o pomoc. Osobně s tím mám dobré zku­še­nosti. Pokud by to nebylo možné, zkuste si půj­čit smartp­hone od kolegy či kolegů. Mys­lím, že nasbí­ráte kva­litní inven­tář na pro­bě­hnutí vašich strá­nek.

Zdroj: webdesigning.sk

Pridať komentár (0)