Responzivní design — základy pro mobily

Více než polovina uživatelů přistupuje na web z mobilu. Váš web musí být připravený. Tady se dozvíte jak.

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

Mobilní telefon a tablet s responzivním webdesignem zobrazeným na obrazovkách

Proč je responzivní design nezbytný

Před deseti lety bylo téměř všechno o desktopu. Dnes? Web se živí na mobilech. Když vás někdo navštíví ze svého telefonu a váš web vypadá jako papír zmačkaný v kapse — prostě to nefunguje. Stránky se zobrazují špatně, texty jsou nečitelné, tlačítka nejde stisknout.

Responzivní design není žádné čarování. Je to jednoduše způsob, jak si web připraví na všechny velikosti obrazovek — od malého telefonu přes tablet až po velký monitor. Když to uděláte správně, váš web bude fungovat všude stejně dobře.

                  65%
                
                  návštěv z mobilu

                  3 sekundy
                
                  čas, než odejdou

                  320px
                
                  nejmenší šířka

Tři pilíře responzivního designu

Nemusíte znát všechny techniky programování. Responzivní design se opírá o tři základní principy, které si můžete zapamatovat bez problému.

Pružné mřížky (Fluid Grids)

Místo fixních pixelů používáte procenta. Prvky na stránce se automaticky přizpůsobují šířce obrazovky. Není to pevná struktura — je to živá, pružná mřížka.

Flexibilní obrázky (Flexible Images)

Obrázky se nesmí rozpínat větší než jejich kontejner. Na velkých obrazovkách jsou velké, na malých se zmenší. Vždy sedí do prostoru, který mají k dispozici.

Media Queries (Dotazy na médium)

Jsou to CSS pravidla, která říkají: „Na telefonu udělej to, na tabletu udělej tohle, na desktopu něco úplně jiného.” Přizpůsobují se právě velikosti obrazovky.

Různé velikosti obrazovek zařízení ukazující breakpointy responzivního designu

Breakpointy — kde se design mění

Breakpoint je hranice. V jednom bodě řeknete: „Od tady bude design jiný.” Když víte, kde jsou hlavní breakpointy, zbývá už jen navrhnout design pro každou velikost.

Mobil 320–480px

Jeden sloupec. Všechno pod sebou. Dotyk, ne myš.

Tablet 481–768px

Dva sloupce začínají dávat smysl. Více místa na šířku.

Desktop 769px+

Tři sloupce, bohatší rozvržení. Celá síla vašeho designu.

Praktické tipy pro začátek

Když se chcete vrhnou do responzivního designu, není potřeba znát všechno hned. Tady jsou čtyři konkrétní věci, které vás navedou správným směrem.

Začněte s mobilem

Navrhujte nejdříve pro telefon. Jednoduché, jasné, bez zbytečností. Pak přidávejte prvky pro větší obrazovky. Není to opak — mobil jde PRVNÍ.

Flexibilní jednotky, ne pixely

Použijte procenta, em nebo rem místo pevných pixelů. Když řeknete šířka: 50%, prvek se vždycky přizpůsobí. Pixely jsou tuhé, procenta jsou pružná.

Obrázky vždy max-width: 100%

Když přidáte obrázek, řekněte mu: „Nikdy nebuď větší než tvůj kontejner.” Jednoduché CSS pravidlo, které zachrání spoustu problémů.

Testujte na opravdových zařízeních

Nejednoduše v prohlížeči. Vezměte si opravdový telefon a podívejte se. Jak se to chová na Android? Na iPhone? Rozdíly jsou. Musíte to vidět.

Webdesigner testuje responzivní design na fyzických zařízeních

Nástroje, které vám pomohou

Abyste nemuseli všechno programovat sami, existují hotové nástroje a frameworky. Ušetří vám čas a pomohou vám se neztratit.

Bootstrap

Nejznámější CSS framework. Má předpřipravené mřížky a komponenty. Začínáte-li, je to skvělý pomocník.

Tailwind CSS

Novější přístup. Místo hotových komponent dostáváte malé stavební bloky, které skládáte sami. Více práce, ale více kontroly.

Chrome DevTools

Vestavěný nástroj v prohlížeči. Stiskněte F12 a vidíte, jak web vypadá na všech velikostech. Zdarma a bezpečně.

Figma

Pro designery. Můžete prototypovat responzivní layout před tím, než začnete kódovat. Spolupráce je snadná.

Responsively App

Speciální aplikace na testování. Vidíte web najednou na 20 různých velikostech obrazovek. Ideální pro ověřování.

Mobile-Friendly Test

Nástroj od Googlu. Vložíte adresu a vidíte, jestli je váš web přátelský k mobilům. Dostanete konkrétní tipy na zlepšení.

Chyby, kterých se vyvarujete

Když jsme všichni začínali, dělali jsme stejné chyby. Tady jsou ty nejčastější — a jak se jim vyhnout.

“Responzivní design není o tom, že web vypadá stejně na všech zařízeních. Je to o tom, že funguje všude dobře.”
— Designová moudrost

Zapomenout na dotykové prvky: Tlačítko, které funguje s myší, nemusí fungovat s prstem. Zvětšete ho, dejte mu místo kolem sebe.
Ignorovat orientaci obrazovky: Někdo obrátí telefon na stranu — váš web se musí přizpůsobit oběma orientacím.
Přetěžovat malou obrazovku: Jen proto, že se vše vejde, neznamená, že by tam mělo být. Na mobilu méně je více.
Zapomenout testovat: Netvrdíte, že je to responzivní. Ověřte si to. Sami. Na opravdových zařízeních.

Mobilní telefon ukazující chyby v responzivním designu a jejich řešení

Začněte dnes

Responzivní design není budoucnost. Je to přítomnost. Polovina vašich návštěvníků používá mobil — nebo víc. Když jim nabídnete web, který na mobilu nefunguje, prostě si ho nevšimnou. Odejdou k někomu jinému.

Dobrá zpráva? Není to těžké. Tři pilíře — pružné mřížky, flexibilní obrázky, media queries. Breakpointy pro mobil, tablet, desktop. Testování na opravdových zařízeních. To je základ. Zbývá jen začít.

Chcete se dozvědět víc o webdesignu? Podívejte se na naše další návody.

Prohlédnout všechny články

Upozornění

Tento článek je čistě vzdělávací a informativní. Popisuje obecné principy a nejlepší praktiky v responzivním designu. Konkrétní implementace se mohou lišit v závislosti na technologiích, které používáte, a vaších specifických potřebách. Vždy si ověřte aktuální dokumentaci nástrojů a frameworků, které používáte. Autoři tohoto textu nejsou zodpovědní za jakékoli chyby nebo problémy, které mohou nastat v důsledku následování těchto pokynů.