Responsive webdesign: Ontwerp een website voor de toekomst

Wat is responsive webdesign?

Responsive webdesign is een manier van ontwerpen die is gericht op het maken van een website voor verschillende apparaten en schermen. De lay-out van de website wordt aangepast op basis van het apparaat waarop deze te zien is. Tegenwoordig wordt responsive webdesign steeds belangrijker en bestaat er een mobile first benadering waarbij een website eerst wordt ontworpen voor een mobiel apparaat.

Waarom is responsive webdesign?

Tegenwoordig komt van alle website bezoekers 61,67% via mobiel. Dit aantal lag in 2015 nog maar op 31,16%. Wanneer je alleen voor grote schermen een webdesign maakt, dan heeft ongeveer 40% van de bezoekers een goede ervaring.

Een responsive website is dus cruciaal voor elke onderneming. Een slechte website raakt namelijk niet alleen de conversie, maar ook het imago van je bedrijf.

Daarnaast is een responsive website ook beter voor SEO. Google heeft meerdere keren aangegeven dat het responsive webdesign als een belangrijke ranking factor beschouwt. Dit betekent dat een website met een responsive design hoger kan scoren in de zoekresultaten dan een website zonder responsive design.

Hoe maak je een responsive webdesign?

Media Query en viewport

Elk apparaat waarop een website te zien is heeft een andere afmeting, ook wel viewport genoemd. De webbrowser stelt automatisch de juiste viewport voor de website in op basis van afmeting van het scherm die hij ziet.

Voor webdesigners is het echter moeilijk om voor elke schermgrootte een bijpassende lay out te maken. Hierom zijn er verschillende standaard media queries bedacht.

Een media query is een methode om gemakkelijk de stijl van een element aan te passen op basis van de schermgrootte. Door een standaard bereik hoeft niet voor elke schermgrootte een andere lay out worden gemaakt. Hieronder staan de vijf standaard media queries met hun bereik.

1. Mobiel apparaat: @media screen and (max-width: 576px)
2. Kleine tablet: @media screen and (min-width: 577px) and (max-width: 768px)
3. Grote tablet en kleine laptop: @media screen and (min-width: 769px) and (max-width: 992px)
4. Laptops: @media screen and (min-width: 993px) and (max-width: 1200px)
5. Voor desktop en grote schermen: @media screen and (min-width: 1201px)

Voorbeeld: Wanneer een website bekeken wordt op een tablet van 600 pixels breed (pixels is digitale lengtemaat) dan valt deze onder de afmeting van een kleine tablet. De browser laadt dan de code in die past bij dit scherm.

Een webdesigner schrijft vervolgens een stukje codetaal om de website stijl aan te passen op basis van deze schermgrootte. De codetaal die hiervoor wordt gebruikt is CSS.

CSS Grid en CSS Flexbox

Nu duidelijk is hoe je media queries werken en hoe je deze moet gebruiken is het tijd om te kijken naar de lay-out van de website. Een Grid is de standaard lay-out waarin een website weergeven wordt.

Css Grid

Een CSS grid is een systeem met relatieve eenheden voor het maken van twee dimensionale ontwerpen op een website. Dit maakt het mogelijk om de breedte van verschillende elementen te bepalen.

Door een CSS grid kun je gerichter te werk gaan dan bij een standaard CSS methode zoals de float en positioneren. Dit betekent simpel gezegd dat je niet tegen elk element hoeft te zeggen waar hij moet staan.

CSS Flexbox

CSS flexboxen zijn flexibele grids die het mogelijk maken om relatieve eenheden ook onder elkaar op verschillende plekken te plaatsen. Een CSS flexbox is in tegenstelling tot een CSS grid een één dimensionale ontwerp.

Bij de flexibele grids worden de elementen geplaatst om de X-as en Y-as. Met deze methode kan gemakkelijker een complexe lay out worden gemaakt.

De flexbox is een moderne technologie die steeds vaker gebruikt wordt door webdesigners. Het wordt al ondersteund door alle bijna alle verschillende browsers.

Afbeeldingen en Lettertypes

Als laatste is het bij responsive webdesign belangrijk om rekening te houden met de afmeting van de verschillende elementen.

Responsive websites hebben namelijk ook een opmaak gebaseerd op basis van de verschillende schermen. Dit betekent dat grote afbeeldingen kleiner zijn op mobiele apparaten.

De twee belangrijkste elementen waar een website uit bestaat zijn afbeeldingen en teksten. Daarom is het belangrijk dat zij een bijpassende responsive stijl krijgen gebaseerd op de viewport van het scherm.

De afmeting van een tekst wordt ook wel font size genoemd. Bij responsive webdesign verandert de font size bij een ander scherm. Dit kun je combineren met een eerder genoemde media query.

   
   @media only screen and (max-width: 576px) {
       body {
    font-size: 16px;
   }
  }

