Mobilní Responsive Design Článků

Články se musí dobře číst na malých obrazovkách. Základní techniky, které to zajistí.

8 min čtení Začátečník Únor 2026

Mobilní telefon v ruce ukazující čitelný článek se správným rozložením a optimalizovanou typografií

Proč je mobilní design článků důležitý?

Více než 70 procent čtenářů přichází na články přes mobilní telefony. Když se text špatně čte na malém displeji, lidé ho jednoduše zavřou. Nejde jen o to, aby se obsah vešel na obrazovku — jde o to, aby se četl komfortně.

Dobrý mobilní design není něco extra. Je to základ. Když si uvědomíte, jak čtenáři váš obsah konzumují, začnete navrhovat s tím, že mobil je primární zařízení. Desktop verze pak přijde sama.

Tablet zobrazující články v různých stupních čitelnosti - srovnání dobrého a špatného designu

Základy

Pět základních principů

Když navrhujete článek pro mobilní zařízení, pamatujte na jednu věc: všechno by mělo být jednoduché a čitelné. Není tu místo na zbytečnosti.

1. Šířka textu a délka řádků

Řádek by měl mít zhruba 45 až 75 znaků. Na mobilu to znamená asi 3-4 slova na řádku. Když je text příliš široký, oko se ztrácí. Když je příliš úzký, lidé se unavují stálým přepínáním řádků. Na mobilu je ideální nastavit maximální šířku textu na 90 procent šířky obrazovky, s patřičnými okraji.

2. Velikost písma a čitelnost

Minimální velikost textu by měla být 16 pixelů. Věřte tomu. Není to o tom, aby se vešlo více obsahu na obrazovku. Je to o tom, aby lidé nemuseli zmáčkávat oči. Když si někdo čte článek na telefonu, sedí často v tramvaji nebo v čekárně. Malý text je prostě frustrující.

3. Rozestup řádků a meziřádí

Lineární výška by měla být mezi 1,5 až 1,8. To znamená, že mezera mezi řádky je 1,5 až 1,8 krát větší než samotný text. Na mobilu je to obzvlášť důležité — líp se čte, oči se nenamáhají. Desktop verze může mít trochou menší rozestup, ale nepřekračujte 1,4.

Detailní pohled na typografii článku s viditelným rozestupem řádků a měřením šířky textu

Mobil zobrazující články s optimálním odsazením a mezerami mezi sekcemi

Okraje, odsazení a vzdušnost

Okraje kolem textu nejsou jen dekorace. Jsou to vzdušné zóny, které umožňují oku odpočívat. Na mobilu byste měli mít minimálně 16 pixelů okraje ze všech stran. Větší okraje vypadají lépe — obvykle 24 až 32 pixelů.

Mezi jednotlivými odstavci si dajte dvakrát větší vzdálenost, než je samotné meziřádí. Když máte text o velikosti 16 pixelů s rozestupem 1,6, pak mezi odstavci byste měli mít minimálně 32 pixelů mezer. Tím se články stávají přirozeně organizované a čitelnější.

Stejné pravidlo platí pro nadpisy. Prostor nad nadpisem by měl být asi dvakrát větší než prostor pod ním. Tím se nadpis vizuálně váže k textu, který za ním následuje.

Jak to implementovat v HTML a CSS?

Základem je správná struktura HTML. Nezačínejte design na mobilu pomocí meziproduktů. Řekněte si: jak bude tento obsah vypadat na 375pixelovém iPhonu? To je váš startovací bod.

Responsive typografie pomocí clamp()

Moderní CSS vám umožňuje font, který se automaticky zvětšuje a zmenšuje. Místo média dotazů pro každou velikost, použijte clamp(). Tak se text přirozeně přizpůsobí obrazovce bez skokových změn.

Maximální šířka a center alignment

Na mobilu si vystačíte se 100 procenty šířky. Na tabletu a desktopu ale nastavte maximální šířku na zhruba 65 až 75 znaků na řádek. Použijte margin: auto pro horizontální centrování. Tím se obsah neztratí v prázdné ploše velkých obrazovek.

Obrázky a multimédia

Obrázky musí být responzivní — max-width: 100 procent, height: auto. Nikdy neupevňujte obrázek na pevnou šířku. Dovolte mu, aby se přizpůsobil. Na mobilech jsou obrázky kritické — oni jsou často prvním vizuálním prvkem, který si čtenář všimne.

Kód CSS na obrazovce počítače ukazující responsive typografii a meziery

Několik mobilních telefonů různých velikostí zobrazujících stejný článek

Testování a optimalizace

Netvářte se, že víte, jak to vypadá na mobilu. Otestujte to. Otestujte to na reálném zařízení, ne jen v prohlížeči. Sedněte si s telefonem v ruce a čtěte. Opravdu to čtete? Nebo se text krčí a špatně se s ním pracuje?

Měřte kontrast. Použijte nástroje, které ověří, že váš text je čitelný. Nemluvme jen o barvách — jde o samotný obsah. Je text dostatečně velký? Je dost místa kolem něj? Fungují obrázky?

Nejlepší přístup je nejjednodušší. Začněte s mobil-first designem. Napřed udělejte, aby to fungovalo na malém displeji. Pak si vezměte větší obrazovku a rozšiřujte. Nejde o to, aby váš design vypadal fancily. Jde o to, aby váš obsah byl přístupný všem.

Hlavní body na zapamatování

Text a čitelnost

Minimálně 16 pixelů, rozestup řádků 1,5 až 1,8, okraje kolem textu. To jsou základy, které nesmí chybět.

Rozměry a layout

Maximální šířka řádku 65 až 75 znaků, obrázky responzivní, dostatek mezer mezi sekcemi.

Testování

Otestujte na reálném zařízení. Čtěte sami. Není dost, když víte teoreticky — musíte cítit, jak se to čte.

Mobilní responsive design není trend. Je to nutnost. Když to zvládnete správně, vaši čtenáři si budou vaše články opravdu číst — a ne jen se na ně koukat.

Poznámka o používání

Tato příručka popisuje obecné zásady pro design mobilních článků. Každý projekt má svoje specifika. Technologie se vyvíjejí a doporučení se mění. Používejte tyto pokyny jako startovací bod a vždy si ověřte, co funguje pro vaši konkrétní cílovou skupinu a zařízení. Nejlepší design je ten, který vaši čtenáři testují a které se jim líbí.