Dennis
Adriaansen
  1. Wat is responsive webdesign?
  2. Waarom responsive webdesign belangrijk is.
  3. Responsive webdesign frameworks.
  4. Responsive design met TailwindCSS.
Dennis Adriaansen · 29 aug. 2021

Wat is responsive webdesign en waarom is het belangrijk?

Wil je een website laten maken en lees je veel over het principe "responsive webdesign"? Wellicht heb je geen idee wat dit is. In dit artikel leggen we je uit wat responsive webdesign is en waarom het belangrijk is voor je nieuwe website.

Wat is responsive webdesign?

Responsive webdesign verwijst naar het principe waarbij websites worden ontworpen op het gedrag en de omgeving van de bezoeker. Een website dient zich aan te passen aan de het apparaat waarmee de bezoeker de website bezoekt. Denk hierbij aan schermformaat, type device (mobile, tablet, desktop) en welke versie van de browser de bezoeker gebruikt.

Er zijn verschillende strategieën als het gaat om responsive webdesign. Een daarvan is het principe van een flexibele layout.

Een flexibele layout past zich automatisch aan aan het schermformaat van de bezoeker. Webdesigners bepalen het juiste schermformaat aan de hand van de schermresolutie van de bezoeker.

Zoals je ziet verandert de indeling van de website per apparaat.

Het belang van responsive design

Responsive webdesign is al jaren een van de belangrijkste onderdelen van webdesign. Enkele jaren werden website enkel gemaakt voor desktops. De gemiddelde website was maximaal 960 pixels breed en alle monitoren op dat moment gaven de website goed weer.

Met de komst van de iPhone veranderde de webdesign wereld drastisch. Internet op je telefoon werd steeds normaler en het verkeer verschoof langzaam van desktop naar mobiel.

De verschuiving heeft is de afgelopen jaren zo hard gegaan dat Google in 2015 besloot dat mobielvriendelijkheid een rankingfactor is.

De conclusie is: als je de beste wesbite voor je bezoekers wil, je goed vindbaar wil zijn in Google en het maximale uit je website halen. Dan kun je niet om responsive webdesign heen.

Responsive webdesign frameworks

Responsive webdesign is lastig. In het verleden was het niet gek dat je voor ieder apparaat een aparte versie van de website maakte (https://mobile.voorbeeldwebsite.nl). Gelukkig is dat verleden tijd en kun je met een responsive webdesign framework iedere website supereenvoudig responsive maken.

De responsive webdesign frameworks van dit moment:

Responsive design met TailwindCSS

Een recent en populair framework voor responsive webdesign is TailwindCSS. Het webframework is gebouwd om eenvoudig adaptieve gebruikersinterfaces te bouwen.

TailwindCSS is een utility-first framework wat betekent dat je door middel van dynamische classes een flexibele interface bouwt.

Het grote voordeel van TailwindCSS is de snelheid waarmee responsive websites worden gebouwd.

Met een enkel configuratiebestand bepaal je eenmalig wat de standaard instellingen van je website zijn. Daarna kun je je volledig richten op het design en de content van de website.

Responsive viewport

Het bouwen van een responsive website begint bij het zetten van de viewport. De viewport is simpel gezegd het venster dat je voor je ziet als je een website opent in de browser.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

De bovenstaande instelling stelt de viewport dusdanig in dat de browser weet hoe die moet schalen op verschillende schermformaten. Hieronder zie je een voorbeeld van een pagina met en zonder correcte viewport instelling.

Responsive afbeeldingen

Responsive afbeeldingen zijn afbeeldingen die automatisch schalen zodat de perfect passen op verschillende schermresoluties.

Om een afbeelding responsive te maken zet je de width (breedte van de afbeelding) op 100%. De hoogte van de afbeelding zal automatisch opschalen zodra deze ruimte beschikbaar is.

Schermresolutie bepalen met CSS3 media queries

Met CSS3 media queries bepaal je hoe delen van je website reageren op bepaalde schermformaten. Door de juiste media queries te hanteren stel je de website in staat de volledige ruimte op de pagina te benutten.

@media all and (max-width: 1000px) and (min-width: 700px) {

Hierboven zie je een voorbeeld van een media query. Deze query bepaalt dat de styles die worden toegewezen alleen zichtbaar mogen zijn voor schermresoluties die minimaal 700px, maar niet breder dan 1000 pixels is.

mouse expand_more