Én nettside, mange skjermer. Responsiv design gjør at én enkelt layout tilpasser seg ulike enhetsstørrelser og -retninger. Begrepet ble laget av Ethan Marcotte i 2010, og bygde på tidligere ideer om fleksible rutenett og flytende bilder. I stedet for å bygge separate nettsteder for datamaskin og mobil, lager designere én kodebase som omorganiserer seg basert på viewportbredde.

Tre tekniske ingredienser får det til å fungere. Flytende rutenett bruker prosenter i stedet for faste piksler, slik at kolonner strekker seg og krymper. Fleksible bilder skalerer innenfor beholderne sine. Mediespørringer oppdager skjermstørrelsen og bruker forskjellige CSS-regler ved definerte avbruddspunkter. Et skrivebordslayout med tre kolonner kan kollapse til en enkelt kolonne på en telefon, med navigasjonen flyttet til en hamburgermeny. Målet er ikke pikselperfekt kontroll, men elegant tilpasning.

Kjerneteknikker

• Flytende rutenett basert på prosenter.
• Fleksible bilder og medier.
• Mediespørringer ved definerte avbruddspunkter.
• Prioritering av mobilbasert innhold.

Responsivt design er nå standard praksis. Brukere forventer at et nettsted fungerer enten de åpner det på en telefon, et nettbrett, en bærbar PC eller en TV.