Responsive design

Responsive design

Een responsive design is een website dat meeschaalt met de afmetingen van een scherm, zonder in leesbaarheid in te leveren van de gebruikersinterface. Websites die gebouwd zijn volgens het principe van een responsive design passen zich aan naar het gebruikte apparaat zoals een laptop, tablet, of smartphone. Een website volgens responsive webdesign, vaak afgekort tot RWD, schaalt lettertypes automatisch naar een optimaal formaat. Hierdoor heb je bij een responsive design één website die zich aanpast aan de gebruikte schermgrootte oftewel het bezoekende platform.

Meeschalen met het schermformaat

Responsive webdesign maakt gebruik van zogeheten ‘grids’ (blokken). Deze blokken kunnen veranderen van breedte en zodoende op een andere plek worden getoond. Bij een breed scherm verschijnen de blokken naast elkaar en bij een smaller scherm worden deze onder elkaar getoond. Simpelweg komt het er op neer dat bij een responsive design dezelfde informatie op een andere manier wordt ingedeeld.

Aangezien de verscheidenheid in schermresoluties alleen maar zal toenemen wordt de schaalbaarheid een belangrijk onderdeel in het ontwikkelen van een website. Bij een responsive design is verder geen device detectie of JavaScript benodigd. De broncode hoeft alleen voor één website onderhouden te worden. Teksten en afbeeldingen zijn goed leesbaar zonder te hoeven zoomen. Wel is het zo dat mobiele apparaten vaak langzamere verbindingen hebben, waardoor er vaker voor wordt gekozen om grote afbeeldingen te vermijden.

» Lees verder over de voordelen en nadelen van een responsive design.

Adaptive webdesign

Een variant op een responsive website is een website dat gebouwd is volgens adaptive webdesign, afgekort als A+RWD. Adaptive webdesign is als het ware een plus variant is van standaard responsive webdesign. Bij een adaptive design wordt naast het mobiele apparaat ook rekening gehouden met de manier waarop een apparaat wordt gebruikt, en verdere contextuele factoren als tijd en locatie. Adaptive webdesign gaat in feite een stap verder dan een responsive design. Bij adaptive webdesign kunnen ook bepaalde functionaliteiten van een website zich aan de gebruiker aanpassen.

» Kom meer te weten over adaptive webdesign.