5 nejčastějších chyb v responzivním designu, které odrazují návštěvníky (+ jak je opravit)

Vaše webové stránky mohou na počítači vypadat skvěle. Přes 60 % návštěvníků ale přichází z mobilů a velká část z nich web během několika sekund opustí, pokud se špatně ovládá.

Problém není v návštěvnících, ale ve webu.

Responzivní design už dávno není nadstandard, ale základ. Přesto se stále opakují stejné chyby, které dělají mobilní web nepoužitelným. Projděme si pět nejčastějších a ukažme si, jak je napravit.

1. Příliš malá tlačítka

Snažíte se na mobilu klepnout na tlačítko „Koupit“ a místo toho omylem zavřete celý košík. Nebo se nemůžete trefit do odkazu v menu, přestože máte běžně velké prsty.

Problém je v tom, že lidské prsty nejsou stylus. Průměrný prst dospělého člověka má tloušťku kolem jednoho centimetru. Malá tlačítka proto nutí uživatele přesně mířit, což je zbytečně frustruje.

Jak to opravit:

• Minimální velikost dotykových prvků by měla být 44 × 44 pixelů (někteří doporučují až 48 × 48 px pro pohodlnější ovládání)
• Kolem každého tlačítka nechte alespoň 8 až 10 pixelů volného prostoru, aby se uživatelé netrefovali do sousedního prvku
• Tlačítko nemusí vypadat velké, důležitá je jeho aktivní plocha, která zachytí klepnutí

Praktický tip: Otestujte svůj web sami na mobilu. Zkuste klepnout na všechna důležitá tlačítka palcem jedné ruky. Pokud se musíte soustředit, abyste se trefili přesně, je něco špatně.

2. Tabulky, které se nevejdou na displej

Tabulka s cenami, srovnáním produktů nebo harmonogramem může na počítači vypadat přehledně. Na mobilu se ale často nedá přečíst bez neustálého posouvání do stran.

Tabulky jsou ze své podstaty široké. Když je vměstnáte do úzkého displeje mobilu, stanou se nepoužitelnými. Uživatel buď vidí jen část informací, nebo musí obsah neustále posouvat do stran.

Jak to opravit:

Řešení 1 - vodorovné posouvání (pro jednodušší tabulky)

.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

Zabalte tabulku do kontejneru, který umožní posouvání do stran. Dejte uživateli najevo, že tabulku může posunout, například mírným oříznutím pravého okraje.

Řešení 2 - změna struktury (pro složitější tabulky)

Na mobilu změňte tabulku na seznam - řádky se zobrazí pod sebou jako „karty“ s popisky. To funguje skvěle pro srovnávací tabulky nebo ceníky.

Řešení 3 - skrytí méně důležitých sloupců

Nechte na mobilu jen ty nejdůležitější sloupce a zbytek dejte do rozbalovacího menu nebo úplně skryjte.

3. Text, který je třeba číst s lupou

Text o velikosti 10 bodů na obrazovce široké 6 cm se čte velmi obtížně. Přesně s tím se potýkají návštěvníci webů s příliš malým písmem.

Malý text nutí lidi stránku přibližovat a oddalovat. To je nepohodlné a mnoho uživatelů raději odejde jinam. Špatná čitelnost navíc znamená, že se k nim váš obsah vůbec nedostane.

Jak to opravit:

• Minimální velikost písma: 16 px pro běžný text (některé zdroje doporučují i 18 px)
• Výška řádku: nastavte line-height alespoň na 1,5, aby se řádky nepřekrývaly
• Kontrast: tmavý text na světlém pozadí nebo naopak, ne šedý text na šedém pozadí
• Šířka sloupce textu: na mobilu by měl text zabírat zhruba 50 až 75 znaků na řádek, ne víc

Bonusový tip: Vyvarujte se textu, který obtéká obrázky na mobilu - vznikají z toho úzké „nudle“ textu o pár slovech na řádek, které se prakticky nedají číst.

4. Příliš skryté menu

Hamburger menu, tedy ikona tří čárek v rohu, se používá téměř všude. Řada uživatelů nad 45 let ale neví, co znamená. I pro ostatní platí, že skryté položky snadno přehlédnou.

Studie ukazují, že skrytá navigace snižuje zapojení uživatelů téměř o polovinu. Lidé méně používají prvky, které nevidí. Hamburger menu navíc vyžaduje dvě klepnutí místo jednoho: první na otevření menu, druhé na výběr položky.

Jak to opravit:

Varianta 1 - hybridní přístup

Nechte hamburger menu, ale dejte tam vedle něj popisek „Menu“ nebo „Navigace“. Starší uživatelé ocení tuto nápovědu.

Varianta 2 - spodní navigační lišta

