WebRenovace.cz

Jak poznat, že web nefunguje na mobilu, a co má umět dobrá mobilní verze

Na telefony připadá téměř polovina zobrazení stránek v Česku. Zjistěte, podle čeho poznáte, že váš web na mobilu nefunguje, a co má umět jeho mobilní verze.

6 min čtení
Jak poznat, že web nefunguje na mobilu, a co má umět dobrá mobilní verze

Řada firemních webů vznikla v době, kdy se stránky navrhovaly pro monitor počítače. Na telefonu se pak ukážou jako zmenšenina celé stránky: tři sloupce vedle sebe, drobné písmo a telefonní číslo, které si zákazník musí nejdřív najít a pak přiblížit dvěma prsty. Pokud svůj web otevíráte hlavně na počítači, nemusíte si toho všimnout.

Zkontrolujte to na vlastním telefonu, zabere to několik minut. Vyplatí se to i kvůli vyhledávání.

Proč na mobilní verzi záleží

Podle služby StatCounter připadlo v Česku v srpnu 2026 na telefony 46 % zobrazených stránek, na počítače 52 % a zbytek na tablety (StatCounter, srpen 2026). Lidé navíc často hledají řemeslníka nebo otevírací dobu obchodu cestou, s telefonem v ruce.

Google web prochází a indexuje jako chytrý telefon. Pro zařazení do výsledků i pro pořadí používá obsah mobilní verze stránky (Google, září 2026). Od července 2024 používá už jen tento způsob a obsah, který se na mobilu nedá zobrazit vůbec, neindexuje (Google, červen 2024). Starý web, který se na telefonu jen špatně čte, z výsledků nezmizí. Google ho ale hodnotí v podobě, v jaké ho vidí telefon.

Zmenšená stránka z počítače

Starý web bez mobilní verze poznáte na první pohled. Stránka se na telefonu ukáže celá, ale drobná. Text přečtete až po přiblížení prsty a pak musíte posouvat obraz do stran. Příčinou bývá chybějící řádek v hlavičce kódu stránky, takzvaný viewport. Bez něj prohlížeč v telefonu stránku rozloží do širšího okna, například 980 px, jako by šlo o počítač, a výsledek zmenší na šířku displeje (MDN, září 2026).

Prohlížeče nejběžnějších telefonů v Česku počítají se šířkou displeje 360 až 414 px (StatCounter, srpen 2026). Stránka se tak zmenší zhruba na 40 % a písmo velké 16 px vypadá jako 6 až 7 px.

Dva telefony se stejnou stránkou firmy: vlevo stránka z počítače zmenšená na 40 % se třemi sloupci a drobným písmem, vpravo mobilní verze v jednom sloupci s písmem 16 px a oranžovým tlačítkem Zavolat nahoře
Stejný obsah dvakrát. Vlevo stránka z počítače zmenšená na displej, vpravo poskládaná pod sebe, s tlačítkem Zavolat hned pod nadpisem.

Samotný řádek s viewportem ale nestačí. Říká jen, že se má stránka rozložit na skutečnou šířku telefonu. Rozvržení stránky se tomu musí umět přizpůsobit. Takovému webu se říká responzivní: má jeden kód a jednu adresu a podle šířky displeje se jinak poskládá. Google tento způsob doporučuje, protože se nejsnáz udržuje (Google, září 2026).

Jeden sloupec a čitelné písmo

Na telefonu se sloupce řadí pod sebe. Pořadí přitom rozhoduje víc než na počítači, protože první obrazovka pojme jen několik řádků. Nahoru dejte to, kvůli čemu lidé na váš web chodí: čím se zabýváte, telefon a podle oboru otevírací dobu nebo ceny. Úvodní text o historii firmy patří níž.

Standard přístupnosti WCAG 2.2 požaduje, aby se obsah dal zobrazit v šířce 320 px bez posouvání do stran (W3C, říjen 2023). Písmo odstavců má být čitelné s telefonem v běžné vzdálenosti od očí, bez roztahování prsty.

Tlačítka a odkazy pro prst

Prst je mnohem méně přesný než kurzor myši. Starší weby přitom mívají v menu nebo v patičce odkazy malým písmem těsně pod sebou. Prst pak zasáhne jiný odkaz, než měl, nebo dva najednou.

Standard WCAG 2.2 bere jako spodní hranici plochu 24 × 24 px. Menší prvek vyhoví, jen když má kolem sebe dost volného místa. Výjimku mají například odkazy uprostřed věty (W3C, říjen 2023). Google pro weby doporučuje dotykovou plochu zhruba 48 × 48 px, což je asi 9 mm, tedy přibližně bříško prstu. Mezi sousedními prvky doporučuje mezeru asi 8 px (web.dev, březen 2020). Apple pro aplikace na iPhonu uvádí nejméně 44 × 44 bodů (Apple, září 2026).

Kruh velký jako bříško prstu zasáhne dva drobné odkazy Telefon a E-mail těsně pod sebou najednou, na tlačítkách Zavolat a Napsat e-mail vysokých 48 px s mezerou 8 px jen jedno. Dole plochy 24 × 24 px, 44 × 44 bodů a 48 × 48 px ve stejném měřítku
Kruh je velký jako bříško prstu. Z odkazů vysokých 16 px zasáhne dva naráz, z tlačítek vysokých 48 px jen jedno.

