Mobile first: proč se web navrhuje nejdřív pro telefon, i když Češi pořád často sedí u počítače

01Krátká odpověď: proč začít od telefonu

• Malá obrazovka nutí rozhodnout, co je důležité. Na šířku 360 pixelů se nevejde nic navíc, a co na telefonu přežije, bývá to podstatné i na počítači.
• Google posuzuje mobilní verzi. Od roku 2023 indexuje a hodnotí weby podle obsahu jejich mobilní verze, od července 2024 už bez výjimky.
• Telefon je nejslabší článek. Pomalejší procesor a horší připojení. Co běží svižně na mobilu, poběží i na počítači. Naopak to neplatí.
• Přidávat je snazší než škrtat. Rozšířit jednoduchý mobilní návrh na velkou obrazovku je méně práce než ořezávat přeplněnou stránku pro počítač.
• Neplatí to vždy. U interních systémů, kam lidé chodí hlavně z počítače, může být lepší začít od velké obrazovky. Rozhodnout by měla vaše analytika.

02Co mobile first znamená a co ne

Mobile first je postup návrhu: web nejdřív navrhnete a naprogramujete pro telefon a potom ho postupně rozšiřujete pro tablet a počítač. Výsledkem je jeden web, který se přizpůsobí každé obrazovce. Na telefonu jeden sloupec a velká tlačítka, na počítači víc sloupců a víc prostoru.

Myšlenka stojí na starším principu, kterému vývojáři říkají progressive enhancement, tedy postupné vylepšování. Pojmenovali ho Steven Champeon a Nick Finck v březnu 2003. Podle MDN jde o to dát co nejvíce lidem základní obsah a funkce a teprve nejmodernějším prohlížečům přidat to nejlepší. Opačný postup, graceful degradation, začíná u plné verze a pro slabší zařízení z ní ubírá.

Pojmy se často pletou, proto je dáváme vedle sebe:

Responzivní web tedy může vzniknout oběma směry. Rozdíl uvidíte hlavně na telefonu: web navržený od počítače a pak „zmáčknutý“ mívá schované důležité informace, drobná tlačítka a těžké obrázky, které se načítají, i když na malé obrazovce nejsou potřeba.

03Odkud se mobile first vzal

Pojem zpopularizoval designér Luke Wroblewski. V článku ze 3. listopadu 2009 upozornil, že se mobilní verze webů navrhuje až po verzi pro počítač, a navrhl pořadí obrátit. Uvedl tři důvody: mobil rychle roste, mobil nutí soustředit se na podstatné a mobil umí víc (polohu, dotyk, náklon). K druhému důvodu dodal, že na obrazovce 320 × 480 pixelů prostě není místo pro nic zbytečného.

O půl roku později přišel Ethan Marcotte s responzivním designem a v říjnu 2011 vyšla Wroblewského kniha Mobile First. Od té doby se z tehdy odvážného nápadu stal běžný postup. Rozhodující krok ale udělal Google.

04Kolik Čechů chodí na web z telefonu

Za deset let se poměr obrátil. StatCounter měří zobrazení stránek na webech se svým měřicím kódem. V Česku z mobilu přišlo v roce 2015 jen 8,1 % z nich, v roce 2025 už 50,6 %.

Čísla navíc kolísají podle ročního období. V únoru 2025 přišlo z mobilu 46,6 % zobrazení, v červenci 2025 už 59,5 %. V létě, kdy jsou lidé víc mimo kancelář, roste podíl telefonu, v zimě převažuje počítač. Firma si proto nemůže vybrat, jestli bude dobrá na mobilu, nebo na počítači.

Ještě jasněji to ukazují data o lidech. Podle ČSÚ se v roce 2025 na internet z mobilu připojovalo 82,7 % Čechů starších 16 let. Notebook používalo 65 %, stolní počítač 40 % a tablet 31 %. Mobil je tedy nejčastější zařízení, i když k nákupům a práci mnoho lidí dál sedá k počítači.

Pozor na starší zákazníky. Mezi lidmi od 65 do 74 let chodí na internet z mobilu 57,9 %, zatímco průměr EU je podle Eurostatu 70,3 %. Pokud prodáváte seniorům, počítač u vás může hrát větší roli. I tak se ale vyplatí navrhovat od telefonu, protože velká tlačítka a čitelné písmo starším lidem pomůžou na jakékoli obrazovce.