Místo hamburger menu použijte spodní navigační lištu s ikonami. Je intuitivnější a v dosahu palce, takže se dobře ovládá jednou rukou.

Varianta 3 - určete priority

Na úvodní stránce nechte viditelné nejdůležitější odkazy (Kontakt, Produkty, O nás) a méně důležité dejte do hamburgerového menu.

Na počítači zobrazte celé menu. Hamburgerové menu šetří místo na mobilu, ale na širokých obrazovkách obvykle není potřeba.

5. Pomalé načítání

Většina lidí dá webu přibližně tři sekundy. Pokud se do té doby nenačte, odejdou.

Mobilní internet není vždy rychlý. Někdo jede vlakem tunelem, jiný má levný tarif s pomalými daty. Web s obrázky z fotoaparátu v plném rozlišení o velikosti 5 MB se v takových podmínkách načítá příliš dlouho.

Optimalizace obrázků (tohle je nejdůležitější)

• Formát WebP: moderní formát, který je o 25 až 35 % menší než JPEG při stejné kvalitě. Podporují ho všechny dnešní prohlížeče
• Správná velikost: obrázek pro náhled v článku nepotřebuje rozlišení 4 000 × 3 000 px. Stačí 800 × 600 px
• Komprese: použijte nástroje jako TinyPNG nebo Squoosh, které zmenší velikost bez viditelné ztráty kvality
• Odložené načítání (lazy loading): obrázky, které nejsou vidět na obrazovce, se načtou, až když se k nim uživatel posune

Další optimalizace

• Kvalitní hosting: levný hosting vás může stát zákazníky. Rychlý server je základ
• Minimalizace kódu: odstraňte zbytečný JavaScript a CSS, které stejně nepoužíváte
• Mezipaměť: Nastavte ukládání souborů do mezipaměti prohlížeče, aby se při další návštěvě nemuselo stahovat všechno znovu

K měření použijte Google PageSpeed Insights nebo GTmetrix. Cílem je dosáhnout na mobilu skóre alespoň 90/100.

Kontrolní seznam mobilní verze webu

Základní funkčnost

• Web se správně zobrazuje na šířce 320 px (nejmenší běžné mobily)
• Všechny interaktivní prvky jsou funkční na dotykovém displeji
• Formuláře jdou vyplnit bez zbytečného zoomování
• Žádný obsah nepřetéká přes okraj obrazovky

Navigace a UX

• Hlavní navigace je snadno dostupná a jasně viditelná
• Všechna tlačítka a odkazy mají minimální velikost 44 × 44 px
• Mezi interaktivními prvky je dostatek místa (alespoň 8 px)
• Menu se dá ovládat jednou rukou (důležité prvky dole)
• Je jasné, kde se uživatel na webu nachází

Text a čitelnost

• Velikost písma je alespoň 16 px pro běžný text
• Kontrast mezi textem a pozadím je dostatečný (alespoň 4,5 : 1)
• Řádkování je nastaveno alespoň na 1,5
• Text není užší než 45 znaků na řádek
• Nadpisy jsou jasně odlišené od běžného textu

Obrázky a multimédia

• Všechny obrázky jsou optimalizované (ideálně WebP)
• Obrázky mají správnou velikost pro mobilní zobrazení
• Používá se lazy loading pro obrázky mimo viditelnou oblast
• Videa jsou responzivní a nezpomalují načítání
• Žádný obrázek nemá více než 500 kB

Výkon

• Stránka se načte do 3 sekund na 3G připojení
• Skóre PageSpeed Insights je pro mobil alespoň 90/100
• Žádné blokující JavaScript soubory v hlavičce
• CSS a JavaScript jsou minimalizované
• Server má nastavenou kompresi a ukládání do mezipaměti

Závěr

Mobilní web není doplňková funkce ani vzdálená budoucnost. Pro většinu webů je už dávno hlavním způsobem, jak se k nim lidé dostávají.

Pět popsaných chyb, tedy malá tlačítka, neresponzivní tabulky, špatně čitelný text, problematická navigace a pomalé načítání, se týká základních prvků webu, které musí fungovat.

Nejde jen o technické podrobnosti pro specialisty. Každá z těchto chyb přímo ovlivňuje, zda lidé na webu zůstanou, něco si u vás koupí nebo vás vůbec najdou ve vyhledávači.

Pokud má váš web na mobilu problémy, neodkládejte jejich řešení. Vaše konkurence už na tom pravděpodobně pracuje.

Potřebujete pomoci s optimalizací webu pro mobilní zařízení? V PIXLO máme s responzivním designem dlouholeté zkušenosti. Pošlete nám odkaz na svůj web a domluvíme si nezávaznou konzultaci nad konkrétním řešením.