Definícia
Responsive design (responzívny dizajn) je prístup k tvorbe webu, pri ktorom sa rozloženie, veľkosť textu aj obrázkov automaticky prispôsobujú veľkosti obrazovky zariadenia – od mobilu cez tablet až po veľký monitor.
Popis
Technicky sa responsive design dosahuje pomocou CSS media queries, ktoré menia štýl stránky podľa šírky obrazovky, a flexibilných mriežok postavených na relatívnych jednotkách namiesto pevných pixelov. Vďaka tomu sa napríklad trojstĺpcové rozloženie na desktope na mobile automaticky zmení na jeden stĺpec pod sebou.
Responsive design je dnes štandardom najmä preto, že väčšina návštev webov prichádza z mobilných zariadení a Google pri indexovaní aj hodnotení webu vychádza primárne z jeho mobilnej verzie (mobile-first indexing). Stránka, ktorá sa na mobile nezobrazuje správne, tak stráca návštevnosť aj pozície vo vyhľadávaní a zhoršuje si aj Core Web Vitals.
Od responsive dizajnu treba odlíšiť adaptívny dizajn, ktorý namiesto jedného plynulého rozloženia ponúka niekoľko vopred pripravených pevných verzií stránky pre konkrétne šírky obrazoviek – napríklad zvlášť pre mobil, tablet a desktop.
Responsive design vo WordPresse
Väčšina moderných šablón aj page builderov, napríklad Elementor, generuje responsive layout automaticky a umožňuje upraviť vzhľad zvlášť pre desktop, tablet aj mobil. Aj pri automaticky responzívnej šablóne sa však oplatí každú novú stránku vo WordPresse otestovať na reálnych zariadeniach alebo v náhľade prehliadača – najmä dlhšie texty, tabuľky a vnorené stĺpce sa dokážu na malej obrazovke rozpadnúť aj pri responzívnej šablóne.