Mobile-first
Také známo jako Mobile-first design, Progressive enhancement
Stručně
Navrhněte nejdřív pro nejmenší obrazovku a pak přidávejte, co se na větší vejde — ne naopak.
Mobile-first je omezení, ne preference. Začínáte na 320–360 px, kam se vejde jedině to podstatné, a to vynutí hierarchii: co jde na obrazovku první, co může počkat v menu a co tam nemá být vůbec. Větší layouty pak jen přidávají místo a detail — media queries s `min-width`, které se skládají nahoru.
V českém provozu mají telefony většinu
Většina českých spotřebitelských webů vidí většinu návštěv na telefonu a u e-shopů je to nejvíc vidět — lidé porovnávají ceny a nakupují cestou v tramvaji, ne u notebooku. Všimněte si, že telefon je zároveň pomalejší zařízení a horší síť: publika s největším podílem je publikum v nejhorších podmínkách.
Proto jdou mobile-first a výkon ruku v ruce. Navrhovat pro telefon znamená udělat dobrý zážitek na 320 px, ne přijmout zmenšenou verzi desktopu. Když je hlavní persona člověk v kanceláři na 27palcovém monitoru, mobile-first pořád funguje jako sada omezení — jen to není místo, kde uživatel tráví den.
Dvě věci, které mobile-first neznamená
Neznamená „ořezat, dokud se to nevejde“. Mobilní verze není degradovaná verze pro lidi, kteří si zaslouží méně; je to verze, kde konečně vidíte, co je podstatné. Když na telefonu nestačí cena, dodání a tlačítko do košíku, je to fakt o produktu, ne o obrazovce.
Nejde jen o šířku. Dotykové cíle alespoň 24×24 px (komfortně 44×44 px), žádné akce jen na hover, klávesnice otevírající se přes input, sticky hlavička žeroucí 20 % z 640 px viewportu a pomalé 4G ve vlaku — to všechno je součást stejného testu. Při vývoji od desktopu na to nenarazíte, dokud nepřijde QA.
Zdroje
Související pojmy
Responzivní design
Jeden layout, který se přizpůsobí obrazovce, místo tří samostatných webů — a musí přežít 320 px i 4K monitor.
Core Web Vitals
Tři metriky z reálného provozu: LCP pro načtení, INP pro odezvu a CLS pro vizuální stabilitu.
Lazy načítání
Načtěte obrázek, stránku nebo těžkou komponentu až ve chvíli, kdy ji bude potřeba — ne při načtení stránky.