Nu mensen steeds meer surfen via mobiele apparaten, is het niet langer voldoende om een statische website te hebben die er alleen goed uitziet op een computerscherm.

Daarnaast heb je natuurlijk ook nog tablets, 2-in1 laptops en verschillende smartphonemodellen met allemaal hun eigen afmetingen. In je design moet je dus zowat rekening houden met elke mogelijk variatie.

Het is dus niet meer genoeg om je content in een kolom te gooien en denken dat je daarmee een mooie site hebt opgezet.

Met responsief webdesign kan je ervoor zorgen dat je website er perfect uitziet op zowel telefoons, laptops en desktops.

En die verbetering in user experience (UX), oftewel gebruikerservaring, betekent ook meer conversies en dus snellere groei van je bedrijf.

Deze gids zal je alles vertellen wat je moet weten over responsief webdesign, inclusief definities, een stapsgewijze uitleg, voorbeelden en nog veelmeer.

Wat is responsief webdesign?

Responsief design is een methode binnen webdesign die ervoor zorgt dat je webcontent meeverandert met de verschillende afmetingen van schermen van apparaten of vensters op die apparaten.

Zo kan je content op een desktopscherm bijvoorbeeld worden gesplitst in verschillende kolommen, aangezien zo’n scherm breed genoeg is om meerdere kolommen leesbaar weer te geven.

Maar als je dezelfde content in meerdere kolommen op een smartphone wil tonen, kan dit zorgen dat de content voor de bezoekers lastig leesbaar is.

Responsief design maakt het mogelijk om diverse verschillende lay-outs van je content en bijbehorend design af te leveren aan verschillende apparaten, afhankelijk van hun schermgrootte.

Je website moet er niet alleen goed uit zien op een computerscherm. 🖥 Tablets, 2-in-1 laptops, en smartphones zijn ook belangrijk... en met deze gids kom je alles te weten over responsief design 🤳Click to Tweet

Responsief webdesign vs adaptief design

Het verschil tussen responsief design en adaptief design is dat responsief design de weergave van één en dezelfde paginaversie verandert. Adaptief design daarentegen levert meerdere, compleet verschillende versies van één pagina af.

Responsief vs adaptive design

Responsief vs adaptive design

Beide zijn belangrijke webtrends en kunnen webmasters helpen bij het tonen van hun website op verschillende schermen, maar de aanpak is heel verschillend.

Bij responsief design, zullen alle gebruikers hetzelfde basisbestand openen via hun browser, onafhankelijk van hun apparaat, waarbij CSS code de lay-out en weergave aanpast op basis van de schermgrootte. Bij adaptief design is er een script dat eerst de schermgrootte controleert, en vervolgens het bijpassende bestand ophaalt voor dat scherm.

Waarom responsief design belangrijk is

Als je nog niet eerder bezig bent geweest met webdesign, development, of bloggen, dan vraag je je wellicht af waarom responsief design zo belangrijk is.

Het antwoord is eenvoudig. Je kan niet langer een website maken voor één soort apparaat. Mobiel webverkeer is inmiddels groter dan ‘normaal’ internetverkeer via computers, met iets meer dan 51%.

Marktaandeel van mobiel, tablet en desktop

Marktaandeel van mobiel, tablet en desktop

Als meer dan de helft van je potentiële bezoekers een mobiel apparaat gebruiken om op internet te surfen, dan kan je ze niet gewoon een pagina voorschotelen die je voor een desktop hebt ontworpen. Die zijn namelijk lastig te gebruiken en te lezen, wat de gebruikerservaring uiteraard verslechtert.

Maar dat is nog niet alles. Ook meer dan de helft van bezoeken via zoekmachines komen van mobiele gebruikers.

Mobiel zoekverkeer

Mobiel zoekverkeer

Ten slotte is mobiel in de afgelopen jaren één van de belangrijkste advertentiekanalen geworden. Wanneer de pandemie achter de rug is, zullen uitgaven aan mobiele advertenties waarschijnlijk toenemen met bijna 5%, tot in totaal $91,52 miljard.

Of je nou op social media adverteert of een organische aanpak kiest via bijvoorbeeld YouTube SEO, de kans is groot dat de meerderheid van je verkeer sowieso vanuit mobiele gebruikers komt.

