V roce 2025 generují mobilní zařízení více než 60 % celosvětového webového provozu. Přesto se stále setkáváme s weby, které mobilním uživatelům přinášejí frustrující zážitek – malé texty, nedostupné menu, drobná tlačítka a horizontální scrollování. Mobile-first design je přístup, který tento problém řeší od základu.
Co je mobile-first design?
Mobile-first je designový a vývojový přístup, při němž začínáte navrhovat pro nejmenší a nejomezenější obrazovku – tedy pro mobilní zařízení – a teprve poté rozšiřujete design pro větší displeje.
Jde o opak tradičního přístupu, kdy se nejprve navrhoval desktop a mobilní verze se dělala „retroaktivně" jako zmenšenina.
Termín popularizoval designér Luke Wroblewski ve své knize z roku 2011. Tehdy byl mobile-first progresivní přístup. Dnes je průmyslovým standardem.
Proč mobile-first?
1. Data mluví jasně
- Přes 60 % webového provozu globálně pochází z mobilů
- Mobilní e-commerce tvoří v roce 2025 přibližně 59 % všech online prodejů
- Mobilní zařízení mají nejvyšší míru opuštění košíku – 85,65 %
Mobilní uživatelé jsou majoritní skupinou – a přitom nejhůře obsloužení.
2. Omezení jako kreativní síla
Navrhovat pro malou obrazovku vás nutí prioritizovat. Co je skutečně nejdůležitější na stránce? Co může zůstat skryto za „Zobrazit více"? Mobile-first přístup automaticky eliminuje vizuální nepořádek a zbytečné prvky.
3. Výkonnostní výhody
Mobile-first vývoj (progressive enhancement) typicky znamená lehčí kód, menší obrázky a rychlejší načítání – což prospívá všem uživatelům, nejen mobilním.
4. Google indexuje mobilní verzi
Od roku 2021 Google přešel na mobile-first indexing – to znamená, že hodnotí a indexuje weby na základě jejich mobilní verze. Špatné mobilní UX má přímý dopad na SEO.
Klíčové principy mobilního UX
Dotyková plocha (touch targets)
Lidský palec má průměrný šíři 44–72 px. Dotyková plocha interaktivních prvků musí být dostatečně velká a mít kolem sebe dostatek prostoru, aby nedocházelo k nechtěným kliknutím. Doporučení:
- Minimum 44 × 44 px (Apple HIG, WCAG 2.2 doporučuje 24 × 24 px jako absolutní minimum)
- Mezery mezi dotykovými prvky alespoň 8 px
Navigace přizpůsobená palci
Většina uživatelů drží telefon jednou rukou a pohybuje palcem. Klíčové akce by měly být dosažitelné v dolní části obrazovky (tzv. „thumb zone"), ne v horních rozích.
Typografie čitelná bez zoomování
- Minimální velikost textu pro čtení: 16 px
- Dostatečný řádkový odstup (line-height 1.4–1.6)
- Dostatečný kontrast (min. 4,5:1)
Formuláře přizpůsobené mobilu
- Správný typ klávesnice pro každé pole (tel, email, number)
- Velká dotyková plocha pro výběr (custom dropdown vs. nativní select)
- Autofill a podpora pro password managers
Rychlost načítání
Na mobilním připojení je čas klíčový:
- Optimalizujte obrázky (WebP, lazy loading)
- Minimalizujte JavaScript
- Cílete na Core Web Vitals – LCP pod 2,5 s
Gesta a navigace
Zvažte nativní gesta: swipe pro navigaci v galerii, pull-to-refresh pro aktualizaci, pinch-to-zoom pro obrázky. Ale nevymýšlejte vlastní nestandardní gesta – uživatelé na ně nejsou zvyklí.
Jak na mobile-first v praxi?
V designu
- Začněte wireframem pro mobil (320–375 px)
- Definujte breakpointy a rozšiřujte layout pro tablet (768 px) a desktop (1200+ px)
- Testujte prototypy na reálných zařízeních, ne jen v emulátoru prohlížeče
Ve vývoji
- Pište CSS s mobile-first přístupem: základní styly platí pro mobil,
@media (min-width: 768px)přidává desktop layout - Používejte flexbox a CSS grid pro adaptivní layouty
- Implementujte lazy loading pro obrázky
Nejčastější chyby mobilního designu
- Příliš malé touch targety – uživatelé klikají vedle
- Horizontální scrollování – nikdy ne (pokud to není záměr, jako v galerii)
- Pop-upy – na mobilech jsou obzvláště frustrující; Google je penalizuje v SEO
- Nezapouzdřené navigace – hamburger menu skrývající příliš mnoho položek
- Neoptimalizované formuláře – nativní klávesnice pro nesprávný typ vstupu
Závěr
Mobile-first není módní trend – je to odpověď na realitu, v níž žijeme. Uživatelé jsou na mobilních zařízeních a firmy, které jim neposkytnou kvalitní mobilní zážitek, přicházejí o zákazníky. Začněte navrhovat pro mobil a vše ostatní se stane jednodušším.