A nakupování? Podle průzkumu APEK nakupovalo v roce 2025 nejčastěji ze smartphonu 52,8 % českých nakupujících, z notebooku 26 % a ze stolního počítače 17,7 %. Velikost vzorku APEK na stránce neuvádí, takže číslo berte jako orientační.

05Google hodnotí mobilní verzi webu

Google v listopadu 2016 oznámil, že začne web hodnotit podle mobilní verze, protože většina lidí už u něj hledá z telefonu. Převádění webů trvalo sedm let. Od července 2019 dostával tento režim každý nový web automaticky a 31. října 2023 Google oznámil, že je přechod dokončený. Poslední weby, které ještě procházel robot pro počítač, přepnul 5. července 2024. Obsah, který na telefonu vůbec nejde otevřít, už nejde zaindexovat.

V praxi to znamená, že co na mobilu chybí, pro Google neexistuje. Jeho dokumentace radí hlavně tohle:

• Stejný obsah na mobilu i na počítači. Na telefonu ho můžete schovat do rozbalovacích sekcí nebo záložek, ale musí tam být.
• Stejné nadpisy, titulek a popis stránky. Když mobilní verze nese méně textu, počítejte s poklesem návštěvnosti z vyhledávání.
• Stejná strukturovaná data a stejné alt texty u obrázků. Obrázky v dostatečném rozlišení a na stejných adresách.
• Hlavní obsah nenačítat až po kliknutí nebo přejetí prstem. Takový obsah robot Googlu nenačte.
• Stejná meta značka robots. Jinak můžete na mobilu omylem zakázat indexaci.

A Seznam? Ten ve své nápovědě pro webmastery indexaci podle mobilní verze nezmiňuje a jeho robot se hlásí jedním společným označením. Tvrzení, že Seznam „přešel na mobile first“, proto berte s rezervou. Pro responzivní web je to ale jedno: obsah je na obou zařízeních stejný, takže oba vyhledávače vidí totéž. Víc o vyhledávání v Česku najdete v článku SEO v roce 2026.

06Telefon je nejpomalejší zařízení, pro které web děláte

Telefon má slabší procesor než počítač a často horší připojení. Data z prohlížeče Chrome ukazují důsledky i v Česku. Podle HTTP Archive splňovalo v srpnu 2026 všechny tři ukazatele Core Web Vitals (načtení, odezva a stabilita stránky) 75,4 % webů navštěvovaných z Česka na počítači, ale jen 67,3 % na mobilu. Mobilních webů je v datech skoro dvakrát víc, nejde tedy o přesně stejnou sadu. Největší rozdíl je v odezvě na klepnutí.

Na počítači má dobrou odezvu skoro každý web, na mobilu zhruba čtyři z pěti. Velkou roli hraje JavaScript: telefon ho zpracovává déle, a když je ho moc, stránka po klepnutí chvíli nereaguje. Výjimkou je stabilita rozvržení, ta vychází na mobilu lépe (89,2 % proti 83,8 %).

Kolik dat telefon stahuje? Podle Web Almanac 2025 měla mediánová domovská stránka na mobilu 2,56 MB. Medián obrázků byl 911 KB, JavaScriptu 632 KB. Mobile first tady pomáhá přímo: když začínáte od telefonu, přidáváte jen to, co je opravdu potřeba, místo abyste stránce určené pro počítač na mobilu schovávali obsah, který se stejně stahuje. Jak web zrychlit krok za krokem, rozebíráme v článku Pravidlo 3 vteřin.

07Prst místo myši: jak velká mají být tlačítka

Myš trefí pixel, prst ne. Proto normy i doporučení výrobců určují minimální velikost všeho, na co se klepe. Liší se jednotkami i přísností:

• WCAG 2.2, úroveň AA: klikací plocha aspoň 24 × 24 CSS pixelů, nebo dost místa kolem menších prvků (W3C). Evropská norma pro přístupnost EN 301 549 toto kritérium převzala ve verzi ze září 2026.
• Apple: výchozí velikost ovládacího prvku na iPhonu je 44 × 44 bodů, minimum 28 × 28 (Human Interface Guidelines).
• Android: aspoň 48 × 48 dp s mezerou 8 dp, fyzicky asi 9 mm (Google).
• WCAG, úroveň AAA: 44 × 44 CSS pixelů. Přísnější úroveň, kterou zákon nevyžaduje, ale pro hlavní tlačítka je to dobrý cíl.

