Jak přizpůsobit web mobilním zařízením

Lidé dnes navštěvují webové stránky z počítačů, tabletů i mobilních telefonů. Pokud se váš web na menší obrazovce špatně zobrazuje, text se obtížně čte nebo nejdou pohodlně používat odkazy a tlačítka, můžete zbytečně přicházet o návštěvníky i potenciální zákazníky.

Dobrou zprávou je, že kvůli tomu nemusíte vytvářet samostatnou mobilní verzi webu. Většina moderních webových editorů nabízí šablony, které se automaticky přizpůsobují různým velikostem obrazovek. Důležité ale je zkontrolovat, jak váš web na mobilu skutečně vypadá a zda se na něm návštěvníci snadno dostanou k potřebným informacím.

1. Vyberte šablonu, která se přizpůsobí mobilům

Základem je responzivní design. To znamená, že se rozložení webu automaticky mění podle velikosti obrazovky. Na počítači mohou být vedle sebe například tři obsahové bloky, zatímco na mobilu se zobrazí pod sebou.

Při výběru šablony si proto neprohlížejte jen její vzhled na velké obrazovce. Ověřte si také mobilní náhled. Zaměřte se na to, zda je obsah přehledný, text dobře čitelný a jednotlivé části stránky mají dostatek prostoru.

Pokud tvoříte web pomocí online editoru, obvykle není potřeba řešit technické nastavení responzivity ručně. Začněte vhodnou šablonou a následně upravte obsah tak, aby dobře fungoval i na menším displeji.

2. Usnadněte čtení textu

Na mobilním telefonu je méně prostoru než na monitoru. Dlouhé odstavce proto mohou působit nepřehledně a návštěvníci se v nich mohou snadno ztratit.

Při úpravě textů se držte několika jednoduchých pravidel:

• Rozdělujte text do kratších odstavců.
• Používejte výstižné nadpisy, které usnadní orientaci.
• Důležité informace umisťujte na dobře viditelná místa.
• Používejte dostatečně velké písmo a dostatečný kontrast mezi textem a pozadím.
• Dlouhé výčty rozdělte do přehledných seznamů.

Nesnažte se na jednu obrazovku za každou cenu vměstnat co nejvíce obsahu. Návštěvník by měl mít možnost pohodlně číst a přirozeně pokračovat směrem dolů po stránce.

3. Zjednodušte navigaci

Na mobilu se návštěvníci potřebují rychle dostat k tomu, co hledají. Navigační menu proto musí být jednoduché a snadno ovladatelné.

Zkontrolujte především, zda:

• jsou názvy položek menu srozumitelné,
• menu nezabírá zbytečně mnoho místa,
• lze jednotlivé položky snadno otevřít prstem,
• se návštěvník může jednoduše vrátit na úvodní stránku nebo přejít do jiné důležité části webu.

Pokud máte rozsáhlý web, nemusí být vhodné zobrazovat v hlavním menu úplně všechny stránky. Vyberte nejdůležitější položky a další obsah uspořádejte do přehledných podstránek.

4. Přizpůsobte obrázky a další vizuální prvky

Velké fotografie mohou na mobilu zabírat téměř celou obrazovku. To samo o sobě nemusí být problém, pokud mají jasný účel a nenarušují orientaci na stránce.

Dbejte na to, aby se obrázky přizpůsobily šířce displeje, nebyly oříznuté na nevhodných místech a zůstaly srozumitelné i na menší obrazovce. Zvláštní pozornost věnujte fotografiím produktů, ukázkám práce, logům a obrázkům s vloženým textem.

Používejte také přiměřeně velké soubory. Zbytečně velké fotografie mohou zpomalovat načítání webu, zejména při pomalejším připojení. Obrázky proto před nahráním optimalizujte a nepoužívejte větší rozlišení, než skutečně potřebujete.

5. Udělejte tlačítka a odkazy snadno ovladatelné

Na počítači lze přesně ukázat kurzorem na malý odkaz. Na mobilu návštěvník ovládá stránku prstem, a proto potřebuje dostatek prostoru pro pohodlné klepnutí.

Důležitá tlačítka by měla být dostatečně velká, dobře viditelná a oddělená od ostatních odkazů. Vyhněte se situaci, kdy jsou dvě tlačítka těsně vedle sebe a návštěvník může omylem vybrat jiné.

Zvažte také, které akce jsou pro vaše návštěvníky nejdůležitější. Firemní web může potřebovat výrazné tlačítko pro kontakt nebo objednání služby. Restaurace může dát do popředí jídelní lístek a rezervaci. U portfolia může být nejdůležitější prohlížení ukázek práce.

Cílem není přidat na stránku co nejvíce tlačítek, ale usnadnit návštěvníkům další krok.

6. Usnadněte kontakt se zákazníky

