Nyiss meg egy weboldalt a telefonodon, majd egy laptopon, végül egy tévén. Ha mindhárom képernyőn jól néz ki csippentés vagy hunyorgás nélkül, akkor reszponzív dizájnnal készült. A megközelítés lehetővé teszi, hogy egyetlen kódbázis az elrendezését, képeit és tipográfiáját ahhoz a képernyőhöz igazítsa, amelyre megjelenik.

Ethan Marcotte alkotta meg a kifejezést 2010-ben, amikor a mobilböngészés robbanásszerűen terjedt, és a tervezők választás elé kerültek: minden eszközhöz külön webhelyet készítsenek, vagy egy rugalmasabbat. A reszponzív design győzött. Az alapvető eszközök a folyékony rácsok, a rugalmas képek és a médialekérdezések. A médialekérdezés megkérdezi a böngészőtől, hogy milyen széles a nézetablak, és a választól függően különböző CSS-szabályokat alkalmaz.

Mitől lesz reszponzív egy design?

• Folyékony rácsok, amelyek fix pixelek helyett százalékokat használnak
• Rugalmas képek, amelyek a konténereiken belül méretezhetők
• Különböző képernyőméretekhez töréspontokat alkalmazó médialekérdezések
• Érintésbarát célpontok mobil elrendezéseken

A cél nem csupán a tartalom kis képernyőre való elfértetése. Az olvashatóság, a hierarchia és a használhatóság megőrzése minden kontextusban. Egy három oszlopos asztali elrendezés telefonon egyetlen oszlopra omolhat össze. Egy hamburgermenü helyettesíti a teljes navigációs sávot. A jó reszponzív dizájn elkerülhetetlennek tűnik, mintha a webhelynek mindig is így kellett volna kinéznie az eszközödön.