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 vypadají na počítači skvěle. Ale co když vám říkám, že přes 60 % vašich návštěvníků přichází z mobilů? A většina z nich váš web opouští během pár sekund, protože se s ním nedá pořádně pracovat.

Není to jejich chyba. Je to vaše.

Responzivní design už dávno není žádná moderní výstřelnost. Je to základ. A přesto vidíme pořád dokola stejné chyby, které dělají mobilní web nepoužitelným. Pojďme si projít těch pět nejhorších prohřešků a hlavně to, jak je napravit.

1. Tlačítka jako pro trpaslíky

Znáte to. Snažíte se na mobilu kliknout na tlačítko "Koupit" a místo toho omylem zavřete celý košík. Nebo se nemůžete trefit do odkazu v menu, i když máte normálně velké prsty.

Proč je to problém: Lidské prsty nejsou stylus. Průměrný prst dospělého člověka má tloušťku kolem jednoho centimetru. Když děláte tlačítka malá, nutíte uživatele přesně mířit - a to je frustrující.

Jak to opravit:

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

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

2. Tabulky, které se vlezou jen do panoramatu

Máte na webu krásně vypracovanou tabulku s cenami, srovnáním produktů nebo harmonogramem? Na počítači vypadá parádně. Na mobilu vypadá jako čínská zeď textu, který se nedá přečíst bez neustálého posouvání do stran.

Proč je to problém: Tabulky jsou ze své podstaty široké. Když je nacpete do úzkého displeje mobilu, stanou se nepoužitelné. Uživatel buď vidí jen část informací, nebo musí jako blázen posouvat obsah do stran (což nikdo nemá rád).

Jak to opravit:

Řešení 1 - Horizontální scroll (pro jednodušší tabulky)

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

Zabalte tabulku do kontejneru, který umožní posouvání do stran. Důležité je dát uživateli najevo, že tabulku může posunout - například tím, že pravý okraj bude mírně oříznutý.

Ř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

Představte si, že se díváte na text velikosti 10 bodů na obrazovce široké 6 cm. Zní to jako tortury? Přesně takový dojem mají vaši návštěvníci.

Proč je to problém: Malý text nutí lidi přibližovat a oddalovat stránku. To je otravné a většina uživatelů prostě odejde jinam. Navíc špatně čitelný text znamená, že vaše skvělé texty nikdo nepřečte.

Jak to opravit:

• Minimální velikost písma: 16px pro běžný text (některé zdroje doporučují i 18px)
• Výška řádku: Nastavte line-height na alespoň 1.5, aby se řádky nepřekrývaly
• Kontrast: Tmavý text na světlém pozadí nebo naopak - žádné šedé na šedém
• Šířka sloupce textu: Na mobilu by měl text zabírat zhruba 50-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. Menu, které se hraje na schovávanou

Hamburger menu (ty tři čárky v rohu) je všude. Ale víte, co je problém? Spousta uživatelů nad 45 let neví, co to znamená. A i když to ví, je tam ještě jeden zádrhel - co je schované, to neexistuje.

Proč je to problém: Studie ukazují, že skrytá navigace snižuje zapojení uživatelů skoro o polovinu. Lidé prostě méně klikají na věci, které nevidí. Navíc hamburger menu vyžaduje dva kliky 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 - Tab bar (spodní lišta)

Místo hamburger menu použijte spodní navigační lištu s ikonami. To je mnohem intuitivnější a navíc je lišta v dosahu palce - ideální pro jednoruční ovládání.

Varianta 3 - Určete priority

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

Zlaté pravidlo: Na desktopu vždycky ukažte menu celé. Hamburger menu je nutné zlo na mobilu, ale na širokých obrazovkách nemá co dělat.

5. Načítání rychlostí šneka s kocovinou

"Stránka se načítá..." Je něco víc frustrujícího? Většina lidí dá webu tři sekundy. Pokud se do té doby nenačte, jsou pryč. A to píšu tři sekundy, ne třicet.

Proč je to problém: Mobilní internet není vždycky rychlý. Někdo jede vlakem tunelem, někdo má levný tarif s pomalými daty. A váš web s obrovskými obrázky z fotoaparátu v plném rozlišení 5MB? Ten se bude načítat do příštího úterý.

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

• Formát WebP: Moderní formát, který je o 25-35 % menší než JPEG při stejné kvalitě. Všechny dnešní prohlížeče ho podporují
• Správná velikost: Obrázek pro náhled v článku nepotřebuje rozlišení 4000 x 3000 px. Stačí 800 x 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ž 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

Měření: Použijte Google PageSpeed Insights nebo GTmetrix. Cílem je dostat se na skóre aspoň 90/100 na mobilu.

Kontrolní seznam: Kontrola mobilní verze webu

Základní funkčnost

• Web se správně zobrazuje na šířce 320px (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 x 44 px
• Mezi interaktivními prvky je dostatek místa (min. 8px)
• 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ň 16px pro běžný text
• Kontrast mezi textem a pozadím je dostatečný (min. 4.5:1)
• Řádkování je nastaveno na min. 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í
• PageSpeed Insights skóre je min. 90/100 pro mobil
• Žá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í nějaká "extra funkce" nebo "budoucnost". Je to přítomnost a pro většinu webů už dávno hlavní způsob, jak se k nim lidé dostávají.

Těch pět chyb, o kterých jsme mluvili - malá tlačítka, neresponzivní tabulky, špatně čitelný text, problematická navigace a pomalé načítání - to nejsou žádné raketové vědy. Jsou to základní věci, které prostě musí fungovat.

A nejsou to jen technické finesy pro IT specialisty. Každá z těchto chyb přímo ovlivňuje, jestli vám lidé zůstanou na webu, jestli si u vás něco koupí, nebo jestli vás vůbec najdou ve vyhledávači.

Takže pokud máte web, který má s mobilem problémy - neměli byste to řešit někdy příště. Měli byste to řešit teď. Vaše konkurence už na tom pravděpodobně pracuje.

Potřebujete pomoct s optimalizací vašeho webu pro mobilní zařízení? V Pixlu máme s responzivním designem dlouholeté zkušenosti. Rádi se podíváme na váš web a navrhneme konkrétní řešení. Kontaktujte nás a uděláme si nezávaznou konzultaci.