Jak udělat nejlepší mobilní web

Ke článku mě inspiroval článek Masterful Mobile Web od Google. Jak udělat web použitelný na mobilu ? Mobil s internetem používá přes 70% lidí, dnes je běžné, že se dá přes mobil nakoupit zboží v eshopu, zaplatit peníze v bance.

Vlastní vyhledávání na webu

Mobilní web by měl mít vlastní vyhledávání, které rychle nasměruje návštěvníka na nejvhodnější stránku např. detail produktu nebo služby.

Např. návštěvník hledá boty značky Nike, tak nebude chtít proklikávat podkategorie, ale rovnou by měl být nasměrován na detail případně výpis všeho s označením Nike.

Jasné a čisté detaily produktu

Mobilní web by měl mít čistě a jasně udělané detaily produktů či služeb, samozřejmě podle oboru, zaměření. Na detailu by měli být jasné další kroky nebo výzvy k akci.

Tlačítka odeslat, vložit, přejít apod. se hodí obarvit např. červeně, aby upoutali pozornost.

Snadno vyplnitelné formuláře

Registrační formuláře apod. by měli být jednoduché a bezpečné pro uživatele.

Doporučuju dělat validaci ještě před odesláním formuláře nejlépe ihned po vyplnění pole zobrazit nalezené chyby. Tohle umí všechny JS frameworky nebo to pořešit aspoň pomocí jQuery a označit zelenou barvou OK a červenou barvou CHYBA.

Responzivní design

Mobilní web by měl mít stránky rozložené pro mobily s čistým záhlavím, s označenými ikonkami a s relevantním obsahem. Jasně by mělo být vidět logo nebo název webu. Já používám např. grid systém Bootstrap 4, který umí rozložit obsah podle displeje, rozlišuje verze xl (extra velký displej), lg (velký displej např. monitor pc), md (tablet nebo malý notebook), sm (tablet nebo větší mobil), xs (malý mobil).

Rychlost webu

Mobilní web by se měl načítat dostatečně rychle, aby nenarušil celkový dojem. Optimalizace webu se dá pohlídat např. nástrojem Page Speed Tools od Google.

Page Speed Insights nabídne příležitosti k optimalizaci, např. eliminovat zdroje blokující vykreslení tj. JavaScript dávat až před značku </body>, aby nebrzdil načtení.

Add Comment

Required fields are marked *. Your email address will not be published.


osm × = 24