De beginnersgids voor responsive webdesign (inclusief voorbeelden van code en lay-out)

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 responsive 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 responsive webdesign, inclusief definities, een stapsgewijze uitleg, voorbeelden en nog veelmeer.

Bekijk onze videogids over responsief webdesign:

Wat is responsive webdesign?

Responsive 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.

Responsive 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.

Responsive webdesign vs adaptief design

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

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

Bij responsive 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 responsive design belangrijk is

Als je nog niet eerder bezig bent geweest met webdesign, development, of bloggen, dan vraag je je wellicht af waarom responsive 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%.

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.

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 responsive?

Of WordPress websites responsive 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 responsive, 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 responsive is door je site op verschillende apparaten te bekijken, of door de Chrome Developer Tools te gebruiken.

De bouwstenen van responsive webdesign

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

CSS en HTML

De basis voor responsive 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 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 responsive, 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.

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 responsive 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.

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.

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.

Responsive afbeeldingen

De meest basale uitvoering van responsive 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 responsive 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.

Kinsta klanten hebben toegang tot een snelle en gemakkelijke manier om dit te bereiken door gebruik te maken van de codeminificatiefeature die rechtstreeks in het MyKinsta dashboard is ingebouwd, waardoor klanten met een simpele klik automatische CSS- en JavaScript minificatie kunnen inschakelen.

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 “responsive 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

• Mobiel: 360 x 640
• Mobiel: 375 x 667
• Mobiel: 360 x 720
• iPhone X: 375 x 812
• Pixel 2: 411 x 731
• Tablet: 768 x 1024
• Laptop: 1366 x 768
• High-res laptop of desktop: 1920 x 1080

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.

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

Bootstrap’s responsive breakpoints

Het eerste en meest populaire responsive 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 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 responsive

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

Stel de limieten van je media query in (responsive 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:

• 576px voor verticale telefoons
• 768px voor tablets
• 992px voor laptops
• 1200px voor grotere apparaten

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:

• Wrapper of container
• Header
• Content
• Zijbalk
• Footer

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 responsive 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 responsive 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.

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.

Responsive lettertypen voor de tekst van je website

De belangrijkste focus van responsive 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 responsive 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

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.

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.

Er zijn verschillende vragen die je nu wilt kunnen beantwoorden.

• Verandert de lay-out naar het juiste aantal kolommen?
• Past de content goed binnen de elementen en containers op de verschillende schermen?
• Passen de afmetingen van de lettertypen bij elk scherm?

CSS units en values voor responsive 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 responsive design

• PX – één pixel
• EM – relatieve eenheden gebaseerd op het lettertype.
• REM – relatieve eenheid gebaseerd op het lettertype van het element.
• VH, VW – % van de lengte of breedte van de viewport
• % – het percentage van het parent element.

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 responsive webdesign in verschillende sectoren, en kijken wat ze goed of slecht doen.

1. Online krant: New York Times

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

 

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 responsive en zet het de lay-out met twee kolommen om naar een enkele kolom op mobiele apparaten.

3. E-commerce: Amazon

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

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 pakt responsive 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.

Samenvatting

Bij responsive 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 responsive 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 responsive is.