Én hjemmeside, mange skærme. Responsivt design får et enkelt layout til at tilpasse sig forskellige enhedsstørrelser og -retninger. Udtrykket blev opfundet af Ethan Marcotte i 2010 og byggede på tidligere ideer om fleksible gitre og flydende billeder. I stedet for at bygge separate hjemmesider til desktop og mobil, skaber designere én kodebase, der omarrangerer sig selv baseret på viewportbredde.

Tre tekniske ingredienser får det til at fungere. Flydende gitre bruger procenter i stedet for faste pixels, så kolonner strækkes og krymper. Fleksible billeder skalerer inden for deres containere. Medieforespørgsler registrerer skærmstørrelsen og anvender forskellige CSS-regler ved definerede breakpoints. Et skrivebordslayout med tre kolonner kan kollapse til en enkelt kolonne på en telefon, hvor navigationen flyttes til en hamburgermenu. Målet er ikke pixelperfekt kontrol, men yndefuld tilpasning.

Kerneteknikker

• Flydende gitre baseret på procenter.
• Fleksible billeder og medier.
• Medieforespørgsler ved definerede breakpoints.
• Prioritering af mobilorienteret indhold.

Responsivt design er nu standardpraksis. Brugere forventer, at en hjemmeside fungerer, uanset om de åbner den på en telefon, en tablet, en bærbar computer eller et fjernsyn.