V minulých dvou článcích ( “Jak se vyvíjí trend návštěvnosti z mobilních zařízení?” a “Návštěvnost internetu z tabletů” ) jsme se mohli podívat, kolik našich návštěvníků přistupuje na naše stránky z mobilních zařízení.
V tuto chvíli většina z nás začne řešit otázku, zda se má pustit do vývoje mobilní verze svých stránek a tento článek Vám pomůže zorientovat se v problematice a správně se rozhodnout.
Upravte své stránky pro stolní počítač
Jako první bychom měli dostat své stránky pro stolní počítač do dobré kondice a umožnit jejich prohlížení i uživatelům na přístroji s dotykovým displejem, malým displejem a nebo jinou funkční odlišností.
Obsah přístupný po najetí kurzoru
Jedna z častých chyb – jsou to například hlavní menu stránky. Problém je, že uživatel dotykového displeje kurzorem myši nikam nepřijede a nevyvolá odpovídající událost. Drtivá většina přístrojů s dotykovým displejem převádí tyto události na kliknutí, ale je dobrou praktikou toto používat co nejméně. Koncept by měl být vytvořen v souladu s pravidly přístupnosti.
Špatně navržený HTML kód
Při výrobě stránky je v některých případech jednodušší použít velký, relativně pozicovaný element než vhodně kombinovat pozadí jiných elementů. Takové elementy mohou způsobovat problémy při výpočtu celkové šířky stránky a její přizpůsobení zobrazovací ploše (viewportu). K takovým problémům dochází i při nevalidní implementaci HTML ( neuzavřené elementy, nesprávné zanoření prvků a pod. ). Řešením je použití validního HTML kódu a nepoužívat žádné relativně pozicované elementy, které by byly širší než samotné stránky a zvyšovali jejich šířku.
Náročnost na datový tok
Musíme brát ohled na propustnost datové linky, kterou je přístroj do internetu připojen. V praxi to znamená:
- co nejvíce omezit dotazy na server ( jeden dotaz = vyžádání 1 obsahu – např. obrázku, videa, pozadí a pod. )
- nepoužívat obrázky s velkým rozlišením – jsou příliš veliké
- nepoužívat automatické přehrávání videa – nešvar je že po příchodu na webovou stránku se uživateli automaticky spustí video, uživatel je většinou blokován a jen čeká, až mu to vyčerpá datový limit
Neblokovat zoomování
Použitím HTML5 meta tagů lze ovlivňovat způsob zobrazení Vašich stránek na mobilním přístroji. Je vhodné nastavit zobrazení na mobilním přístroji na celou obrazovku a povolit zoomování.
Závěr
Při dodržení těchto pravidel budete mít jistotu, že uživatel s mobilním telefonem či tabletem si Vaše stránky korektně zobrazí. Silně doporučuji začínat jakoukoliv optimalizaci pro přístroje touto fází. Zajistíte tím přístupnost Vašeho webu s minimálními náklady a téměř hned.
V další fázi je to už na Vás, zda se vydáte cestou redesignu do jednoho z typů responzivního designu, nebo cestou nativní aplikace.
Na co se můžete těšit v dalším článku?
V dalším článcích se dozvíte:
- typy responzivního designu