Telefon a ceny bez hledání

Telefonní číslo má být odkaz, který po klepnutí nabídne hovor, ne obrázek nebo text, který je nutné opsat. Ceny zase patří přímo na stránku. Ceník v PDF se na telefonu obvykle otevře jako stránka formátu A4 a zákazník ho musí přibližovat stejně jako starý web.

Vyskakovací okna a formuláře

Okno, které po načtení překryje obsah, zabere na telefonu často celou obrazovku a jeho zavírací křížek bývá malý. Google doporučuje se takovým oknům vyhnout. Návštěvníky obtěžují a vyhledávači ztěžují pochopení obsahu, což se podle Googlu může projevit na výsledcích ve vyhledávání. Místo nich radí pruh, který zabere jen malou část obrazovky (Google, září 2026). Kdy web nepotřebuje ani cookie lištu, rozebírá samostatný článek.

Formulář na telefonu vyplňuje palec. Pomáhá proto, když má jen několik políček a popisek stojí nad políčkem, ne vedle něj. Políčko pro telefon má mít v kódu typ „tel“, aby se ukázala klávesnice s číslicemi (MDN, září 2026). Písmo v políčkách má mít aspoň 16 px. Jinak Safari na iPhonu stránku při klepnutí do políčka samo přiblíží a část formuláře se dostane mimo obrazovku (WebKit, září 2026).

Kontrola na vlastním telefonu za pět minut

Otevřete web na vlastním telefonu, nejlépe na mobilních datech, jako by ho otevíral zákazník venku. Pak projděte šest kroků:

  1. Úvodní stránka. Text musí být čitelný bez přibližování a nic se nesmí posouvat do stran.
  2. Telefon. Číslo má být vidět bez rolování a po klepnutí nabídnout hovor.
  3. Menu a patička. Každý odkaz se musí dát trefit palcem napoprvé, bez otevření sousedního.
  4. Ceny. Mají být na stránce, ne v PDF ke stažení.
  5. Vyskakovací okna. Po načtení nesmí nic zakrýt obsah.
  6. Formulář. U telefonního čísla se má ukázat klávesnice s číslicemi a stránka se při klepnutí do políčka nesmí sama přiblížit. Políčka jen vyplňte, odesílat je nemusíte.

Pokud chcete kontrolu i od stroje, použijte Lighthouse. Je součástí prohlížeče Chrome na počítači a spouští ho i web PageSpeed Insights. Google svůj samostatný Mobile-Friendly Test v prosinci 2023 vypnul s tím, že pro kontrolu mobilní verze mezitím vznikly jiné nástroje, mezi nimi právě Lighthouse (Google, duben 2023). Lighthouse mimo jiné upozorní na chybějící viewport a na dotykové prvky, které jsou malé nebo příliš blízko u sebe. Změří i rychlost načtení. Co ji nejčastěji brzdí, popisuje článek o CDN a rychlosti webu.

Jak to řeší Webrenovace

Weby, které stavíme, jsou navržené pro telefon. Tlačítko Zavolat je vidět hned bez rolování a ceny stojí na stránce, ne v PDF ke stažení. Jak vypadají na mobilu, ukazuje sto ukázek z různých oborů. Otevřete si je rovnou v telefonu. Dvě varianty nového webu z obsahu toho současného vám postavíme zdarma. Platíte, až si jednu vyberete.

Časté otázky

Stačí do starého webu doplnit viewport?

Stačí, jen pokud se rozvržení umí přizpůsobit šířce displeje. Stránka s pevnou šířkou se po doplnění viewportu ukáže v plné velikosti, ale oříznutá, a obsah se bude posouvat do strany. Pak musíte upravit rozvržení. U redakčního systému nebo stavebnice to může znamenat přechod na jinou šablonu.

Musí mít mobilní verze stejný obsah jako verze pro počítač?

Měla by. Google indexuje mobilní verzi a co na telefonu chybí, při indexování nevidí. Obsah můžete na mobilu poskládat jinak, třeba do rozbalovacích částí, ale nic z něj neubírejte.

Je lepší samostatná mobilní verze, nebo responzivní web?

Google doporučuje responzivní web, tedy jednu stránku na jedné adrese, která se přizpůsobí displeji. Samostatná mobilní verze na jiné adrese znamená starat se o dva weby a hlídat, aby na obou byl stejný obsah.

Sníží Google pozici webu, který se na mobilu špatně používá?

Přímo ji nesníží. Google uvádí, že z vlastností, které tvoří dojem ze stránky, přímo ovlivňují pořadí jen Core Web Vitals, tedy rychlost načtení, odezva a stabilita stránky. Pohodlné zobrazení na mobilu podle něj pozici přímo nezvyšuje, ale jde stejným směrem jako to, co jeho systémy odměňují (Google, září 2026). Obsah, který na telefonu nelze zobrazit vůbec, ale od července 2024 neindexuje.

Další čtení