Responsive design is de manier om een website zo te bouwen dat de opmaak van vorm verandert naar het scherm waarop je hem bekijkt. Dezelfde pagina herschikt zich, schaalt mee en zet blokken anders neer. Op een breed beeldscherm zie je misschien drie kolommen, op een telefoon stapelen diezelfde blokken zich tot één.
Denk aan water dat je in verschillende glazen giet. Het water is je content en het glas is het scherm. Een responsive site laat de content de vorm aannemen van het vak waar het in valt, in plaats van over de randen te lopen of het halve scherm leeg te laten. Dat doe je met flexibele rasters die meerekken en krimpen, samen met fluid grids en breakpoints die de opmaak vertellen wanneer hij van indeling wisselt.
De meeste teams bouwen nu mobile-first, wat betekent dat je het kleinste scherm eerst ontwerpt en details toevoegt naarmate het scherm groeit. Die volgorde is belangrijk, want ruim de helft van het webverkeer komt van telefoons. Een site die alleen op een laptop mooi is, verliest stilletjes bezoekers die via een zoekresultaat op hun mobiel binnenkomen.
Responsive betekent niet dat elk scherm precies dezelfde content verkleind krijgt. Op een telefoon verberg je misschien een grote achtergrondafbeelding, vouw je het menu in tot één knop, en maak je van een brede datatabel gestapelde kaartjes die je kunt scrollen. Stuk voor stuk een bewuste keuze over wat het zwaarst telt als de ruimte krap is. Doe je dat verkeerd, dan zit een bezoeker te knijpen en zoomen om een link te kunnen tikken, en op mobiel is dat meestal het moment dat hij wegklikt.
Bij TopDevs bouwen we elke site vanaf de eerste regel code responsive, en testen we echte opmaak op telefoon, tablet en desktop, zodat je bezoekers dezelfde nette ervaring krijgen, hoe ze je ook vinden.
