Responzivní design (Responsive web design)

Příklady z praxe

1. 01

   Produktová mřížka v e-shopu

   E-shop zobrazí na telefonu produkty pod sebou, takže karta má dost místa pro obrázek, cenu i tlačítko. Od šířky 48rem se stejný seznam změní na tři sloupce. Výsledek je jeden HTML výpis bez oddělené mobilní stránky.

   .products {
     display: grid;
     gap: 1rem;
     grid-template-columns: 1fr;
   }
   
   @media (min-width: 48rem) {
     .products {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }

2. 02

   Hlavní obrázek bez zbytečného stahování

   Landing page používá úzký ořez úvodní fotografie na telefonu a široký ořez na desktopu. Prohlížeč nestahuje zbytečně velký desktopový obrázek do mobilu. Stránka se načte rychleji a hlavní motiv zůstane srozumitelný v obou rozvrženích.

   <picture>
     <source media="(min-width: 60rem)" srcset="hero-wide.webp">
     <img src="hero-mobile.webp" alt="Nová kolekce batohů" loading="lazy">
   </picture>

Časté omyly

MýtusStačí udělat mobilní verzi a desktopovou verzi.

Ve skutečnostiResponzivní design obvykle pracuje s jedním rozhraním, které se plynule přizpůsobuje mnoha stavům. Dvě pevné verze nepokryjí tablety, malé notebooky, zoom ani rozdělenou obrazovku.

MýtusMedia query pro každý telefon vyřeší responzivitu.

Ve skutečnostiMedia queries se mají odvozovat od obsahu a rozvržení, ne od katalogu zařízení. Konkrétní modely rychle zastarávají a stejný telefon může mít různé efektivní šířky podle nastavení a orientace.

MýtusResponzivní design je jen práce grafika.

Ve skutečnostiResponzivní design zasahuje návrh, HTML strukturu, CSS, obrázky, výkon i testování. Grafický návrh určí směr, ale kvalitu výsledku rozhoduje i implementace a reálné chování v prohlížeči.

Časté dotazy

Je lepší začít responzivní design mobile-first?

Mobile-first přístup je u responzivního designu často výhodný, protože nutí nejdřív vyřešit obsah, hierarchii a výkon v nejtěsnějším prostoru. Větší rozvržení se potom přidává jako rozšíření, ne jako záchrana přeplněného desktopového návrhu. Desktop-first může dávat smysl u interních nástrojů primárně používaných na velkých monitorech, ale i tam je potřeba ověřit menší viewporty.

Kolik breakpointů má responzivní design obvykle mít?

Počet breakpointů v responzivním designu nemá pevné správné číslo. Breakpoint má vzniknout tam, kde se konkrétní obsah láme špatně: text má příliš dlouhé řádky, karta se nevejde, tabulka ztrácí čitelnost nebo navigace zabírá moc místa. Menší počet dobře odůvodněných breakpointů bývá udržitelnější než dlouhý seznam šířek pro jednotlivá zařízení.

Ovlivňuje responzivní design SEO?

Responzivní design může SEO pomoci, protože stejná URL obslouží mobilní i desktopové uživatele a vyhledávač nemusí porovnávat oddělené verze. Samotná responzivita ale nestačí. Vyhledávače i uživatelé stále vnímají rychlost načítání, čitelnost obsahu, dostupnost odkazů, správné vykreslení důležitých prvků a stabilitu rozvržení při načítání.

Musí responzivní design používat framework jako Bootstrap?

Responzivní design nemusí používat Bootstrap, Tailwind ani jiný framework. Framework může zrychlit práci díky hotovým mřížkám, utilitám a komponentám, ale zároveň přidává konvence a někdy i zbytečný CSS objem. Čisté CSS s Flexboxem, Gridem, media queries a responzivními obrázky stačí pro mnoho projektů, pokud tým drží konzistentní pravidla.

Zdroje

1. Media Queries Level 4(otevře se v novém okně)W3C
2. HTML Standard(otevře se v novém okně)WHATWG
3. Responsive design(otevře se v novém okně)MDN Web Docs
4. CSS Flexible Box Layout Module Level 1(otevře se v novém okně)W3C

Související pojmy

• Core Web VitalsCore Web Vitals je sada uživatelsky orientovaných metrik, kterými Google hodnotí rychlost načtení, odezvu na interakce a vizuální stabilitu webové stránky. V praxi jde hlavně o LCP, INP a CLS, tedy signály, které pomáhají odhalit pomalý obsah, zaseknuté rozhraní nebo poskakující layout.
• Progressive Web AppProgressive Web App je webová aplikace navržená tak, aby se v podporovaném prohlížeči chovala zčásti jako aplikace instalovaná v zařízení. Využívá HTTPS, manifest webové aplikace a service worker pro spouštění z ikony, práci s cache, offline režim a případně notifikace, aniž musí být distribuována přes obchod s aplikacemi.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• A/B testováníA/B testování je řízený experiment, který porovnává dvě varianty stránky, funkce, ceny nebo sdělení na podobných skupinách uživatelů. Měří předem zvolenou metriku, například konverzi nebo retenci, a pomáhá rozhodnout, zda změna skutečně zlepšuje výsledek, nebo zda pozorovaný rozdíl mohl vzniknout náhodou.
• Adaptive IconAdaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.
• Alfa kanálAlfa kanál je složka obrazových dat, která u pixelu určuje míru neprůhlednosti nebo průhlednosti. Doplňuje barevné kanály, typicky RGB, a umožňuje plynulé okraje, stíny, překryvy, masky i skládání vrstev. Hodnota alfa sama neurčuje barvu, ale říká, jak se barva pixelu promíchá s pozadím.
• Alt atributAlt atribut je atribut HTML značky <img>, který nese textovou alternativu obrázku pro situace, kdy uživatel obrázek nevidí. Čtou ho odečítače obrazovky, zobrazí se při nenačtení souboru a vyhledávače z něj odvozují obsah obrázku. Prázdná hodnota alt="" je platná a znamená, že obrázek je čistě dekorativní.
• Anchor textAnchor text je viditelný, klikatelný text odkazu, tedy obsah mezi značkami <a> a </a>. Vyhledávačům i uživatelům popisuje, co najdou na cílové stránce, a spoluurčuje, na jaké dotazy cílová stránka hodnotí. Kvalitní anchor text je krátký, popisný a čitelný i vytržený ze zbytku věty.