Dlouho se tradovalo, že lidé drží telefon v jedné ruce a palcem dosáhnou jen na spodní část displeje. Steven Hoober, jehož výzkum z roku 2013 se k tomu často cituje, v roce 2017 upozornil, že se jeho starý článek cituje až příliš. Jeho novější data ukazují, že 75 % lidí ťuká jen jedním palcem, ale telefon drží různě a nejpřesněji trefují střed obrazovky. Tam stačí cíl velký 7 mm, v rozích je potřeba asi 12 mm. Hlavní akce tedy patří do dobře dosažitelného místa a malé ikonky do rohů raději nedávejte.

A nezakazujte přiblížení stránky. Podle Web Almanac 2025 ho omezuje 19 % mobilních webů, buď nastavením user-scalable=no, nebo častěji maximum-scale=1. Člověk se slabším zrakem si pak text nezvětší.

08Formuláře na mobilu: kde se ztrácejí poptávky

Na mobilu se formulář vyplňuje hůř: malá klávesnice, málo místa a každé pole navíc je další překážka. Většinu problémů ale vyřeší pár řádků kódu, které nic nestojí:

• Správný typ pole. U e-mailu type="email" (klávesnice se zavináčem), u telefonu type="tel" (číselná klávesnice), u PSČ inputmode="numeric". Telefon pak sám nabídne vhodnou klávesnici.
• Automatické vyplnění. Atribut autocomplete řekne prohlížeči, co do pole patří, a ten doplní jméno, adresu nebo e-mail jedním klepnutím (MDN). U polí s údaji o samotném uživateli to na úrovni AA vyžaduje i WCAG (kritérium 1.3.5).
• Popisek nad polem, ne uvnitř. Šedý text v poli zmizí, jakmile začnete psát, a na telefonu pak nevíte, co jste vyplňovali.
• Jeden sloupec a pole přes celou šířku. Vedle sebe se na úzkém displeji vejdou leda dvě krátká pole.
• Jen nutná pole. Co nepotřebujete k vyřízení poptávky, nechte na telefonát.
• Chyba hned u pole a srozumitelně. Ne souhrn chyb nahoře na stránce, ke kterému je na telefonu potřeba posouvat zpátky.

<label for="email">E-mail</label>
<input id="email" name="email" type="email" autocomplete="email">

<label for="tel">Telefon</label>
<input id="tel" name="tel" type="tel" autocomplete="tel">

<label for="psc">PSČ</label>
<input id="psc" name="psc" inputmode="numeric" autocomplete="postal-code">

Na více než 6 500 webech, které měří Contentsquare, končí na počítači konverzí (nákupem nebo jiným cílem webu) 3,4 % návštěv, na mobilním webu kolem 2 %. Contentsquare to vysvětluje tím, že lidé web často najdou na telefonu a nakoupí až později z počítače. Část z nich se ale nevrátí. Kdo jim na telefonu nepostaví zbytečné překážky, nemusí na jejich návrat spoléhat. Další tipy, jak z webu dostat víc poptávek, jsou v článku Proč hezký web nestačí.

09Jak se web navrhuje mobile first: postup v šesti krocích

1. Obsah a priority

Než designér nakreslí první obrazovku, sepište, co musí člověk na stránce najít a v jakém pořadí. Co nabízíte, pro koho, kolik to stojí a jak vás kontaktovat. Na telefonu je pořadí totéž co důležitost: co je níž, uvidí méně lidí.

2. Návrh pro šířku telefonu

Nejčastější telefony v Česku zobrazují web v šířce 360 až 430 CSS pixelů. Podle StatCounteru na ně v září 2026 připadlo nejméně 74 % zobrazení z mobilů. Navrhuje se proto pro šířku kolem 360 px a kontroluje i na 320 px, kterou vyžaduje WCAG pro přeskládání obsahu. Návrh pro jeden konkrétní telefon nestačí: nejčastější rozlišení mělo jen 13,8 %.

3. Rozšíření pro tablet a počítač

Teprve potom přidáte druhý sloupec, větší obrázky a viditelné menu. Pozor na opačnou chybu: mobilní návrh jen roztažený na velký monitor. Nielsen Norman Group v roce 2023 popsala, že takové weby mají na počítači obří obrázky, prázdná místa a obsah rozházený do dlouhých stránek.

