Responsive Design

Responzivní design je přístup k webovému designu zajišťující, že se weby a aplikace plynule přizpůsobí různým velikostem obrazovek, zařízením a orientacím. Využívá flexibilní gridy, pružné obrázky a CSS media queries, aby poskytl optimální zážitek ze zobrazení od desktopových monitorů po mobilní telefony. Místo budování samostatných webů pro každé zařízení jedna kódová základna přeskupuje a mění velikost obsahu podle rozměrů viewportu.

Technický základ stojí na třech pilířích: pružných gridových layoutech používajících relativní jednotky jako procenta místo pevných pixelů, flexibilních médiích, která se škálují v rámci svého kontejneru, a CSS media queries, které na definovaných breakpointech aplikují různé styly. Moderní CSS funkce jako Flexbox, Grid a container queries tuto sadu nástrojů výrazně rozšířily. Responzivní design dnes zohledňuje i rozdíly ve způsobu ovládání, velikost dotykových cílů a proměnlivé podmínky sítě na mobilních zařízeních. Google používá mobile-first indexování, tedy pro hodnocení posuzuje primárně mobilní verzi webu, takže responzivní implementace přímo ovlivňuje viditelnost ve vyhledávání a organickou návštěvnost.