Zijn je landingspagina’s niet geoptimaliseerd voor mobiele gebruikers en eenvoudig te gebruiken, dan zul je niet de volledige ROI op je marketingbudget realiseren. En slechte conversiescores betekenen weer minder leads; met andere woorden, verspild advertentiebudget.

Zijn WordPress websites responsief?

Of WordPress website responsief zijn hangt af van het thema dat de site gebruikt. Een WordPress thema is te vergelijken met het template van een statische website en controleert het ontwerp en de lay-out van je content.

Gebruik je een standaard WordPress thema, bijvoorbeeld Twenty Twenty, dan is het ontwerp responsief, maar aangezien het ontwerp zelf maar uit één kolom bestaat, besef je dat wellicht niet.

Gebruik je een ander WordPress thema, dan kan je testen of het al dan niet responsief is door je site op verschillende apparaten te bekijken, of door de Chrome Developer Tools te gebruiken.

De bouwstenen van responsief webdesign

In dit deel zullen we het hebben over de fundering van responsief webdesign en de verschillende bouwstenen die je daarvoor nodig hebt.

CSS en HTML

De basis voor responsief design is de juiste combinatie van HTML en CSS, twee programmeertalen die de content en lay-out van een pagina bepalen voor elke webbrowser.

html vs css

HTML vs CSS (Afbeelding: codingdojo.com)

HTML controleert vooral de structuur, elementen en content van een webpagina. Wil je bijvoorbeeld een afbeelding op je website zetten, dan zal je een stukje HTML code moeten gebruiken:

<img src="image.gif" alt="image" class=”full-width-img”>

Je kan de “class” of “id” instellen, en die later gebruiken bij je CSS code.

Je kan ook primaire eigenschappen instellen, zoals hoogte en breedte via HTML, maar dit wordt tegenwoordig niet meer aanbevolen.

In plaats daarvan kan je CSS gebruiken om het ontwerp en lay-out van de elementen te bewerken die je op een HTML pagina zet. CSS code kan je opnemen in de <style> sectie van een HTML document, of je kan een apart stylesheet bestand gebruiken.

Zo kan je bijvoorbeeld de breedte van alle HTML afbeeldingen aanpassen per element, op deze manier:

img {
width: 100%;
}

Of we kunnen ons juist richten op een specifieke class, “full-width-img” door vooraf een punt toe te voegen.

.full-width-img {
width: 100%;
}

Je kan het ontwerp ook op andere aspecten bewerken, naast hoogte, breedte en kleur. Door CSS op deze manier te gebruiken maak je een ontwerp responsief, zodra je het combineert met een techniek die “media query” wordt genoemd.

Media query’s

Een media query controleert welk apparaat wordt gebruikt en is een belangrijk deel van CSS3. Het is namelijk het onderdeel waarmee je content kan laten weergeven afhankelijk van bepaalde factoren, zoals schermgrootte of resolutie.

Media queries voor desktop, tablet, smartphone

Media queries voor desktop, tablet, smartphone

Je kan het vergelijken met een “if” clausule die je kan vinden in sommige programmeertalen, aangezien het eigenlijk controleert of het zichtbare deel van een scherm breed genoeg of te breed is, voordat een bepaald stuk code wordt uitgevoerd.

@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}

Is het scherm tenminste 780 pixels breed, dan zullen afbeeldingen met de “full-width-img” class 90% van het scherm gebruiken en automatisch gecentreerd worden in gelijke marges aan beide kanten.

Fluid lay-outs

Een fluid lay-out (vloeiende lay-out) is een essentieel onderdeel van modern responsief design. In de goede oude tijd kon je een statische waarde voor elke HTML element instellen, bijvoorbeeld 600 pixels.

Een fluid lay-out is echter afhankelijk van dynamische waardes, zoals een percentage van de breedte van het scherm.

Voorbeeld van een fluid lay-out

Voorbeeld van een fluid lay-out

Deze methode past dynamisch de grootte van elementen aan op basis van de grootte van het scherm.

Flexbox lay-outs

Alhoewel een op percentages gebaseerde lay-out wordt gezien als ‘fluid’, vinden veel designers en webdevelopers dit nog niet dynamisch of flexibel genoeg. Flexbox is een CSS module die is ontworpen als efficiëntere manier om diverse elementen in een lay-out te plaatsen, zelfs wanneer de grootte van de inhoud van een container niet bekend is.