4. Kód od nejmenší obrazovky

Základní styly platí pro telefon a pro větší obrazovky se přidávají pravidla s podmínkou minimální šířky. Telefon tak nemusí přepisovat pravidla psaná pro počítač a výsledný kód bývá kratší a přehlednější.

/* Základ: telefon, jeden sloupec */
.produkty { display: grid; gap: 16px; }

/* Od 768 px: dva sloupce */
@media (min-width: 768px) {
  .produkty { grid-template-columns: 1fr 1fr; }
}

/* Od 1200 px: čtyři sloupce */
@media (min-width: 1200px) {
  .produkty { grid-template-columns: repeat(4, 1fr); }
}

5. Test na skutečných telefonech

Zmenšené okno prohlížeče na počítači neodhalí pomalý procesor ani to, jak se do pole píše palcem. V Česku podle StatCounteru připadalo v září 2026 na Android 68,9 % mobilních zobrazení a na iPhone 31 %. Testujte proto hlavně na běžném Androidu střední třídy, ne jen na novém iPhonu, který má v kapse vedení.

6. Měření podle zařízení

V analytice si rozdělte návštěvy, poptávky a objednávky podle zařízení. Když mobil přivádí polovinu lidí, ale jen desetinu poptávek, víte, kde začít. Rychlost na mobilu ze skutečných dat ukáže PageSpeed Insights, pokud má web dost návštěv z Chrome. Jinak pomůže aspoň laboratorní test tamtéž.

10Zákon o přístupnosti počítá i s mobilem

Od 28. června 2025 je účinný zákon č. 424/2023 Sb. o požadavcích na přístupnost výrobků a služeb, česká verze evropského Aktu o přístupnosti. Týká se mimo jiné e-shopů, finančních služeb, elektronických knih a dopravy. E-shop zákon definuje jako službu poskytovanou „prostřednictvím internetových stránek nebo mobilních zařízení“ a příloha výslovně požaduje, aby byly přístupné i „služby poskytované na mobilních zařízeních včetně mobilních aplikací“. Přístupnost se tedy posuzuje i na telefonu.

• Koho se týká: služby pro spotřebitele, typicky e-shopy. Podle výkladu ČOI se nevztahuje na služby mezi firmami.
• Výjimka: mikropodniky, tedy firmy s méně než 10 lidmi a obratem nebo bilanční sumou do 2 milionů eur.
• Kdo kontroluje: Česká obchodní inspekce.
• Pokuta: za službu, která požadavky nesplňuje, až 10 milionů Kč.

Malé tlačítko, text, který nejde zvětšit, nebo formulář bez popisků nejsou jen nepohodlné. U e-shopu mohou být porušením zákona. Mobile first a přístupnost chtějí totéž: velké klikací plochy, čitelné písmo a jasnou strukturu. Víc o přístupnosti píšeme v článku Rozdíl mezi UI a UX.

11Pět mýtů o mobile first

„Mobile first znamená jen mobil.“ Ne. Nielsen Norman Group to shrnuje už v názvu článku Mobile First Is NOT Mobile Only. Na počítači musí web fungovat stejně dobře, jen se k němu dostanete až ve druhém kroku.

„Na mobilu lidé stránku neposouvají.“ Posouvají, a dokonce víc než na počítači, protože musí. Ale jen když je nahoře důvod pokračovat (NN/g). Hlavní sdělení tedy patří na první obrazovku, zbytek může být níž.

„Sedmdesát procent návštěv je z mobilu.“ U velkých značek to platí. Firma Contentsquare naměřila na více než 6 500 webech svých klientů z devíti odvětví 69,9 % návštěv z mobilu (Contentsquare). U webů v Česku obecně připadá na mobil podle StatCounteru zhruba polovina zobrazení stránek. Podívejte se do vlastní analytiky.

„Menu schované pod ikonou je vždycky špatně.“ Na počítači škodí, na mobilu méně. Výzkum NN/g doporučuje na telefonu část menu schovat, pokud má víc než čtyři hlavní položky.

„Seznam taky indexuje mobilní verzi.“ Seznam to ve své nápovědě pro webmastery neuvádí. Při responzivním webu na tom nezáleží, obsah je stejný.

