Open een website eerst op je telefoon, dan op een laptop en vervolgens op een tv. Als de website er op alle drie de schermen goed uitziet zonder dat je hoeft in te knijpen of je ogen samen te knijpen, dan is deze ontworpen met responsive design. Deze aanpak zorgt ervoor dat één codebase de lay-out, afbeeldingen en typografie aanpast aan het scherm waarop de website wordt weergegeven.

Ethan Marcotte bedacht de term in 2010, toen mobiel internetgebruik explosief groeide en ontwerpers voor een keuze stonden: aparte websites bouwen voor elk apparaat of één website die zich aanpast aan verschillende apparaten. Responsive design won. De belangrijkste tools zijn vloeiende grids, flexibele afbeeldingen en media queries. Een media query vraagt ​​de browser hoe breed het scherm is en past vervolgens verschillende CSS-regels toe, afhankelijk van het antwoord.

Wat maakt een ontwerp responsief?

• Vloeiende rasters die percentages gebruiken in plaats van vaste pixels.
• Flexibele afbeeldingen die binnen hun containers schalen.
• Mediaqueries die breakpoints toepassen voor verschillende schermformaten
• Aanraakvriendelijke doelen op mobiele lay-outs

Het doel is niet alleen om content op een klein scherm te laten passen. Het gaat erom de leesbaarheid, hiërarchie en gebruiksvriendelijkheid in elke context te behouden. Een lay-out met drie kolommen voor desktops kan bijvoorbeeld op een telefoon tot één kolom worden gereduceerd. Een hamburgermenu vervangt een volledige navigatiebalk. Goed responsief design voelt vanzelfsprekend aan, alsof de website er altijd al zo op je apparaat uit had moeten zien.