Jeden web, mnoho obrazovek. Responzivní design umožňuje, aby se jedno rozvržení přizpůsobilo různým velikostem a orientacím zařízení. Termín zavedl Ethan Marcotte v roce 2010 a navázal na dřívější myšlenky o flexibilních mřížkách a plynulých obrázcích. Místo vytváření samostatných webů pro stolní počítače a mobilní zařízení vytvářejí designéři jednu kódovou základnu, která se sama přeskupuje na základě šířky zobrazovacího pole.

Funguje to díky třem technickým ingrediencím. Proměnlivé mřížky používají procenta místo pevných pixelů, takže sloupce se roztahují a zmenšují. Flexibilní obrázky se v rámci svých kontejnerů škálují. Mediální dotazy detekují velikost obrazovky a v definovaných zarážkách aplikují různá pravidla CSS. Třísloupcové rozvržení na ploše se na telefonu může sbalit do jednoho sloupce, přičemž navigace se přesune do hamburgerového menu. Cílem není dokonalé ovládání na úrovni pixelů, ale elegantní adaptace.

Základní techniky

• Proměnné mřížky založené na procentech.
• Flexibilní obrázky a média.
• Mediální dotazy v definovaných zarážkách.
• Upřednostňování obsahu pro mobilní zařízení.

Responzivní design je dnes standardní praxí. Uživatelé očekávají, že web bude fungovat, ať už ho otevřou na telefonu, tabletu, notebooku nebo televizi.