Responzívna webová stránka je navrhnutá tak, aby reagovala a prispôsobovala dizajn jednotlivých elementov na stránke podľa veľkosti zariadenia, ktoré používa návštevník stránky. Je to v podstate jeden dizajn webovej stránky, ktorý bude vyzerať dobre v akejkoľvek veľkosti - čiže na všetkých zariadeniach od veľkého monitoru stolného počítača, na notebooku, až po menšie obrazovky, ktoré používame na mobilných telefónoch a tabletoch.
Responzívny dizajn pozostáva zo zmesi flexibilných rozložení, obrázkov a inteligentného využívania mediálnych dopytov CSS. Keď používateľ prechádza z prenosného počítača na tablet, webová stránka by sa mala automaticky prepnúť, aby sa prispôsobila rozlíšeniu, veľkosti obrázka, textu a ďalších elementov.
Ďalším nastavením responzívneho dizajnu webu je použitie relatívnych hodnôt v maximálnej možnej miere na rozdiel od pevných atribútov, ako je šírka. To umožňuje škálovať obsah podľa zariadenia a platformy, ktorú čitateľ webovej stránky práve používa.
Príklad nastavenia responzívneho dizajnu
Napríklad pri prezeraní na stolnom počítači môžu webové stránky zobrazovať tri stĺpce. Ak si však rovnaké rozloženie prezeráte na menšom tablete, môže vás to prinútiť vodorovne posúvať obsah, čo sa používateľom nemusí páčiť. Taktiež prvky môžu byť skryté alebo skreslené, tým pádom si používateľ nedokáže prečítať obsah na stránke. Dizajn je komplikovaný aj tým, že mnohé tablety je možné prezerať na výšku alebo otočenú do strany, aby sa zobrazil výhľad na šírku.
Na malej obrazovke smartfónu môžu byť webové stránky ešte náročnejšie. Veľké obrázky môžu rozloženie „zlomiť“. Taktiež aj načítanie stránok do smartfónov môže byť pomalé, ak sú graficky náročné.
Ak však web používa responzívny dizajn, verzia tabletu sa môže automaticky upraviť tak, aby zobrazovala iba dva stĺpce. Takto je obsah čitateľný a ľahko sa s ním dá navigovať. Na smartfónoch sa obsah môže zobraziť ako jeden stĺpec, pravdepodobne naskladaný vertikálne. Prípadne by používateľ mal mať možnosť prejsť prstom a zobraziť ďalšie stĺpce. Ak nastavíme obrázky v relatívnej veľkosti namiesto pevných, obrázok prispôsobí svoju veľkosť zariadeniu, čím predídeme orezaniu alebo skreslenému zobrazeniu obrázkov.
