Otevřete webovou stránku v telefonu, poté na notebooku a nakonec na televizi. Pokud se na všech třech obrazovkách zobrazuje správně bez štípání nebo mhouření očí, byla vytvořena s responzivním designem. Tento přístup umožňuje jediné kódové základně přizpůsobit rozvržení, obrázky a typografii jakékoli obrazovce, na které se zobrazí.

Termín zavedl Ethan Marcotte v roce 2010, kdy mobilní prohlížení zažívalo obrovský rozmach a designéři stáli před volbou: vytvořit pro každé zařízení samostatné stránky, nebo vytvořit jednu, která se ohýbá. Responzivní design zvítězil. Základními nástroji jsou plynulé mřížky, flexibilní obrázky a mediální dotazy. Mediální dotaz se prohlížeče ptá, jak široký je zobrazovaný prostor, a v závislosti na odpovědi aplikuje různá pravidla CSS.

Co dělá design responzivním

• Proměnlivé mřížky, které používají procenta místo pevných pixelů
• Flexibilní obrázky, které se škálují v rámci svých kontejnerů
• Mediální dotazy, které používají zarážky pro různé velikosti obrazovky
• Dotykové cíle v mobilních rozvrženích

Cílem není jen umístit obsah na malou obrazovku. Jde o zachování čitelnosti, hierarchie a použitelnosti v každém kontextu. Třísloupcové rozvržení na počítači se může na telefonu sbalit do jednoho sloupce. Hamburgerové menu nahrazuje plnohodnotnou navigační lištu. Dobrý responzivní design se zdá být nevyhnutelný, jako by web měl na vašem zařízení vždycky vypadat takto.