U firemních webů je důležité, aby se návštěvník mohl snadno spojit s provozovatelem i z mobilního telefonu.

Telefonní číslo, e-mail nebo kontaktní formulář by neměly být schované hluboko na webu. Pokud zákazníci často telefonují, může být užitečné umístit telefonní kontakt na dobře viditelné místo a umožnit jeho přímé otevření klepnutím.

U kontaktních formulářů zkontrolujte, zda se jednotlivá pole pohodlně vyplňují, popisky jsou čitelné a tlačítko pro odeslání je snadno dostupné. Na mobilu může být zbytečně komplikovaný formulář důvodem, proč návštěvník kontakt nedokončí.

Přemýšlejte nad tím, co lidé na vašem webu pravděpodobně chtějí udělat, a snažte se jim tuto činnost co nejvíce usnadnit.

7. Myslete na rychlé načítání

Mobilní návštěvníci nemusí mít vždy rychlé a stabilní připojení. Web by proto měl být přehledný a měl by se načítat bez zbytečných prodlev.

Kromě optimalizace obrázků se vyplatí omezit zbytečně velké animace, videa spouštěná automaticky a další prvky, které návštěvníkům nepřinášejí dostatečnou hodnotu. Nepřidávejte na stránku efekty jen proto, že jsou v editoru dostupné.

Rychlost webu závisí také na použité platformě, šabloně a dalších technických faktorech, které nemusíte mít plně pod kontrolou. I tak ale můžete ovlivnit množství a velikost nahrávaného obsahu a zvolit rozumně jednoduchý design.

8. Otestujte web na skutečném telefonu

Mobilní náhled v editoru je užitečný, ale neměl by být jedinou kontrolou. Po publikování web otevřete také na vlastním telefonu, případně požádejte někoho dalšího, aby ho vyzkoušel na jiném zařízení.

Projděte si hlavní stránky a ověřte, že:

• se text dobře čte bez nutnosti zvětšování,
• se obsah vejde na šířku obrazovky a není nutné posouvat stránku do stran,
• menu a odkazy fungují,
• obrázky se zobrazují správně,
• kontaktní údaje a formuláře jsou použitelné,
• důležitá tlačítka vedou tam, kam mají,
• se stránky načítají přiměřeně rychle.

Nezapomeňte otestovat také stránky, na kterých chcete získávat poptávky, objednávky nebo jiné důležité akce. Právě tam může mít pohodlné ovládání největší význam.

9. Nepřipravujte mobilní verzi na úkor důležitého obsahu

Na menší obrazovce je vhodné některé části stránky uspořádat jinak, ne však automaticky odstranit všechny informace, které se nevejdou hned na první pohled.

Návštěvníci mobilního webu mohou potřebovat stejné informace jako lidé u počítače — například ceny, popis služeb, otevírací dobu, podmínky nebo kontakty. Dbejte na to, aby důležitý obsah zůstal dostupný a snadno dohledatelný.

Pokud je stránka příliš dlouhá nebo nepřehledná, zkuste nejprve upravit její strukturu, zkrátit opakující se texty a lépe uspořádat jednotlivé sekce. Není nutné skrývat užitečné informace jen proto, že návštěvník používá mobil.

Jak vytvořit mobilní web bez programování?

Pokud si chcete vytvořit vlastní web bez znalosti programování, můžete využít online webový editor s responzivními šablonami. Vyberete si vzhled, doplníte vlastní texty a obrázky a následně zkontrolujete, jak se stránky zobrazují na různých zařízeních.

Jednou z možností je Webnode, který umožňuje sestavit web pomocí vizuálního editoru. Při výběru služby se ale vždy ujistěte, že vám vyhovuje její ovládání, dostupné funkce a možnosti úprav pro váš konkrétní projekt.

Ať už zvolíte jakoukoli platformu, nejdůležitější je výsledek: návštěvník by měl na vašem webu rychle najít potřebné informace, snadno se v něm orientovat a pohodlně provést požadovanou akci.

Shrnutí

Přizpůsobení webu mobilním zařízením nemusí být složité. Začněte vhodnou responzivní šablonou, připravte přehledný obsah, zjednodušte navigaci a zkontrolujte obrázky, tlačítka i kontaktní údaje. Potom web vyzkoušejte na skutečném telefonu.

Nemusíte usilovat o dokonalý vzhled na každém jednotlivém zařízení hned od začátku. Důležité je, aby se web dobře četl, snadno ovládal a návštěvníkům pomáhal dosáhnout toho, kvůli čemu na něj přišli.

Vytvořte si web podle svých představ a usnadněte návštěvníkům jeho používání na počítači i mobilním telefonu.

⭐ Populární témata ⭐

Chcete, aby se váš web dobře používal na mobilu i počítači? Prohlédněte si naše průvodce tvorbou webu, výběrem šablony a zlepšením jeho vzhledu i rychlosti.