Egy weboldal, sok képernyő. A reszponzív dizájn lehetővé teszi, hogy egyetlen elrendezés alkalmazkodjon a különböző eszközméretekhez és tájolásokhoz. A kifejezést Ethan Marcotte alkotta meg 2010-ben, a rugalmas rácsokkal és folyékony képekkel kapcsolatos korábbi elképzelésekre építve. Ahelyett, hogy külön webhelyeket építenének asztali és mobil eszközökre, a tervezők egyetlen kódbázist hoznak létre, amely a nézetablak szélessége alapján átrendezi magát.

Három technikai összetevő teszi működőképessé. A folyékony rácsok százalékokat használnak fix pixelek helyett, így az oszlopok megnyúlnak és összezsugorodnak. A rugalmas képek méretezhetők a konténereiken belül. A médialekérdezések érzékelik a képernyőméretet, és különböző CSS-szabályokat alkalmaznak a meghatározott töréspontoknál. Egy három oszlopos asztali elrendezés telefonon egyetlen oszloppá omolhat össze, miközben a navigáció egy hamburgermenübe kerül. A cél nem a pixelpontos vezérlés, hanem a kecses alkalmazkodás.

Alapvető technikák

• Százalékokon alapuló folyékony rácsok.
• Rugalmas képek és média.
• Média lekérdezések meghatározott töréspontokon.
• Mobilközpontú tartalompriorizálás.

A reszponzív dizájn ma már bevett gyakorlat. A felhasználók elvárják, hogy egy weboldal működjön, akár telefonon, táblagépen, laptopon vagy televízión nyitják meg.