Mobilní web: 70 % vašich zákazníků vidí jiný web než vy
Váš 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 — a 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 % webového trafficu 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ýsledek? Web optimalizovaný pro menšinu návštěvníků — a testovaný zcela bez ostatních.
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.
Prvním instinktem bylo hledat problém v produktu nebo nabídce. Produkt ale problém nebyl. Problém byl v tom, co lidé viděli při příchodu na web.
90 % trafficu 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 odcházeli ne proto, že by produkt nezajímal, ale proto, že web jim neumožnil 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 hned v prvním pohledu. Na mobilu může být klidně na třetí obrazovce — přestože layout “vypadá dobře”. Výsledek: návštěvník 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. Pod tímto rozměrem se tlačítka stávají frustračním prvkem — zákazník 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" neodkryje zkratky pro @ a .com. Jsou to detaily, které navyšují tření při každém vyplnění.
Obrázky se načítají příliš pomalu. Na Wi-Fi to nevnímáte. Na 4G při jízdě metrem je to jiná situace. Neoptimalizované obrázky bez lazy loadingu a bez WebP formátu jsou jednou z nejčastějších příčin opuštění stránky — ještě dřív, než se zákazník vůbec rozhoduje.
Horizontální scroll. Jeden prvek přesahující šířku obrazovky — obrázek, tabulka, blok textu s pevnou šířkou — rozbije celý mobilní zážitek. Je to chyba, která je na desktopu neviditelná.
Jak otestovat svůj mobilní web (zdarma)
Fyzicky. Vezměte telefon — ideálně ne ten nejnovější flagship, ale průměrné zařízení — a projděte si celý konverzní flow. 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 nezřídka 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 — rychleji a levněji než přepracování celého layoutu.
1. CTA viditelné bez scrollování. Zkontrolujte, jestli je hlavní výzva k akci v prvním pohledu na mobilu. Pokud ne, je to vaše první oprava — a bývá to změna na jednom řádku CSS.
2. Komprese obrázků. Největší dopad s nejmenším technickým úsilím. Převod do WebP a správné rozměry obrázků typicky ušetří 30–50 % objemu stránky. Výsledek je okamžitě měřitelný v 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.
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č, konverzní audit je nejrychlejší způsob, jak to zjistit. Projdeme web systematicky — včetně mobilního pohledu — a ke každému nálezu dostanete konkrétní doporučení s měřitelnou hypotézou.