Víc než polovina celosvětového webového provozu dnes přichází z mobilních zařízení. Google indexuje weby primárně v jejich mobilní verzi. A přesto stále vznikají weby, které „na mobilu fungují" – jen zmenšují desktopovou verzi a doufají, že to bude stačit. Nestačí. Pojďme si vysvětlit proč a co dělat správně.

Co je responzivní design?

Responzivní webový design (RWD) je přístup, při kterém se web automaticky přizpůsobuje velikosti obrazovky, na které je zobrazován. Stejný HTML kód se díky CSS a JavaScriptu zobrazuje jinak na mobilu (360px šíře), tabletu (768px) i velkém monitoru (1440px a více).

Responzivní web:

Mobile-first: správný přístup k návrhu

Dříve se weby navrhly pro desktop a pak „zmenšovaly" pro mobil. Dnešní best practice je mobile-first – návrh začíná nejmenší obrazovkou a postupně přidává prvky pro větší displeje.

Proč mobile-first?

  1. Google Mobile-First Indexing – Google primárně indexuje a hodnotí mobilní verzi webu. Pokud je mobilní verze slabá, celkový ranking trpí.
  2. Nucená prioritizace – malá obrazovka vás donutí zamyslet se nad tím, co je opravdu důležité. Výsledkem je čistší, přehlednější design i na desktopu.
  3. Výkon – mobile-first přístup přirozeně vede k menšímu množství kódu a rychlejším načítání.

Nejčastější chyby při mobilním designu

Příliš malé klikací plochy. Google doporučuje minimálně 48×48 px pro dotykové prvky s dostatečným odstupem. Mačkání drobných tlačítek palcem je frustrující.

Nečitelné písmo. Minimální doporučená velikost pro body text je 16px. Menší texty nutí uživatele přibližovat stránku – špatný signál pro UX i SEO.

Horizontální scrollování. Obsah přesahující šíři obrazovky je klasická chyba. Každý element musí být obsažen v rámci viewportu.

Nevhodné obrázky. Načítání velkých desktopových obrázků na mobilu zbytečně zpomaluje web. Použijte atribut srcset nebo moderní formáty jako WebP a AVIF s odpovídajícími rozměry.

Pop-upy zakrývající obsah. Google od roku 2017 penalizuje intruzivní interstitials (pop-upy) na mobilu, které zakrývají hlavní obsah.

Hamburger menu skrývající klíčové akce. Navigace „schovaná za tři čárky" může snižovat konverze, pokud uživatelé nenajdou, co hledají.

Klíčové techniky responzivního designu

CSS Flexbox a Grid

Moderní CSS layoutové nástroje, které přirozeně zvládají různé šíře obrazovky bez nutnosti JavaScriptu.

Media queries

CSS pravidla, která se aplikují při určité šíři obrazovky:

/* Mobilní základna */
.container { padding: 16px; }

/* Tablet a výše */
@media (min-width: 768px) {
  .container { padding: 32px; max-width: 960px; }
}

/* Desktop */
@media (min-width: 1200px) {
  .container { max-width: 1280px; margin: 0 auto; }
}

Viewport meta tag

Bez tohoto tagu v HTML se mobil snaží zobrazit web jako desktop a celý ho zmenšuje:

<meta name="viewport" content="width=device-width, initial-scale=1">

Moderní formáty obrázků

WebP a AVIF nabízejí stejnou kvalitu při výrazně menší velikosti souboru. Next.js a moderní frameworky je generují automaticky.

Jak testovat mobilní verzi webu?

Dopad na SEO a konverze

Google od července 2019 používá mobile-first indexing ve výchozím stavu pro všechny nové weby. Špatná mobilní verze přímo ovlivňuje:

Studie opakovaně ukazují, že 53 % uživatelů opustí stránku, která se na mobilu načítá déle než 3 sekundy.

Závěr

Responzivní design a mobile-first přístup nejsou trendy – jsou to standardy. Každý nový web musí být navržen s ohledem na mobil jako primární zařízení. Nestačí web zmenšit – je potřeba ho přemyslet pro dotykové ovládání, malou obrazovku a mobilní kontext použití.

Zdroje