Een flexibele container past de items in de container aan naar gelang de beschikbare ruimte. Deze flex containers hebben een aantal unieke property’s, zoals justify-content, die je niet kan aanpassen bij een normaal HTML element.

Flexbox container

Flexbox container

Dit is vrij geavanceerd design. Als je dit in je design wil gaan toepassen, raden we je aan om de CSS Tricks’ flexbox gids te lezen.

Responsieve afbeeldingen

De meest basale uitvoering van responsieve afbeeldingen volgt hetzelfde concept als fluid lay-out, waarbij een dynamische unit wordt gebruikt om de breedte of hoogte in te stellen. Het stukje CSS code dat we eerder al noemde, zorgt hier al voor:

img {
width: 100%;
}

De % unit schat een percentage in van de breedte of hoogte van de viewport en zorgt dat de afbeelding de juiste verhouding heeft voor het scherm.

Het probleem met deze aanpak is dat elke gebruiker de afbeelding op ware grootte moet downloaden, zelfs op mobiele apparaten.

Om verschillende versies voor verschillende apparaten te kunnen leveren, moet je het HTML srcset attribuut in je img tags opnemen, zodat je meer dan één afbeeldingsgrootte kan kiezen.

<img srcset="large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg  320w"
src="small.jpg"
/>

WordPress gebruikt deze functionaliteit automatisch voor berichten en pagina’s.

Snelheid

Wanneer je responsief design opstelt voor je website, moet laadsnelheid je hoogste prioriteit zijn.

Pagina’s die in minder dan 2 seconden laden, hebben gemiddeld een 9% bouncerate terwijl pagina’s boven de 5 seconden een 38% bouncerate laten zien.

Het is belangrijk dat – bij het inbouwen van responsiviteit op je site – je de eerste weergave van je pagina niet meer vertraagt dan absoluut noodzakelijk.

Er zijn verschillende manieren om je pagina’s sneller te maken. Het optimaliseren van je afbeeldingen, implementeren van caching, minification, gebruik van efficiëntere CSS lay-out, het voorkomen van JS renderblocking, en je critical render path verbeteren zijn allemaal goede maatregelen die hieraan bijdragen.

Ook kan je Google AMP implementeren voor je mobiele pagina’s, maar in ons onderzoek naar Google AMP leidde dit tot een vermindering van mobile leads van wel 59%.

Gebruikelijke limieten voor responsiviteit

Om met media query’s te werken, moet je nadenken over “responsieve breakpoints” oftewel limieten voor schermgroottes. Een limiet of breakpoint is de breedte van het scherm waarop je een bepaalde media query gebruikt om nieuwe CSS stijlen te implementeren.

Gebruikelijke schermgroottes

Kies je voor een mobile-first aanpak, met één kolom en kleinere lettertypen dan de basislay-out, dan hoef je geen mobiele limieten te implementeren, tenzij je het ontwerp wil optimaliseren voor specifieke modellen.

mobile first - responsief webdesign

Mobile-first design (Afbeelding: silocreativo.com)

Je kan zodoende een eenvoudig responsief ontwerp maken met slechts twee limieten: één voor tablets en één voor laptops en desktops.

Bootstrap’s responsieve breakpoints

Het eerste en meest populaire responsieve framework is Bootstrap, die ook als eerst de aanval opende op statische ontwerpen en die van mobile-first de standaard hebben gemaakt.

Daardoor gebruiken ook vandaag de dag nog veel designers de limieten die zijn opgesteld door Bootstrap.

Bootstrap responsieve breakpoints

Bootstrap responsieve breakpoints

Bootstrap gebruikt media query’s voor telefoons met horizontale oriëntatie (576 px), tablets (768px), laptops (992px) en extra grote desktopschermen (1200px).

Zo maak je je website responsief

Nu je de bouwblokken kent, is het tijd om je website responsief te maken.

Stel de limieten van je media query in (responsieve breakpoints)

Stel de limieten van je media query in op de unieke eisen van je ontwerp. Wil je bijvoorbeeld de Bootstap standaard volgen binnen je ontwerp, dan krijg je de volgende media query’s:

Stel de grootte van elementen in met percentages of maak een CSS Grid lay-out

De eerste en belangrijkste stap is het instellen van verschillende groottes voor de verschillende elementen in de lay-out, afhankelijk van de media query of het limiet van het scherm.