Ook afbeeldingen komen vaak voor op een website. Deze kun je ook aanpassen met dezelfde methode als de methode met de typografie voor je website.

Hoe kun je controleren of een website responsive is?

Nu je een responsive webdesign hebt gemaakt, wil je natuurlijk ook testen of deze daadwerkelijk responsive is. Dit kun je op twee verschillende manier testen.

Zelf je website bekijken

Als eerste kun je zelf kijken of je website responsive is. Dit kun je doen door op verschillende browsers en apparaten je website te openen en door simpelweg de website te bekijken.

Het is belangrijk dat je goed controleert of de alle elementen goed klikbaar zijn. Dit wil zeggen dat je op alle knoppen makkelijk kunt klikken. Bekijk ook of alle elementen goed zichtbaar zijn en of de tekst goed leesbaar is.

Als laatste kun je ook nog eens andere personen naar je responsive website laten kijken. Zij zien vaak weer andere dingen dan jij. Laat ze simpelweg gewoon over je website navigeren en observeer van een afstandje.

Google mobiel vriendelijke test

Google heeft een mobiele vriendelijke test tool waarmee kunt controleren of je website vanuit het oogpunt van Google voldoet aan de richtlijnen van responsive webdesign.

Deze tool is ook zeer geschikt om je webdesign bureau even te controleren of zij daadwerkelijk wel het beloofde responsive webdesign hebben geleverd.

Responsive websites worden ook beloond door zoekmachines. Dit betekent dat responsive websites betere posities krijgen in bijvoorbeeld Google. Daarom is het extra belangrijk om aandacht te besteden aan een responsive ontwerp.

7 Voordelen van een responsive website

1. Betere user experience

Responsive webdesign zorgt voor een betere user experience. Een goed UX design op alle apparaten draagt bij aan een betere ervaring voor de gebruiker.

Door de betere ervaring blijven gebruikers langer op de website en is de kans dat zij converteren groter. 57% van de gebruikers zou nooit een website aanbevelen met een slechte lay-out voor mobiele apparaten.

2. Google geeft voorkeur aan mobile first

In 2018 maakte Google officieel bekend dat zij kozen voor een mobile first index. Dit betekent dat een website als eerste geïndexeerd wordt op mobiele versie en later pas op de desktop gemaakte versie.

Optimaliseer je website dus voor desktop en maak hem voor een telefoon. Leg de focus op de perfecte website ervaring voor mobiele gebruikers. Dit kun je doen door gebruik te maken van duidelijke menu’s, een overzichtelijke lay-out en duidelijke leesbare elementen.

3. Lagere bounce percentages

Een responsive website heeft lagere bounce percentages. Dit betekent dat wanneer je website geschikt is voor alle apparaten, dat bezoekers minder vaak in één keer van de website afgaan.

Lage bounce percentages zorgen voor een betere vindbaarheid van je website. Daarnaast haal je meer uit advertenties, omdat minder gebruikers de website in één keer verlaten.

4. Hogere conversie percentages

Een ander voordeel van een responsive website is dat je hogere conversie percentages hebt. Hoge conversie percentages leveren meer omzet op en zorgen voor het maximale resultaat van een website.

Vooral voor webwinkels is het hebben van een responsive design belangrijk. Wanneer 60% van alle bezoekers moeite heeft met het vinden van de winkelwagen, dan is de kans groot dat je veel omzet verliest.

Een handige methode om de effectiviteit van je mobiel ontwerp te controleren is door gebruik te maken van van Google Analytics of een ander tracking software. Door de conversie percentages van de desktop met die van de mobiel te vergelijken krijg je makkelijk inzicht in de effectiviteit.

5. Gemakkelijk onderhoud

Een website heeft natuurlijk ook onderhoud nodig. Wanneer bij elke update de versie voor elk apparaat moet worden gemaakt is de kans groot dat dit in de kosten gaat oplopen.

Door een design die zichzelf aanpast aan het apparaat verlaag je de kans dat je voor elk apparaat een nieuwe ingreep moet doen. De breedte en hoogte van nieuwe elementen zijn vooraf al bepaald.

6. Bezoekers blijven langer

Naast het feit dat bezoekers minder snel de pagina in één keer verlaten blijven ze ook bij een goed responsive design ook langer. Een hogere sessie duur is goed voor de SEO van je website.

Daarnaast krijg je bij bezoekers die langer blijven ook langer de kans om te vertellen waarom ze voor jou moeten kiezen. Daarmee vergroot je de kans dat ze een nieuwe klant worden.

7. Professionele uitstraling

Als laatste is het voordeel van een responsive website dat deze een professionele uitstraling heeft op elk apparaat. Op deze presenteer je je bedrijf op een professionele manier aan iedereen.

Een professionele maatwerk website helpt je met het onderscheiden van je concurrentie. Met een professionele uitstraling bouw je vertrouwen op bij de gebruikers. Dit zorgt uiteindelijk weer voor meer leads en conversies.

