Responsive webdesign is een manier van websites ontwerpen en bouwen waarbij de pagina zich automatisch aanpast aan de schermgrootte van het apparaat. Dezelfde website is zo goed leesbaar en bruikbaar op een telefoon, een tablet en een computer.
Hoe responsive webdesign werkt
Een responsive website gebruikt flexibele indelingen in plaats van vaste afmetingen. Afbeeldingen en blokken schalen mee met de breedte van het scherm. Met CSS en zogenoemde media queries wordt vastgelegd wat er bij een bepaalde schermbreedte verandert. Denk aan een menu dat op een telefoon achter een knop zit, of kolommen die onder elkaar komen te staan.
De punten waarop de indeling wisselt heten breekpunten (breakpoints).
Ook afbeeldingen kunnen zo worden ingesteld dat ze op een klein scherm een kleiner bestand laden.
Waarom het wordt toegepast
Websites worden bekeken op schermen van heel verschillende afmetingen. Zonder aanpassing moet een bezoeker op een telefoon inzoomen en heen en weer schuiven om een pagina te lezen.
Met één responsive website hoef je niet voor elk apparaat een aparte versie te onderhouden. Ontwerpers beginnen vaak met de kleinste schermen en bouwen daarna uit voor grotere, een aanpak die mobile first wordt genoemd.
Dat bespaart werk en voorkomt dat de inhoud op de ene versie afwijkt van die op de andere.
Beperkingen en alternatieven
Responsive ontwerp vraagt extra aandacht voor afbeeldingen en laadtijd, omdat een mobiel apparaat niet altijd een snelle verbinding heeft. Ook de bediening verschilt: op een touchscreen gebruik je vingers in plaats van een muis, dus knoppen moeten groot genoeg zijn.
Een alternatief is een aparte mobiele website, maar die is lastiger te onderhouden. Responsive webdesign past in de bredere aanpak van UX-design.
