Mobile-first design v roce 2026: kompletní průvodce pro malé firmy
Mobile-first už není trend ani volba, je to standard, který rozhoduje o SEO pozicích a tržbách. V roce 2026 přichází přes 70 % návštěvníků z mobilu, Google indexuje weby primárně podle jejich mobilní verze a uživatelé jsou neúprosní. Web, který není mobile-first, ztrácí dvě třetiny zákazníků a klesá ve vyhledávání. Tady je kompletní průvodce, co dělat.
Co je mobile-first a co se změnilo v roce 2026
Definice: navrhujeme od nejmenší obrazovky nahoru
Mobile-first design znamená, že vývoj webu začíná u mobilní verze. Designér nejdřív navrhne, jak web vypadá na telefonu, a teprve potom rozšiřuje layout pro tablet a desktop. Opak (desktop-first) znamená navrhnout web na monitor a pak ho stlačit do mobilu, což skoro nikdy nefunguje dobře. Mobile-first není o tom, že web má fungovat na mobilu, to je responsive. Mobile-first je o tom, že mobil je hlavní cílovka.
Co je nového v roce 2026
Tři velké posuny od roku 2024: 1. Google Core Web Vitals INP (Interaction to Next Paint) nahradilo FID a je mnohem přísnější, měří interaktivitu po celou dobu návštěvy. 2. Container queries v CSS umožňují responsive design na úrovni komponent, ne jen celé stránky. 3. View transitions API umožňují plynulé přechody mezi stránkami i bez SPA, to mění očekávání uživatelů.
5 pilířů mobile-first designu
1. Typografie čitelná bez zoomu
Minimum 16px font-size pro běžný text. Nadpisy 22 až 32px. Řádkování (line-height) minimálně 1.5. Žádné šedé texty na šedém pozadí, kontrast minimálně 4.5:1 podle WCAG. Test: otevřete web na telefonu, drží telefon v ruce, ne 10 cm od očí. Pokud potřebujete přibližovat, typografie selhává.
2. Touch targety větší než prst
Apple HIG doporučuje minimum 44×44 pixelů pro tlačítko. Material Design 48×48. V roce 2026 doporučujeme 48px jako standard. Mezi tlačítky minimum 8px mezera. Žádné drobné odkazy v patičce, na které se nedá kliknout. UX a klikací plochy jsou neoddělitelné.
3. Performance jako designové rozhodnutí
Mobilní sítě jsou pomalejší než wifi. Telefon má slabší procesor. Každý 1 MB obrázek navíc = 0,5 sekundy načítání na 4G. Mobile-first znamená šetřit data: WebP nebo AVIF místo JPEG, lazy loading, font-display: swap, žádné zbytečné JavaScript knihovny. Cíl: LCP pod 2,5 sekundy na 4G.
4. Navigace, která funguje palcem
Hamburger menu? Ano, ale s hlavním CTA viditelným i bez otevření menu. Hlavní akce (telefon, "objednat", "kontakt") musí být dosažitelné palcem v dolní třetině obrazovky, to je tzv. "thumb zone". Sticky CTA bar dole je v roce 2026 standardem pro service businesses.
5. Formuláře pro palec, ne myš
Maximum 3 až 4 pole na mobilu (víc nikdo nevyplní). Správné input type (tel, email, number), telefon zobrazí správnou klávesnici. Autocomplete atributy pro adresu a kontakt. Žádné CAPTCHA, které nejdou kliknout. Validace v reálném čase, ne až po odeslání.
Mobile-first vs. responsive vs. adaptive
| Pristup | Jak funguje | Vhodne 2026? |
|---|---|---|
| Mobile-first responsive | Navrh od mobilu, jeden HTML/CSS | Ano, standard |
| Desktop-first responsive | Navrh od desktopu, prizpusobeni mobilu | Zastarale |
| Adaptive (m. subdomena) | Samostatna mobilni verze m.web.cz | Nedoporuceno |
| AMP (Accelerated Mobile) | Specialni format od Googlu | Google ho opustil 2022 |
| PWA (Progressive Web App) | Web, ktery se chova jako aplikace | Ano, pro e-shopy |
Praktický checklist mobile-first webu 2026
- Hero sekce s jasnou nabídkou viditelná hned bez scrollu (above the fold)
- Telefonní číslo klikací (tel:) v hlavičce a sticky CTA dole
- Font-size minimum 16px, line-height 1.5+
- Tlačítka minimum 48×48px, mezi tlačítky 8px+
- Obrázky WebP/AVIF s lazy loading
- Core Web Vitals: LCP pod 2,5s, INP pod 200ms, CLS pod 0,1
- Žádné horizontální scrollování, obsah se vejde do šířky
- Hamburger menu se zobrazí do 100ms po kliknutí
- Formuláře s autocomplete a správným input type
- Test na reálném telefonu (ne jen Chrome DevTools)
Jak otestovat, jestli je váš web skutečně mobile-first
| Test | Nastroj | Cilove hodnoty |
|---|---|---|
| Mobilni pripravenost | search.google.com/test/mobile-friendly | Pass bez chyb |
| Core Web Vitals | pagespeed.web.dev (mobil) | Score 90+ |
| LCP (nacitani) | PageSpeed Insights | Pod 2,5s |
| INP (interaktivita) | PageSpeed Insights | Pod 200ms |
| CLS (stabilita) | PageSpeed Insights | Pod 0,1 |
| Skutecny telefon | Vas iPhone/Android | Plynuly, citelny, klikaci |
| Heatmapa kliku | Microsoft Clarity (zdarma) | Lide klikaji na CTA |
Časté chyby, kterým se vyhněte
- Tlačítko "Hlavní menu" 16px tall, nikdo na něj netrefí
- Carousel s 5 obrázky, který nikdo nepřeswipuje
- Video autoplay s 30 MB, sežere data zákazníka
- Cookies banner přes půl obrazovky bez křížku
- Chat widget, který překrývá CTA tlačítko
- Slidery, ve kterých nejde rolovat textem
- PDF místo HTML stránky (na mobilu nečitelné)
Stavíme weby mobile-first od prvního pixelu, live za 7 dní od 12 900 Kč
Náhled zdarma, uvidíte svůj nový web v mobile-first verzi dřív, než cokoliv zaplatíte.
Náhled zdarma → getwebify.studio