12Kdy mobile first nedává smysl

Jsou weby a aplikace, kam lidé chodí skoro výhradně z počítače: účetní a skladové systémy, administrace e-shopu, nástroje pro analýzu dat nebo složité konfigurátory. Nielsen Norman Group v deníkové studii zjistila, že důležitější úkoly lidé řeší spíš na větší obrazovce, a u produktů pro důležité úkoly, třeba z financí nebo zdravotnictví, doporučuje podívat se do analytiky: pokud je mobilních interakcí málo, mobile first nedělejte.

Mobil ale ani tady nevynechávejte. I interní systém má mít responzivní základ, protože obchodník v terénu nebo ředitel na cestě si potřebuje rychle něco ověřit. Rozdíl je v tom, odkud návrh začíná. U interního systému od velké obrazovky a hustých tabulek, u webu pro zákazníky od telefonu.

• Začněte od telefonu, když jde o web, e-shop, rezervace, objednávky, cokoli pro zákazníky a cokoli, co lidé otevírají z odkazu v e-mailu nebo na sociálních sítích.
• Začněte od počítače, když jde o interní systém s velkými tabulkami, kde vaše data ukazují, že z telefonu chodí jen malá část lidí.
• V obou případech testujte na obou zařízeních a měřte, odkud lidé skutečně chodí.

13Kontrolní seznam: je váš web opravdu mobile first?

• Na telefonu je bez posouvání vidět, co nabízíte a jak vás kontaktovat
• Obsah, nadpisy, titulek a popis stránky jsou na mobilu stejné jako na počítači
• Hlavní tlačítka mají aspoň 44 × 44 px, nic klikacího není menší než 24 × 24 px
• Text jde přiblížit dvěma prsty, stránka nemá user-scalable=no ani maximum-scale=1
• Stránka se na šířce 320 px nerozjede do stran
• Formuláře mají správné typy polí, autocomplete a popisky nad poli
• Telefonní číslo jde vytočit klepnutím, adresa otevře mapu
• Rychlost na mobilu splňuje Core Web Vitals podle skutečných dat v PageSpeed Insights
• Web je otestovaný na běžném Androidu i na iPhonu, ne jen ve zmenšeném okně
• Analytika ukazuje poptávky a objednávky zvlášť pro mobil a počítač
• Web na počítači nevypadá jako roztažený mobil

Pokud u více než tří bodů váháte, vyplatí se web nechat projít. Nový web na míru navrhujeme od telefonu a na skutečných zařízeních ho testujeme před spuštěním. Jak spolupráce probíhá, najdete na stránce Jak to probíhá, orientační ceny v ceníku.

14Časté otázky

15Zdroje

• Luke Wroblewski: Mobile First (2009) a kniha Mobile First (2011)
• Ethan Marcotte: Responsive Web Design, A List Apart (2010)
• Steven Champeon: Progressive Enhancement and the Future of Web Design (2003, archiv)
• MDN: Progressive enhancement a Graceful degradation
• Google: oznámení mobile-first indexace (2016), výchozí pro nové weby (2019), dokončení (2023) a konec robota pro počítač (2024)
• Google: doporučení pro mobile-first indexaci
• StatCounter: zařízení v Česku, rozlišení mobilů a mobilní systémy
• ČSÚ: Využívání ICT v domácnostech a mezi osobami 2025
• Eurostat: zařízení pro přístup k internetu, isoc_ci_dev_i
• APEK: data o české e-commerce
• HTTP Archive: Core Web Vitals Technology Report
• Web Almanac 2025: Page Weight a Accessibility
• W3C: WCAG 2.2 a vysvětlení kritéria 2.5.8
• Apple: Human Interface Guidelines, Accessibility
• Google: velikost dotykových cílů v Androidu
• Steven Hoober: Design for Fingers, Touch, and People (2017)
• MDN: inputmode a autocomplete
• Nielsen Norman Group: Mobile First Is NOT Mobile Only, Content Dispersion, The Fold Manifesto, Hamburger Menus a Large Devices Preferred for Important Tasks
• Contentsquare: Digital Experience Benchmark 2026, konverze a statistiky mobilu
• Seznam: SeznamBot
• Zákon č. 424/2023 Sb., o požadavcích na přístupnost některých výrobků a služeb a ČOI: přístupnost pro podnikatele