Odsazení na mobilních zařízeních — omezené místo

Jak zachovat čistotu designu i na malých obrazovkách, když je místa méně. Trik je vědět, co se dá zmenšit.

8 min čtení Střední pokročilost Březen 2026

Mobilní telefon zobrazující responzivní design s dobře vyvážením prostoru a čistými okraji

Mobilní obrazovka je jiný svět. Nemáte 1440 pixelů na šířku — máte 375. To znamená, že každý pixel počítá a odsazení se chová úplně jinak. Tady není místo na rozpínavé okraje, ale — a to je klíčové — nemusíte je ani vzdávat.

Problém není nedostatek místa. Problém je, když na mobilu aplikujete stejné odsazení jako na desktopu a design se sesype. Zmenšit marginalia není porušení pravidel bílého prostoru — je to jejich správné pochopení.

Základní rozdíl

Na desktopu vytváříte prostor, aby se obsah mohl „dýchat”. Na mobilu vytváříte prostor, aby obsah byl dosažitelný. Není to rozpor — je to evoluce téže myšlenky.

Jak se mění proporce odsazení

Na 1440pixelovém desktopu si můžete dovolit okraje kolem obsahu, které jsou třeba 120 pixelů. To je asi 8% z šířky. Na 375pixelovém mobilu je 8% jen 30 pixelů — a to je příliš málo. Chcete-li aby design vypadal čistě, potřebujete relativně větší odsazení.

Praktické číslo? Na mobilu počítejte s 16-20 pixely na stranách. Není to okraj, který si vezete ze desktopu. Je to bezpečná zóna pro obsah, která zabraňuje tomu, aby se text lepil na okraj obrazovky. Vypadá to jako méně, ale působí čistě.

Klíčové poměry

Desktop (1440px): margin 60-120px = čitý prostor
Tablet (768px): margin 24-40px = zachovejte hierarchii
Mobil (375px): margin 16-20px = zůstane čistý

Srovnání rozměrů odsazení na různých velikostech obrazovek, zobrazující responsive design schéma

Fotografie ruky držící smartphone se zobrazeným minimalistickým designem článku

Mezi řádky — co zmenšovat nesmíte

Tady přichází chyba, kterou dělá spousta designérů. Začnou zmenšovat všechno — okraje mezi sekcemi, výšku řádků, odsazení mezi prvky. A design se najednou cítí stísněně. Není to proto, že je malý. Je to proto, že nemá dech.

Co zmenšovat můžete: horizontální okraje, padding v kartách. Co ne: line-height (výška řádků), gap mezi prvky v seznamu, padding mezi textem a záhlavím. Tyto metery jsou stejně důležité na mobilu jako na desktopu. Jsou to věci, které čtenáři podvědomě čtou.

Praktické pravidlo? Nejdřív zmenšete šírku. Pak zmenšete horizontální okraje. Pak zmenšete padding v jednotlivých kartách. Ale vertikální rytmus — odsazení mezi sekcemi, řádkování — to si ponecháte.

Poznámka

Hodnoty v tomto článku jsou orientační a vycházejí z aktuálních trendů v responzivním webdesignu. Každý projekt je unikátní — vaše ideální odsazení se může lišit v závislosti na obsahu, typografii a cílové skupině. Doporučujeme vždy testovat váš design na skutečných zařízeních.

Testování na skutečných zařízeních

Tohle je věc, kterou si všichni řeknou, ale málokdo dělá: otestujte to na skutečném telefonu. Ne v Chrome DevTools. Na skutečném zařízení, s vaší aplikací, s vaší sítí. Pak poznáte, co opravdu funguje.

V DevTools si myslíte, že 16px okraj stačí. Na telefonu vidíte, že ne — text se dotýká okraje obrazovky v určitých úhlech. Nebo si myslíte, že tlačítko je dostatečně velké, ale na mobilu v rukou zjistíte, že ne. Skutečnost je prostě přesnější.

Otestujte na nejméně třech různých zařízeních — malém mobilu (320px), středně velkém (375px) a větším (414px).

Podívejte se na landscape orientaci. Tam se proporce úplně změní a odsazení se chová jinak.

Otestujte s skutečným obsahem. Zkrácený text v designu je jiný než text v reálném světě.

Pracovní prostor designéra s notebookem a několika mobilními telefony zobrazujícími tytéž webové stránky v různých rozměrech

Mobil v ruce uživatele s webem zobrazeným v landscape orientaci, ukazující jak se mění design s otočením

Odsazení v landscape módu

Landscape je ta zapomenutá orientace. Někdo ji ignoruje, někdo ji zlehčuje. Ale když někdo otočí mobil do strany, design by měl pracovat stejně dobře jako v portrétním módu.

V landscape módu máte šíři třeba 667 pixelů, ale výšku jen 375. To znamená, že obsah se musí vejít svisle. Odsazení mezi sekcemi se často musí zmenšit — ne proto, že by design měl být špatný, ale proto, že vertikální prostor je vzácný. Zůstávejte ale konzistentní: pokud je padding mezi sekcemi na desktopu 60px, na landscape mobilu to může být 30px, ale mělo by to být stejné číslo na všech landscape zařízeních.

Shrnutí: odsazení jako nástroj, ne omezení

Mobilní obrazovka není malá verze desktopu. Je to jiný médium se svými vlastními pravidly. Odsazení tam není luxus — je to nutnost. Ale není to ani něco, co byste měli obávat.

Klíč je vědět, co měníte a proč. Zmenšujete okraje? OK. Ale ponechte si rytmus, hierarchii a dech. Testujte na skutečných zařízeních. A pamatujte si, že každý pixel, který dáte obsahu, zabere prostor od odsazení — takže buďte chytrí v tom, co do obsahu vložíte.

Opravdu to není těžké. Jen to vyžaduje trpělivost a rozhodnost. Když se vám podaří dostat odsazení na mobilu správně, design bude vypadat stejně čistě jako na desktopu. Jen bude menší. A to je přesně to, co chcete.