Wat zijn de nadelen van een responsive webdesign?

Er zijn enkele nadelen aan een responsive webdesign, maar deze wegen niet op tegenover de voordelen. Deze nadelen kun je maar beter accepteren als je wilt dat je een goed werkende website hebt.

Complex om te maken

Een responsive website is moeilijker te maken dan een standaard website voor één apparaat. Er moet rekening worden gehouden met scherm groottes en de daarbij passende viewport en media query.

Zonder ervaring in webdesign is het lastig om een goede balans te vinden tussen een goede website voor desktop en mobiele apparaten. De content breedte is op een desktop veel groter dan op de mobiel.

Daarom kan het raadzaam zijn om je website te laten maken door een professioneel bedrijf. Zij hebben meer ervaring met het maken van websites voor verschillende apparaten.

Snelheid is meestal lager

Een responsive design is vaak trager dan een design voor één scherm. Dit heeft te maken met het feit dat er meer code nodig is om de website te laten passen op elk scherm.

Waneer je gebruik maakt van een CMS zoals WordPress, dan kun je een plugin gebruiken om deze laadtijd te versnellen. Deze plugins bevatten vaak een optie waarmee je de code kunt verkleinen en deze efficiënter te laten uitvoeren. Een maatwerk WordPress website bevat deze integraties en kan een goede keuze zijn als je het maximale uit je WordPress site wilt halen.

Wat is een mobile first design?

Een mobile first design is een benadering in de webdesign waarbij er eerst prioriteit wordt gegeven aan mobiel vriendelijke versie van een website voordat deze gemaakt wordt voor grotere scherm. Dit wordt gedaan omdat 61.67% van alle bezoekers via een mobiel apparaat komt. Bij een mobile first design wordt de focus gelegd op het maken van een snelle, makkelijke en overzichtelijke website voor kleine schermen.

Deze benadering zal in de toekomst waarschijnlijk in populariteit groeien, omdat door de jaren heen steeds meer mensen een mobiel apparaat gebruiken om op internet te zoeken. Daarom is het belangrijk voor webdesigners om deze benadering te implementeren.

Wat is het verschil tussen responsive en adaptive design?

Responsive en adaptive design zijn beide manieren om een website geschikt te maken voor verschillende apparaten en schermformaten. 

Bij responsive design past de website zich aan aan het schermformaat van het apparaat waarop het wordt bekeken. Dit betekent dat de inhoud en de lay-out van de website meeschalen met het apparaat. 

Daarentegen wordt bij adaptive design de inhoud van de website aangepast aan specifieke schermformaten, waarbij verschillende lay-outs en inhoud worden gemaakt voor verschillende apparaten. 

Responsive design is flexibeler en past zich gemakkelijker aan aan verschillende schermformaten, terwijl adaptive design meer controle biedt over hoe de inhoud en hoe deze op verschillende apparaten wordt weergegeven. Het kiezen van het juiste ontwerp hangt af van de specifieke behoeften en doelen van de website.

Voorbeelden van responsive webdesign

Om wat inspiratie op te doen zijn hier enkele voorbeelden van een responsive website gegeven. Bij deze voorbeelden van responsive webdesign is duidelijk te zien dat de bedrijven goed nadenken over welke informatie zij op welke plek zetten.

Zalando.nl

Zalando.nl is een grote kleding retailer gevestigd in Duitsland. Bijna elke Nederlander heeft wel eens via de website van Zalando besteld. Zalando is een goed voorbeeld van een responsive website, omdat op elk apparaat makkelijk kan worden genavigeerd.

Ahrefs.com

Ahrefs is een bedrijf dat website analyse tools aanbiedt voor online marketeers. Dit bedrijf weet als geen ander hoe belangrijk een responsive webdesign is.

Er is goed nagedacht over welke informatie zij op welke plek hebben gezet. Op elk apparaat is in één oogopslag te zien wat zij doen en waarom je voor hen zou moeten kiezen.

Mckinsey.com

Het bedrijf McKinsey is een consultant en adviseur voor bedrijven. Met een overzichtelijke website voor alle apparaten ervaart de gebruiker een prettige website beleving.

Bijenkorf.nl

Voor kledingbedrijven is een responsive website van groot belang. Niet alleen voor het behalen van conversie, maar ook voor het laten zien van het assortiment.

Naast de website van Zalando levert ook bijenkorf een perfecte ervaring op verschillende schermen. De website is overzichtelijk en heeft daarnaast ook een mooi ontwerp.

Autoscout24.nl

Het laatste voorbeeld van responsive websdesign is die van autoscout24. Dit bedrijf verkoopt auto’s en heeft een groot aanbod. De website is erg goed in het gebruiken van responsive design om overzicht te bewaren en het zoeken makkelijk te maken. Dit is vooral te danken aan de geavanceerde zoekfunctie die op elk apparaat gemakkelijk te bedienen is.