Åbn en hjemmeside på din telefon, derefter på en bærbar computer og derefter på et tv. Hvis den ser korrekt ud på alle tre sider uden at skulle knibe øjnene sammen, er den bygget med responsivt design. Tilgangen lader en enkelt kodebase tilpasse sit layout, billeder og typografi til den skærm, den lander på.

Ethan Marcotte opfandt udtrykket i 2010, da mobil browsing eksploderede, og designere stod over for et valg: at bygge separate websteder til hver enhed eller bygge et, der kunne tilpasses. Responsivt design vandt. Kerneværktøjerne er flydende gitre, fleksible billeder og medieforespørgsler. En medieforespørgsel spørger browseren, hvor bredt viewporten er, og anvender forskellige CSS-regler afhængigt af svaret.

Hvad gør et design responsivt

• Flydende gitre, der bruger procenter i stedet for faste pixels
• Fleksible billeder, der skalerer inden for deres containere
• Medieforespørgsler, der anvender breakpoints for forskellige skærmstørrelser
• Berøringsvenlige mål på mobile layouts

Målet er ikke bare at få indhold til at se ud på en lille skærm. Det handler om at bevare læsbarhed, hierarki og brugervenlighed på tværs af enhver kontekst. Et skrivebordslayout med tre kolonner kan kollapse til én kolonne på en telefon. En hamburgermenu erstatter en fuld navigationslinje. Godt responsivt design føles uundgåeligt, som om webstedet altid har været meningen, at det skulle se sådan ud på din enhed.