Přes 60 procent veškerého webového provozu dnes pochází z mobilních zařízení. Web, který není vhodný pro mobily, selhává u většiny lidí, kteří ho navštíví, a není to žádný okrajový případ. Zvládnout mobily není bonusová funkce. Je to základ, který se od firemního webu očekává.
Udělat web vhodný pro mobily znamená poskytnout mobilním návštěvníkům stejně kvalitní zážitek jako návštěvníkům na počítači. Ne okleštěnou verzi, která se technicky načte, ale web, na kterém je text čitelný, navigace funguje, obrázky se zobrazují správně a formuláře lze z telefonu opravdu odeslat bez frustrace.
Tento článek vás provede praktickými změnami, díky kterým je web skutečně vhodný pro mobily, od navigace a textu přes obrázky a formuláře až po rychlost.
Co v praxi znamená vhodný pro mobily?
Web vhodný pro mobily je takový, na kterém každá funkce na telefonu správně funguje bez nutnosti obcházek. Text je čitelný při výchozím přiblížení. Navigace se čistě otevírá a zavírá. Tlačítka jsou dost velká, aby se na ně dalo klepnout, aniž byste trefili jiný prvek. Obrázky se načítají a zobrazují správně. Formuláře lze vyplnit a odeslat bez frustrace.
Rozdíl mezi technicky kompatibilním s mobily a skutečně vhodným pro mobily je důležitý. Web je technicky kompatibilní, pokud se na telefonu nerozbije. Je skutečně vhodný, pokud se na telefonu používá stejně přirozeně jako na počítači. Rozdíl je v detailech. Odsazení, velikost písma, velikost cílů pro klepnutí a doba načítání rozhodují o tom, zda zážitek působí správně, nebo je sotva funkční.
Základem webu vhodného pro mobily je responzivní design, který rozvržení automaticky přizpůsobuje různým velikostem obrazovky. Článek o tom, co je responzivní design, vysvětluje, jak to funguje po technické stránce.
Jak otestovat, zda je váš web vhodný pro mobily?
Nejspolehlivějším testem je projít vlastní web na skutečném telefonu. Ne v mobilním náhledu prohlížeče. Ne v okně počítače zmenšeném do úzkého sloupce. Na skutečném telefonu, vlastními palci, tak, jak by ho používal návštěvník.
Projděte každou stránku. Otevřete navigaci a ověřte, že je dostupný každý odkaz. Přečtěte si text a potvrďte, že je čitelný bez přibližování. Klepněte na každé tlačítko a ověřte, že správně reaguje. Vyplňte všechny formuláře a odešlete je. Zkontrolujte, že se obrázky načítají a zobrazují správně. Zkontrolujte, že nic nevyžaduje posouvání do stran.
Vyhledávače také nabízejí bezplatné nástroje pro testování mobilních stránek. Zadáte adresu URL a nástroj upozorní na konkrétní problémy, například příliš malý text, klikatelné prvky příliš blízko u sebe nebo obsah širší než obrazovka. Širší návod, co zkontrolovat před spuštěním webu, najdete v článku co vědět před spuštěním webu, který zahrnuje testování na mobilu jako součást celého postupu před spuštěním.
Jak zajistit, aby navigace fungovala na mobilu?
Navigace je místo, kde se mobilní zážitek nejčastěji kazí. Vodorovné menu přes celou šířku monitoru nemá na obrazovce telefonu kam jít. Standardním řešením je sbalitelné menu spouštěné tlačítkem, obvykle v rohu nahoře.
Tlačítko menu musí být okamžitě rozpoznatelné. Ikona se třemi čarami se stala široce srozumitelnou konvencí pro sbalená navigační menu. Když se menu otevře, mělo by zabrat dost místa na obrazovce, aby se snadno četlo a v něm klepalo. Položky potřebují dost svislého odstupu, aby prst mohl klepnout na jednu, aniž by trefil tu nad ní nebo pod ní.
Mobilní menu držte krátké. Pokud má vaše navigace pro počítač mnoho položek, zvažte, které z nich mobilní návštěvníci nejspíš potřebují a zda lze vedlejší položky seskupit nebo odstranit z nejvyšší úrovně. Čistší mobilní menu se snáze používá. Článek o tom, co je navigace webu, se věnuje struktuře navigace a použitelnosti na všech zařízeních.
Jak by měl vypadat text a písma na mobilu?
Text, který se na počítači snadno čte, může být na telefonu nepříjemně malý, pokud je velikost písma nastavena příliš nízko. Minimální velikost písma běžného textu 16 pixelů je široce používaný standard pro čitelnost na mobilu. Pod touto hranicí je třeba text přibližovat, což většina návštěvníků neudělá.
Záleží i na délce řádku. Na počítači může řádek textu zabírat 600 až 700 pixelů. Na mobilu se stejný text zalomí do mnohem kratších řádků. Pokud je řádkování příliš těsné nebo jsou odstavce příliš dlouhé, čtení na malé obrazovce je nepohodlné. Krátké odstavce, štědré řádkování a zřetelné předěly mezi sekcemi čitelnost zlepšují.
Nadpisy by se měly proporčně zmenšovat. Nadpis H1 o velikosti 48 pixelů na počítači může být na mobilu vhodný při 28 až 32 pixelech. Pokud nadpisy zůstanou na telefonu ve velikosti pro počítač, ovládnou obrazovku a vytlačí skutečný obsah pod okraj viditelné části.
Jak zacházet s obrázky na mobilu?
Obrázky jsou jedním z největších rizik pro výkon na mobilu. Obrázek v plném rozlišení určený pro monitor o šířce 1440 pixelů je při zobrazení na obrazovce telefonu o šířce 375 pixelů mnohem větší, než je nutné. Servírování takového obrázku mobilním návštěvníkům plýtvá přenosem dat a stránku výrazně zpomaluje.
Řešením je servírovat různým zařízením obrázky vhodné velikosti. Většina moderních tvůrců webů to řeší automaticky tím, že vytvoří několik velikostí a podle obrazovky nabídne tu správnou. Pokud obrázky spravujete ručně, zmenšete je na největší velikost, v jaké se zobrazí, ne na největší velikost, jakou váš fotoaparát dokáže vytvořit.
Všímejte si, jak se obrázky na mobilu ořezávají. Široký obrázek na šířku, který na počítači působí vyváženě, se může na vysoké mobilní obrazovce ořezat nešťastně. Hlavní obrázky a bannery jsou nejčastějším místem, kde se ořez na počítači a na mobilu výrazně liší. Článek o tom, co je rychlost webu, vysvětluje, jak optimalizace obrázků ovlivňuje celkový výkon stránky.
Díky čemu fungují formuláře dobře na mobilu?
Formuláře jsou na mobilu místem s vysokým třením. Vyplňování polí malou dotykovou klávesnicí je náročnější než psaní na plné klávesnici. Čím méně polí uvedete, tím lépe. Každé další pole je příležitostí k frustraci a důvodem k opuštění.
Záleží na velikosti vstupních polí. Pole musí být dost velká, aby se do nich dalo přesně klepnout, a dost široká, aby byl text uvnitř čitelný. Popisky by se měly zobrazovat nad každým polem, ne jen jako zástupný text uvnitř, protože zástupný text zmizí v okamžiku, kdy někdo začne psát.
Nastavte správně typy vstupů. Pole pro e-mail by mělo vyvolat e-mailovou klávesnici. Pole pro telefonní číslo by mělo vyvolat číselnou klávesnici. Pole pro datum by mělo otevřít výběr data. Jsou to drobná technická nastavení, která zážitek citelně zpříjemní.
Každý formulář otestujte na telefonu tak, že ho kompletně vyplníte a odešlete. Ověřte, že se odeslání podaří a že se správně zobrazí případná potvrzovací zpráva. Kontaktní formulář, který se na počítači odešle úspěšně, ale na mobilu selže, bez vašeho vědomí tiše ztrácí zájemce.
Jak vhodnost pro mobily ovlivňuje pozice ve vyhledávání?
Vyhledávače indexují nejdřív mobilní verzi vašeho webu. To znamená, že mobilní zážitek není důležitý jen pro mobilní návštěvníky. Je to verze, která rozhoduje o tom, jak je váš web chápán a řazen na všech zařízeních.
Web, který na mobilu funguje špatně, ať kvůli pomalému načítání, rozbitému rozvržení nebo nečitelnému textu, se umístí pod srovnatelnými weby, které mobily zvládají dobře. Návštěvníci, kteří přijdou na mobilní web a hned odejdou, protože nefunguje, jasně signalizují, že jim stránka nesplnila potřeby. Vysoká míra opuštění u mobilních návštěvníků časem ovlivňuje pozice.
Rychlost stránky na mobilu je konkrétní faktor. Stránka, která se na rychlém širokopásmovém připojení načte za dvě vteřiny, může na běžném mobilním připojení trvat šest vteřin i déle. K rychlejšímu načítání na mobilu přispívají optimalizované obrázky, minimum blokujících skriptů a čistá struktura šablony. Úplný obrázek o tom, jak funguje optimalizace pro vyhledávače, podává článek co je SEO, včetně technických faktorů.
Jak mobily řeší WEMASY
Tvůrce webů WEMASY používá responzivní šablony, které se automaticky přizpůsobují počítači, tabletu i mobilu. Vizuální editor obsahuje mobilní náhled, takže při tvorbě vidíte, jak každá sekce vypadá na malé obrazovce. Optimalizaci obrázků a výkon na mobilu zajišťuje platforma, není potřeba nic nastavovat ručně.
Co je zahrnuto, zjistíte na stránce tvůrce webů WEMASY, a balíčky najdete na stránce s ceníkem.
Často kladené otázky
Jak poznám, že je můj web vhodný pro mobily?
Projděte svůj web na skutečném telefonu. Otestujte každou stránku, každou položku navigace, každý formulář a každé tlačítko. Vyhledávače také nabízejí bezplatné nástroje pro testování mobilních stránek, kam zadáte adresu URL a ony upozorní na konkrétní problémy. Kombinace ručního průchodu a kontroly nástrojem odhalí problémy, na kterých nejvíc záleží. Mobilní náhledy v prohlížeči jsou užitečné při vývoji, ale zážitek na skutečném zařízení plně nenahradí. S tvůrcem webů WEMASY si to můžete nastavit přímo na svém webu.
Dá se stávající web udělat vhodným pro mobily bez přestavby?
Záleží na tom, jak byl web vytvořen. U webů vytvořených v moderních tvůrcích webů lze často zlepšit mobilní zážitek úpravou nastavení šablony, zmenšením obrázků nebo přechodem na lepší šablonu. Weby postavené na zakázkovém kódu nebo na starších platformách mohou vyžadovat rozsáhlejší práci. V některých případech je přestavba na aktuální platformě rychlejší a přinese lepší výsledek než snaha dostat starší web do formy záplatami.
Umístí se web vhodný pro mobily výš ve výsledcích vyhledávání?
Vyhledávače používají mobilní verzi vašeho webu jako primární verzi pro indexaci a řazení. Web, který dobře funguje na mobilu a rychle se na telefonu načítá, si obecně vede lépe než web vytvořený hlavně pro počítač. Kromě přínosu pro pozice udrží web vhodný pro mobily návštěvníky déle, snižuje míru opuštění a lépe konvertuje. Tyto signály chování ovlivňují i dlouhodobý výkon ve vyhledávání.
Jaká je minimální velikost písma pro mobilní web?
Velikost písma běžného textu 16 pixelů je široce doporučované minimum pro čitelnost na mobilu. Pod touto hranicí je text bez přibližování špatně čitelný. Nadpisy by se měly zmenšovat proporčně, aby nepřebily obrazovku. Řádkování alespoň 1,5násobek velikosti písma zlepšuje čitelnost na malých obrazovkách, zejména u delších odstavců.
Jak velká by měla být tlačítka na mobilním webu?
Pro mobilní tlačítka se široce doporučuje minimální velikost cíle pro klepnutí 44 na 44 pixelů. Prst tak dostane jasný cíl a snižuje se riziko náhodného klepnutí na sousední prvky. Mezi tlačítky by také mělo být dost místa, aby se klepnutí na jedno nezaregistrovalo jako klepnutí na něco poblíž. Tlačítka výzvy k akci by měla být velká, vizuálně výrazná a snadno dosažitelná palcem, aniž byste museli telefon přehmatávat.