Mobilní web: proč ho 70 % zákazníků vidí jinak

Svůj web znáte dobře. Víte, kde je tlačítko, jak vypadá hero sekce, jak rychle se načte. Problém je, že ho vidíte na monitoru, zatímco většina vašich zákazníků ne.

Otevřete ho teď na telefonu.

Čísla, která většina majitelů webu nezná

60–70 % návštěvnosti webů v Česku přichází z mobilních zařízení. U některých segmentů (lokální služby, lifestyle, online platformy) to bývá přes 80 nebo 90 procent.

Přesto se weby navrhují na desktopu. Schůzky s grafikem probíhají před monitorem. Návrh se schvaluje v prezentaci otevřené v prohlížeči na laptopu. Výsledkem je web vyladěný pro menšinu návštěvníků, který na zařízeních té většiny nikdo nezkoušel.

36 sekund

Pracovali jsme s platformou pro online konzultace. Provozovatel si stěžoval na nízký zájem: návštěvnost webu nebyla špatná, ale lidé odcházeli. Průměrná délka návštěvy: 36 sekund.

Nabízelo se hledat problém v produktu nebo nabídce. V produktu ale nebyl. Byl v tom, co lidé viděli při příchodu na web.

90 % návštěvnosti přicházelo z mobilů. Web byl navržen pro desktop a na mobilu se rozpadal: přeplněný layout, CTA schované pod ohybem stránky, text příliš malý na přečtení. Návštěvníci neodcházeli proto, že by je produkt nezajímal, ale proto, že jim web nedovolil zjistit, co produkt vlastně je.

Zákazník, který nemůže udělat krok teď, většinou neudělá žádný.

Nejčastější mobilní chyby

Problémy, které se opakují napříč weby bez ohledu na obor:

CTA není vidět bez scrollování. Na desktopu je výzva k akci vidět hned na první obrazovce. Na mobilu může být klidně až na třetí, přestože layout „vypadá dobře“. Návštěvník pak odejde dřív, než se k ní dostane.

Tlačítka příliš malá nebo příliš blízko u sebe. Apple doporučuje minimální plochu dotyku 44 × 44 px. Menší tlačítka zákazníka jen rozčilují: trefí špatné, nebo se netrefí vůbec.

Formuláře neoptimalizované pro mobilní klávesnici. Pole pro telefon bez atributu type="tel" zobrazí klasickou klávesnici místo číselné. Pole pro e-mail bez type="email" nenabídne zkratky pro @ a .com. Jsou to detaily, které zdržují při každém vyplňování.

Obrázky se načítají příliš pomalu. Na Wi-Fi to nevnímáte. Na 4G v metru je to něco jiného. Neoptimalizované obrázky bez lazy loadingu a bez WebP formátu jsou jednou z nejčastějších příčin, proč zákazník stránku opustí ještě dřív, než se vůbec začne rozhodovat.

Horizontální scroll. Jeden prvek přesahující šířku obrazovky (obrázek, tabulka, blok textu s pevnou šířkou) rozbije na mobilu celou stránku. Na desktopu přitom tahle chyba není vidět.

Jak otestovat svůj mobilní web (zdarma)

Fyzicky. Vezměte telefon, ideálně ne nejnovější špičkový model, ale průměrné zařízení, a projděte si celou cestu ke konverzi od příchodu na stránku po dokončení akce. Sledujte, kde váháte, kde musíte přibližovat, kde se sekne načítání.

Udělejte totéž na dvou různých zařízeních. Android a iPhone se chovají jinak a problémy se často ukážou jen na jednom z nich.

Google Search Console → Core Web Vitals. Sekce „Prostředí na stránce“ zobrazuje metriky zvlášť pro desktop a mobil. Pokud vidíte problémy jen u mobilního skóre, víte, kde hledat. Jak s výsledky pracovat krok po kroku, popisujeme v článku o rychlosti webu.

PageSpeed Insights. Zadejte URL a přepněte na mobilní pohled. Skóre pod 50 bodů na mobilu je kritický stav a není výjimkou ani u webů, které na desktopu dosahují přes 90.

PostHog – nahrávky mobilních session. Bezplatný analytický nástroj s funkcí session replay. Doslova uvidíte, jak zákazník prochází vaším webem na mobilu: kde se zasekne, kde scrolluje bez cíle, kde odchází. To, co čísla jen naznačují, nahrávky ukážou přímo.

Co opravit jako první

Redesign není první krok. Většinu problémů vyřeší cílené drobné úpravy, a to rychleji a levněji než přepracování celého layoutu. O tom, jak k opravám přistoupit systematicky, jsme psali v průvodci, kde začít se zvýšením konverzí.

1. CTA viditelné bez scrollování. Zkontrolujte, jestli je hlavní výzva k akci na mobilu vidět hned na první obrazovce. Pokud ne, je to vaše první oprava. Bývá to změna na jednom řádku CSS.

2. Komprese obrázků. Největší dopad za nejméně práce. Převod do WebP a správné rozměry obrázků typicky ušetří 30–50 % objemu stránky. Výsledek hned změříte na rychlosti načítání.

3. Formuláře se správnými atributy. Přidání type="email" a type="tel" je změna na jednom řádku kódu. Každý zákazník, který formulář vyplňuje na mobilu, ji pocítí.

4. Ověření dotyku. Projděte si všechna tlačítka a aktivní prvky. Jsou dostatečně velká? Mají kolem sebe dost prostoru, aby se dala trefit bez přibližování?

Teprve pokud tyto změny nestačí nebo pokud analýza nahrávek ukáže hlubší strukturální problém, má smysl uvažovat o přepracování layoutu. A pozor: redesign webu sám o sobě nestačí. Bez dat a testování s reálnými uživateli nový design konverze nezvýší.

---

Co si z toho vzít

Zákazníci přicházejí na váš web s mobilem v ruce. To, co vidíte vy na monitoru, je jiný web – lépe načtený, lépe rozvržený, lépe ovladatelný.

Pět minut s telefonem v ruce může odhalit problémy, které analytika měsíce přehlížela.

Pokud nevíte, kde na vašem webu zákazníci odcházejí a proč, Kaen to hlídá průběžně: čte vaše data zvlášť pro mobil i desktop, najde, kde funnel uniká, a ke každému nálezu připraví konkrétní doporučení s měřitelnou hypotézou.