Mobile-first přístup: Praktický návod pro začátečníky

Jak správně stavět webové stránky od nejmenších obrazovek. Obsahuje reálné příklady kódu a běžné chyby, kterým se vyhnout.

Březen 2026 12 min čtení Začátečník

Vývojář pracující na notebooku s kódem na obrazovce, minimalistická kancelář s dvěma monitory

Proč je mobile-first přístup důležitý?

Už není tajemství, že více než 60% návštěvníků přichází na weby právě z mobilů. A přestože se to řekne snadno, mnoho vývojářů stále staví stránky od počítače směrem dolů. To je opačný přístup — a právě na tom se dnes zaměřujeme.

Mobile-first není jen o responzivnosti. Jde o fundamentální změnu v myšlení. Nejdřív myslíte na malou obrazovku, pak postupně přidáváte funkce a layout pro větší zařízení. Proč? Protože je to jednodušší, rychlejší a na konci máte lepší výsledek. Zkušenost uživatele na mobilu bude solidní, ne jen “něco, co se vejde”.

Smartphone zobrazující responzivní webový design s čitelnými prvky a dobrým rozestupem

Skici designu na papíře ukazující wireframing proces pro mobilní a desktopové rozlišení

Jak to funguje v praxi?

Začínáte s mobilem. Typicky rozlišení kolem 375px — to je standardní šířka moderního telefonu. Napíšete HTML, stylujete CSS tak, aby to vypadalo dobře na malé obrazovce. Pak postupně přidáváte breakpointy — ta magická místa, kde se layout mění.

Váš CSS kód bude vypadat nějak takto: nejdřív základní styly pro mobil, pak @media (min-width: 768px) pro tablet a nakonec @media (min-width: 1024px) pro desktop. Jde o přidávání, ne odebírání. To je klíčový rozdíl. Máte kontrolu, přesně víte, co se děje na každé velikosti.

Není to těžké, je to jen jiný úhel pohledu. Už po pár projektech si na to zvyknete a řeknete si, jak jste dřív stavěli stránky jinak.

Flexbox pro layout

Flexbox je váš nejlepší kamarád. Díky němu se prvky přizpůsobují šířce obrazovky bez zbytečného kódu. Prvky se zalamují automaticky — to je přesně to, co chcete na mobilu.

Jednotky relativní, ne fixní

Zapomeňte na pixely, kde to jde. Používejte rem, em, procenta. Písmo se pak přizpůsobuje kontextu. Čím je obrazovka menší, tím menší text — bez explicitního zásahu z vaší strany.

Obrázky, které se přizpůsobují

Obrázek s max-width: 100% a height: auto se na mobilu nezmenší jen mechanicky — změní se proporcionálně. Na desktopech pak zůstane čitelný bez rozmazání.

Viewport meta tag

Bez tohoto řádku se mobil tváří, že je to desktop a všechno zmenší. Jeden řádek v head sekci — <meta name="viewport" content="width=device-width, initial-scale=1"> — a problém je vyřešen.

Media queries ve správném pořadí

Nejdřív mobil bez media queries. Pak přidáváte tablet a desktop. Nikdy se nevracíte zpátky — to by byla spaghetti kód. Lineárně, postupně, kontrolovaně.

Dostatečné cílové oblasti pro dotyk

Tlačítko na mobilu musí být minimálně 44×44 pixelů. Ne proto, aby to vypadalo hezky — prostě si to uživatel nemůže přesně stisknout, pokud je menší. Malý detail, velký dopad.

Chyby, kterých se každý dopustí

Nemáme na mysli ty zjevné věci — více o těch, které nejsou okamžitě vidět, ale později vám zaberou spoustu času.

Nejčastěji se vidí, když vývojář napíše CSS pro desktop a pak zkusí “opravit” mobil. Skončí se tím, že máte pravidla, která si navzájem odporují. Navíc musíte testovat více verzí, což je zdlouhavé.

Nebo třeba: Zdeňa si vezme fotku o rozlišení 2000×1500 pixelů a vloží ji do sloupce, který je na mobilu 280 pixelů široký. Obrázek se sice vejde, ale trvá věčnost, než se načte. Data se plýtvají, uživatel čeká.

Těchto problémů se snadno vyhnete, když stavíte od mobilu. Nutí vás to přemýšlet — co je opravdu podstatné? Co se vejde do 375 pixelů? Co musím skrýt? Odpovědi na tyto otázky vás navedou správným směrem.

Monitory ukazující špatný a správný design webu na různých velikostech obrazovky, porovnání responzivního a neresponzivního layoutu

Kód editoru zobrazující CSS media queries a HTML strukturu, příklad mobilního a desktopového layoutu

Jednoduchý příklad ze života

Představte si jednoduchou stránku s hlavičkou a dvěma sloupci obsahu. Na mobilu se zobrazují pod sebou. Na tabletu jsou vedle sebe. Na desktopů je hlavička roztažená a sloupce jsou různě proporční.

Kód by vypadal takto: nejdřív napíšete HTML — normálně, bez tříd s názvy jako “desktop-layout” nebo “mobile-only”. Pak CSS — nejdřív základní styl pro mobil, kde jsou sloupce v jedné koloně. Pak breakpoint na 768px, kde se změní na flexbox řadu. To je vše.

Když pak přidáte desktop styly, jste již v kontextu — víte, co máte měnit, protože víte, jak to vypadá na mobilu a tabletu. Není to chaos, je to logické.

Závěr: Jednoduché pravidlo, velký dopad

Mobile-first přístup není nic mystického. Jde o to dělat věci v správném pořadí — nejdřív malá zařízení, pak větší. Výsledkem je web, který funguje všude, je rychlejší a udržitelnější.

Zkuste to na svém dalším projektu. Začněte se skicami na mobilu. Napíšete HTML a CSS bez media queries. Pak postupně přidáte breakpointy. Překvapí vás, jak moc to zjednoduší váš pracovní postup a jak lepší budou konečné stránky.

Chcete se dozvědět víc o responzivním designu a optimalizaci webu? Podívejte se na naše další návody.

Zpět na články

Poznámka o tomto článku

Tento článek je edukační příspěvek zaměřený na seznámení se s principy mobile-first přístupu. Konkrétní implementace se mohou lišit v závislosti na vašem projektu, použitém frameworku a specifických požadavcích. Vždy je doporučeno testovat na skutečných zařízeních a konzultovat s dalšími členy týmu. Web design se vyvíjí — postupujte podle nejnovějších standardů a best practices.