Päť podmienok mobilného webu
Čítam môj obľúbený CODROPS a je tam teoretický článok o podmienkach mobilného webu. Je ich päť a zrejme by stálo za to ich vymenovať.
Zmysluplná navigácia: iste, aj mobilný web ju má mať. Aj normálny web. Takže už to vieme a nemusíme sa tváriť, že mobilný web je niečo extra. V súvislosti s SNG.sk je dobre pripomenúť, že dobrá navigácia je konzistentná (rovnaké položky menu na každej stránke, ideálne vždy bez prekvapenia).
CODROPS zdôrazňuje, aby navigácia bola na pohľad „klikateľná“. Musíte zvoliť prvky, ktoré už z podstaty hovoria, že sa ich môžem dotknúť. Neustále, neustále myslite (grafici, naši grafici!!!), že použitie trápneho tvaru neponižuje a hlavne, mobilný web nepozná „hover“ efekt, musím iba pohľadom identifikovať aktívne prvky.
Pomleli sme grafikov a teraz ostatné oddelenia. Názvy sekcií v navigácií nedávajte vymýšľať preboha básnikom z PR. Nemajú spievať ani opakovať nejaké hyperdôležité slovo. Majú mať zmysel. Miesto „Napíšte nám MIMOFIXOM!“ (firma vyrábajúca ceruzku MIMOFIX) dajte Kontakt. Namiesto „Chceš MIMOFIX?“ dajte do menu „E-shop“.
Zdôraznený obsah: nie nie, žiadny bold. Keď sa bleskom pozriem na stránku, hneď identifikujem skutočný obsah (ja viem, nutkanie pridať na to miesto banner je obrovské – bojujem s tým aj ja na našom intranete a vždy kývu hlavami, že nenávidím bannery a nemôžu urobiť dobre iba mne, keď ich potrebujú dať zamestnancom). Jednoducho neskrývajte obsah. V mobilnom webe je rozdiel snáď iba v tom, že sa musíte naozaj snažiť, aby ste nejaké tie blbé hlavičky, menu, bannery nenacápali do hornej časti stránky a potom máte obsah kdesi za „ohybom“ (rozumej: k obsahu sa musím narolovať) či sa vďaka požiadavkam mimo obsah. Pri návrhu stránky totiž ako obsah je nejaké Lorem – miesto toho tam dajte ujuchaný životopis vášho generála s jeho fotkou, uvidíte, že sa nikto nepokúsi ho odsunúť mimo.
CODROPS hovorí, že mobilný web nerobíme len tak, že „rušíme“ srdcervúce boxy s reklamami, veľkými boxami. Áno aj ale môžeme ich aj premiestniť, prerobiť. Všetko s cieľom, aby pri prezeraní webu sa po načítaní stránky aj niečo menilo – obvykle sa mení práve ten obsah a to naokolo je rovnaké (iste, v nejakom boxe rotujete fotky ale to nie je ono).
Dáva dobrý tip, aby sa nadpisy v mobilnom webe neodlišovali veľkosťou ale farbou. Ušetrí to miesto.
Feedback: všetky aktívne prvky by mali dať vedieť, že som ho aktivoval. Platí to všeobecne, no na mobilnom webe viac. Zapojte tlačítkam, navigácií všetky použiteľné CSS a Javascript triky. Je nepodstatné, že web či aplikácia potrebuje po stlačení tlačítka „pracovať“ a až potom sa zobrazí výsledok. Dajte mi hneď po aktivovaní vedieť, že stránka aj reaguje. Pamätajte: na mobilnom webe nemám HOVER efekt!!!
CODROPS radí, aby ste použili farbu u aktívnych prvkov, s ktorými práve pracujete (napr. otvoríte rolovaciu ponuku, mali by sa tam meniť farby), keď niečo z ponuky vyberiete ako PRVÁ vec sa musí zmeniť jeho farba až potom ide samotná akcia. Animácie Fade in a Fade out sú vhodným „oznamom“ webstránky, že dotyk „zabral“.
Jasná značka: u normálneho webu to už ako tak chápeme. Pre mobilný web sa snažíme o akési nazoomovanie a tým pádom zmenšenie. Začiatočnícka chyba. Značku do mobilného webu vieme preniesť, len musíme vedieť aké spoznávacie znaky máme pre náš web, našu firmu. Nezostaňte len u loga, to by bolo hlúpe. Často to môže byť nejaký užitočný grafický prvok, farebná kombinácia ale aj obrázky. Stačí fotka vášho známeho výrobku a už viem, kde som.
Dostatok priestoru: napodiv mobilný web neurobíme zlisovaním. Takže aj na ňom je potrebný „prázdny“ priestor. Naďalej sa používa margin a padding (preklad pre kóderov) a „medzery“ (pre grafikov).
CODROPS radí: u tlačítka zmenšite text ale nechajte viacej miesta okolo. Získate nejaký priestor naviac ale prvok bude ergonomický. Používajte padding okolo boxom. Napr. nenatlačte box s textom natesno k okraju stránky (vy síce máte biely iPhone s bielym pozadím, no mne to čierne písmo narazíte na čierny rámik).
Prečo obľúbený CODROPS: príliš nemudrujú o teórií. Sypú na nás (hlavne) jquery ukážky riešení rôznych prvkov a pri každom z nich si poviem, aha, toto je dobré, ukradnem do zásoby alebo sa minimálne pozriem na demo.
Ešte si pridám:
Možnosť návštevníka webu urobiť nejakú aktívnu vec. Počítal by som medzi to tieto možnosti: hneď vidím Kontakt (jedno v akej forme, či odkaz, či telefónne číslo alebo mail), odoslanie stránky do linkovacej služby, sociálnych stránok, mailu. Komentár, nákupné tlačítko. Takto to nejako chápem. Dajte mu teda možnosť niečo s tým, čo vidí urobiť. Nie s hlavnou stránkou vy trúby! S jednotlivými stránkami :-)
