Åpne en nettside på telefonen din, deretter på en bærbar PC, og så på en TV. Hvis den ser riktig ut på alle tre uten å måtte knipe eller myse, er den bygget med responsivt design. Tilnærmingen lar en enkelt kodebase tilpasse layout, bilder og typografi til hvilken skjerm den lander på.

Ethan Marcotte skapte begrepet i 2010, da mobilnettlesing eksploderte og designere sto overfor et valg: bygge separate nettsteder for hver enhet eller bygge et som er fleksibelt. Responsivt design vant. Kjerneverktøyene er flytende rutenett, fleksible bilder og mediespørringer. En mediespørring spør nettleseren hvor bredt visningsområdet er og bruker forskjellige CSS-regler avhengig av svaret.

Hva gjør et design responsivt

• Flytende rutenett som bruker prosenter i stedet for faste piksler
• Fleksible bilder som skalerer innenfor containerne sine
• Mediespørringer som bruker avbruddspunkter for forskjellige skjermstørrelser
• Berøringsvennlige mål på mobiloppsett

Målet er ikke bare å få plass til innhold på en liten skjerm. Det er å bevare lesbarhet, hierarki og brukervennlighet på tvers av alle kontekster. Et skrivebordslayout med tre kolonner kan kollapse til én kolonne på en telefon. En hamburgermeny erstatter en full navigasjonslinje. Godt responsivt design føles uunngåelig, som om nettstedet alltid var ment å se slik ut på enheten din.