Het aantal lay-out containers dat je hebt, hangt natuurlijk af van je ontwerp, maar de meeste websites focussen op de elementen hieronder:

Gebruikelijke lay-out

Gebruikelijke lay-out

Met een mobile-first aanpak, kan je eerst de belangrijkste elementen in de lay-out stylen (let op: bevat geen media query voor de eenvoudigste stijl die je gebruikt voor een standaard smartphone in normale stand):

#wrapper {width:95%;  margin: 0 auto; }

#header {width:100%; }

#content {width:100%; }

#sidebar {width:100%; }

#footer {width:100%; }

// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) {

// Medium devices (tablets, 768px and up)

@media (min-width: 768px) {

#wrapper {width:90%;  margin: 0 auto; }

#content {width:70%; float:left; }

#sidebar {width:30%; float:right; }

// Large devices (desktops, 992px and up)

@media (min-width: 992px) { ... }

}

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) {

#wrapper {width:90%;  margin: 0 auto; }

}

Ga je liever voor percentages, dan beheerst het “float” attribuut aan welke kant van het scherm een element verschijnt: links of rechts.

Wil je verder dan de basis gaan en een responsief design van topkwaliteit maken, dan zul je de CSS flexbox lay-out onder de knie moeten krijgen, inclusief bijbehorende attributen zoals box-sizing en flex.

Implementeer responsieve afbeeldingen

Een manier om ervoor te zorgen dat er niks misgaat met je afbeeldingen, is het gebruiken van een dynamische waarde voor je afbeelding, zoals we eerder al zagen.

img {
width: 100%;
}

Maar hiermee vraag je nog steeds vrij veel van mobiele bezoekers wanneer ze je website bezoeken.

“Zoek je razendsnelle, betrouwbare en volledig beveiligde hosting voor je e-commercewebsite? Kinsta levert dit allemaal plus 24/7 gerenommeerde support van WooCommerce-experts.
Check onze pakketten

Let erop dat je altijd een srcset gebruikt met verschillende afmetingen van je afbeeldingen, voordat je afbeeldingen toevoegt aan je pagina’s.

Om dit handmatig te doen kost nogal wat tijd, maar met een CMS zoals WordPress wordt dit automatisch gedaan wanneer je mediabestanden uploadt.

Responsieve lettertypen voor de tekst van je website

De belangrijkste focus van responsief webdesign richt zich vaak op de responsiviteit van de lay-outblocks, elementen en media. Pas daarna denken mensen (misschien) nog eens aan de tekst.

Maar wil je écht goed responsief ontwerp, dan moet je ook de grootte van je lettertype aanpassen zodat deze zich aanpast aan de schermgrootte.

De makkelijkste manier om dit te doen is het instellen van een statische waarde voor de grootte van lettertype, zoals 22 px, en die voor elke media query aan te passen

Lettertype grootte vs schermgrootte scatter

Lettertype grootte vs schermgrootte scatter

Je kan tegelijkertijd meerdere tekstelementen targeten door een komma te gebruiken om elementen in een lijst te zetten.

@media (min-width: 992px) {

body, p, a, h4 {

font-size: 14px;

}

}

Responsiviteit testen

Als eerste wil je kijken of je website mobielvriendelijk is met de mobile-friendly test van Google. Typ gewoon de URL van je website in en klik op “test URL” voor de resultaten.

Google’s Mobile-Friendly Test

Google’s Mobile-Friendly Test

Maak je nog geen zorgen als het even duurt voor je website laadt. Dit zegt niets over de laadsnelheid van je pagina.

Als je de stappen in dit artikel hebt gevolgd, zou het resultaat moeten zijn dat je een mobile-friendly website hebt.

Vervolgens wil je zelf je website testen op verschillende schermgroottes, bijvoorbeeld via de Chrome developer tools.

Druk op CTRL + Shift + I op Windows computers, of Command + Option + I op Macs om de relevante weergave te openen. Vervolgens kan je het gewenste mobiele apparaat of tablet selecteren om de responsiviteit van je ontwerp te testen.

Testen van responsief en mobile lay-out in Chrome

Testen van responsief en mobile lay-out in Chrome

Er zijn verschillende vragen die je nu wilt kunnen beantwoorden.

CSS units en values voor responsief design

CSS heeft zowel absolute als relatieve maateenheden. Een absolute maat is bijvoorbeeld centimeter of pixel. Relatieve eenheden of dynamische waarde hangen af van de grootte en resolutie van het scherm, of de lettertypen van het root element.

