Eén website, vele schermen. Responsive design zorgt ervoor dat één lay-out zich aanpast aan verschillende schermformaten en -oriëntaties. De term werd in 2010 bedacht door Ethan Marcotte, voortbouwend op eerdere ideeën over flexibele grids en vloeiende afbeeldingen. In plaats van aparte websites te bouwen voor desktop en mobiel, creëren ontwerpers één codebasis die zichzelf herschikt op basis van de breedte van het scherm.

Drie technische ingrediënten zorgen ervoor dat het werkt. Vloeiende grids gebruiken percentages in plaats van vaste pixels, waardoor kolommen uitrekken en inkrimpen. Flexibele afbeeldingen schalen mee binnen hun containers. Mediaqueries detecteren de schermgrootte en passen verschillende CSS-regels toe op gedefinieerde breakpoints. Een lay-out met drie kolommen voor desktops kan bijvoorbeeld op een telefoon teruggebracht worden tot één kolom, waarbij de navigatie in een hamburgermenu verschijnt. Het doel is niet pixelperfecte controle, maar een soepele aanpassing.

Kerntechnieken

• Vloeibare roosters gebaseerd op percentages.
• Flexibele afbeeldingen en media.
• Mediaquery's op gedefinieerde breekpunten.
• Contentprioriteit gericht op mobiele apparaten.

Responsief ontwerp is tegenwoordig de standaard. Gebruikers verwachten dat een website goed werkt, ongeacht of ze deze openen op een telefoon, tablet, laptop of televisie.