Een responsive website is een site die zich automatisch aanpast aan het scherm waarop je hem bekijkt: telefoon, tablet of computer. Tekst, afbeeldingen en menu’s schuiven mee, zodat je nooit hoeft in te zoomen of opzij te scrollen. Omdat Google je site beoordeelt op de mobiele versie, is dit geen luxe meer. Hieronder lees je wat responsive precies betekent, hoe je het zelf test en wat je doet als je site niet goed werkt op mobiel.
Responsive website: de betekenis
Responsive betekent letterlijk: reagerend. De site reageert op de breedte van het scherm. Technisch gebeurt dat met een flexibel raster en zogenaamde breakpoints: punten waarop de opmaak verandert. Op een computer staan drie blokken naast elkaar, op een telefoon onder elkaar.
Er bestaan ook andere aanpakken die je soms nog tegenkomt:
- Een aparte mobiele site, vaak op een adres als m.jouwsite.nl. Dubbel onderhoud en gevoelig voor fouten. Wordt nauwelijks meer gebouwd.
- Adaptive design, waarbij de server een vaste opmaak per apparaattype stuurt. Minder flexibel dan responsive.
Responsive website design is al jaren de standaard, en ook wat Google aanraadt. Vrijwel elk modern WordPress-thema en elke websitebouwer is responsive. Toch gaat het in de praktijk vaak mis in de details.
Waarom is een mobielvriendelijke website zo belangrijk?
Drie redenen:
- Je bezoekers zitten op hun telefoon. Bij de meeste sites van lokale ondernemers en webshops komt het grootste deel van de bezoekers via mobiel binnen. Kijk in je eigen statistieken bij apparaatcategorie.
- Google kijkt naar je mobiele versie. Google gebruikt de mobiele versie van je site om pagina’s te beoordelen en te ranken. Dit heet mobile-first indexing. Staat iets niet op je mobiele versie, dan telt het voor Google nauwelijks.
- Mobiele bezoekers haken sneller af. Een knop die te klein is, een formulier dat niet werkt of een pop-up die niet weg te klikken is, kost je direct een aanvraag of bestelling.
Zo test je of je site mobielvriendelijk is
Google had vroeger een losse Mobile-Friendly Test, maar die is gestopt. Je test nu op deze manieren:
1. Gewoon op je eigen telefoon
De beste test is ook de simpelste. Pak je telefoon, ga naar je site en doorloop wat een klant doet: een dienst opzoeken, prijzen bekijken, het contactformulier invullen, bellen via de knop. Doe het ook op een ouder of kleiner toestel als je dat hebt, en laat iemand anders het proberen.
2. De apparaatmodus in Chrome
Open je site in Chrome op je computer, klik met rechts en kies Inspecteren. Klik daarna op het icoontje van een telefoon en tablet. Je kunt nu verschillende schermformaten kiezen en zien hoe je site zich gedraagt. Handig om snel veel pagina’s te bekijken.
3. PageSpeed Insights
Vul je URL in bij PageSpeed Insights en bekijk het tabblad mobiel. Onder Best practices en Toegankelijkheid zie je meldingen over bijvoorbeeld te kleine tekst, knoppen die te dicht op elkaar staan of een ontbrekende viewport-instelling.
4. Google Search Console
Search Console laat zien hoe Google je pagina’s crawlt, standaard met een mobiele crawler. Met de URL-inspectie zie je hoe Google een pagina ziet en of er bronnen niet geladen konden worden.
Checklist: werkt je site goed op mobiel?
- Is de tekst leesbaar zonder in te zoomen?
- Hoef je nergens horizontaal te scrollen?
- Zijn knoppen en links groot genoeg om met een duim te raken, met ruimte ertussen?
- Werkt het menu en is het makkelijk te sluiten?
- Is je telefoonnummer klikbaar?
- Werken formulieren goed, met het juiste toetsenbord (cijfers voor telefoonnummer, @ voor e-mail)?
- Bedekken pop-ups of de cookiebanner niet de hele pagina?
- Laden afbeeldingen snel en passen ze binnen het scherm?
- Staat dezelfde inhoud op mobiel als op desktop?
- Is de belangrijkste knop, zoals Offerte aanvragen of In winkelwagen, zichtbaar zonder lang scrollen?
Laadt je site traag op mobiel, dan helpen de tips in Website sneller maken: 12 oplossingen voor een trage site.
Website mobielvriendelijk maken: wat kun je doen?
Hoe je het aanpakt, hangt af van de oorzaak.
| Probleem | Oplossing |
|---|---|
| Site is helemaal niet responsive (oud ontwerp) | Overstappen naar een modern, responsive thema of een nieuwe site |
| Losse blokken lopen buiten het scherm | In je page builder per schermformaat de breedte en kolommen aanpassen |
| Tekst te klein of te groot op mobiel | Lettergrootte apart instellen voor mobiel in je thema |
| Knoppen te klein of te dicht op elkaar | Meer opvulling en ruimte rond knoppen en links |
| Zware afbeeldingen of video’s | Kleinere bestanden, moderne formaten, video vervangen door foto op mobiel |
| Pop-up bedekt de pagina | Kleinere melding onderaan of pas na scrollen tonen |
Werk je met een page builder zoals Elementor of Divi, dan kun je per apparaat instellingen aanpassen. Meer over de verschillen tussen builders lees je in Elementor, Divi of Gutenberg: welke page builder kies je?
Ontwerp mobile first
Bouw je een nieuwe site, ontwerp dan eerst voor de telefoon en pas daarna voor de computer. Dat dwingt je om te kiezen wat echt belangrijk is. Een desktopontwerp dat je achteraf in een smal scherm propt, wordt vaak een lange, rommelige pagina.
Praktijkvoorbeeld: een kapsalon met een onbereikbare boekknop
Een kapsalon had een site die op de computer prima oogde. Op een telefoon zat de knop Afspraak maken onder een grote foto en drie alinea’s tekst, en het boekingsformulier opende in een klein venster waarin je moest inzoomen.
De aanpassing was klein: op mobiel kwam de boekknop direct onder het logo te staan, de foto werd kleiner en het boekingssysteem opende voortaan in een volledig scherm. Ook werd het telefoonnummer klikbaar gemaakt. Niets ingewikkelds, maar het verschil voor een klant die vanaf de bank een afspraak wil maken is groot.
Zelf doen of uitbesteden?
Zelf doen gaat goed als je site een modern, responsive thema heeft en het om losse punten gaat: een knop groter maken, een afbeelding vervangen, de lettergrootte aanpassen. Met de checklist hierboven en de apparaatmodus in Chrome kom je een heel eind.
Uitbesteden is verstandig als je site op een oud thema of systeem draait, als problemen in de code zitten of als je bij elke aanpassing iets anders kapot maakt. Dan is een nieuwe, mobile first gebouwde site vaak goedkoper dan blijven repareren. Een indicatie van wat dat kost, lees je in Wat kost een website laten maken?
Tot slot
Een responsive website is de basis, maar of je site echt mobielvriendelijk is, merk je pas als je hem zelf op je telefoon gebruikt zoals een klant. Test regelmatig, los de grootste knelpunten eerst op en ontwerp nieuwe pagina’s vanaf de telefoon. Toe aan een site die vanaf het begin goed werkt op elk scherm? Bekijk dan onze pagina over een website laten maken.
Veelgestelde vragen
Wat is het verschil tussen een responsive en een mobiele website?
Een responsive website is één site die zich aanpast aan elk scherm. Een aparte mobiele website is een tweede versie, vaak op een eigen adres, die je apart moet onderhouden. Responsive is de standaard en wat Google aanraadt.
Bestaat de Mobile-Friendly Test van Google nog?
Nee, die tool is gestopt. Je test nu met je eigen telefoon, de apparaatmodus in Chrome, PageSpeed Insights en de URL-inspectie in Google Search Console.
Is mijn WordPress-site automatisch responsive?
Vrijwel alle moderne thema’s zijn responsive. Toch kunnen losse onderdelen, zoals tabellen, sliders of blokken uit een page builder, op mobiel verkeerd uitvallen. Test daarom altijd zelf.
Telt mobielvriendelijkheid mee voor SEO?
Ja. Google beoordeelt je site op de mobiele versie. Een slecht werkende mobiele site kost je bovendien bezoekers die snel afhaken, wat indirect ook je resultaten raakt.
Neem contact met ons op!