PX vs EM vs REM vs Viewport Units voor een responsief design

Een nieuwe webdesigner of developer kan waarschijnlijk het beste bij pixels blijven voor de maat van teksten, aangezien die het meest duidelijk zijn voor CSS.

Maar als je de breedte en maximale breedte van afbeeldingen en andere elementen gaat instellen, zal een percentage een betere oplossing zijn. Deze aanpak zorgt ervoor dat de componenten zich aan het scherm van elk apparaat aanpassen.

Responsive Design Examples

Hieronder zullen we kijken naar enkele voorbeelden van responsief webdesign in verschillende sectoren, en kijken wat ze goed of slecht doen.

1. Online krant: New York Times

nyt responsive design

NYT on mobile, tablet, and laptop

Op de desktop doet de NYT lay-out meteen denken aan een traditionele krant, vol met visuals en verschillende rijen en kolommen met content. Er lijkt voor elke categorie een aparte kolom of rij te zijn.

Op mobile wordt dit één kolom en wordt ook het menu meteen omgezet naar het accordeonformat voor eenvoudiger gebruik.

2. Blog: The Art of Non-Conformity

The Art of Non-Conformity op mobile, tablet, en laptop

The Art of Non-Conformity op mobile, tablet, en laptop

 

Chris Guillebeau’s blog “The Art of Non-Conformity” is al meer dan 10 jaar een bekende blog. Alhoewel het design niet hypermodern is, is het wel responsief en zet het de lay-out met twee kolommen om naar een enkele kolom op mobiele apparaten.

3. E-commerce: Amazon

Amazon op mobile, tablet, en laptop

Amazon op mobile, tablet, en laptop

Er is een goede reden dat Amazon een wereldwijde leider is binnen de e-commerce, en hun user interface werkt dan ook op alle apparaten perfect.

Hun tablet lay-out verwijdert simpelweg witruimte en voegt een scrolbare sectie met iconen toe om meer content kwijt te kunnen in de beperkte ruimte.

Hum mobiele lay-out maakt er een enkele kolom van, met een focus op de basis, zoals recente aankopen, zonder de verschillende iconen met links naar andere secties zoals op de startpagina.

4. Video Site: YouTube

YouTube op mobile, tablet, en laptop

YouTube op mobile, tablet, en laptop

YouTube op mobile, tablet, en laptop

De basis van het design van YouTube is een flexibele grid met video’s die relevant zijn voor de gebruiker. Op tablets gaat het aantal kolommen terug naar drie. Op mobile, wordt dit een enkele kolom.

De mobiele versie verplaatst het hoofdmenu naar de onderkant van het scherm, dichtbij de duimen van de gebruiker. Deze eenvoudige aanpassing vereenvoudigt de navigatie en daarmee verbetert de UX.

5. Online Magazine: Wired

Wired op mobile, tablet, en laptop

Wired op mobile, tablet, en laptop

Wired pakt responsief webdesign aan door te focussen op een lay-out met enkele kolom op kleinere schermen, te beginnen met tablets.

Het is een eenvoudige lay-out en dit helpt om de aandacht naar hun beste verhalen te trekken, en naar hun CTA om je te abonneren.

Zorg dat je website er ✨ perfect✨ uitziet op alle apparaten met deze uitleg over responsief design!Click to Tweet

Samenvatting

Bij responsief webdesign komen allerlei aspecten kijken. Zonder een basis in HTML en CSS maak je snel fouten.

Maar door vertrouwd te raken met de verschillende componenten, door bijvoorbeeld te analyseren met webdev tools, en voorbeeldcode op je website te testen, zou je zonder al te grote problemen je website responsief moeten kunnen maken.

Klinkt dat als veel te veel werk, dan kan je altijd een WordPress developer inhuren of simpelweg kiezen voor een thema dat al responsief is.


Als je dit artikel leuk vond, dan ga je Kinsta’s WordPress hosting platform ook heel erg leuk vinden! Of het nu gaat om het versnellen van je website of de 24/7 support van ons ervaren WordPress-team. Onze door Google Cloud aangedreven infrastructuur is gericht op automatische schaalbaarheid, prestaties en beveiliging. Laat ons jou het Kinsta verschil tonen! Bekijk onze pakketten