Responsive design
Ook wel responsive website
Wat betekent responsive design?
Responsive design (ook wel een responsive website) is een manier van bouwen waarbij je website zich automatisch aanpast aan elk scherm. Tekst, foto's en knoppen schuiven zo mee dat alles goed leesbaar en bruikbaar blijft op telefoon, tablet en computer.
Veelgestelde vragen over responsive design
Hoe test ik of mijn website goed werkt op mobiel?
Test op twee manieren: met je eigen apparaten en met je browser.
- Open je site op je telefoon en tablet, zowel staand als liggend.
- Open je site in Chrome, klik met de rechtermuisknop op de pagina en kies Inspecteren. Klik daarna op het icoontje voor apparaten. Je ziet dan hoe je site er op verschillende schermformaten uitziet.
- Let op: moet je inzoomen of opzij scrollen? Zijn knoppen groot genoeg voor je duim? Werkt het menu?
- Vul ook je contactformulier in en doorloop eventueel je bestelproces.
Hoe maak ik mijn WordPress-website responsive?
Dat regel je vooral met je thema. Bijna alle moderne WordPress-thema's zijn al responsive, zoals Astra, GeneratePress en Kadence. Een plugin die een verouderd thema alsnog netjes responsive maakt, bestaat eigenlijk niet.
- Controleer in de themabeschrijving of het thema responsive is.
- Werk je met de blokeditor? Gebruik dan blokken zoals Kolommen. Die komen op mobiel automatisch onder elkaar te staan.
- Gebruik je Elementor? Schakel dan in de editor naar de weergave voor tablet en mobiel en pas daar lettergrootte en marges aan.
Is je thema oud, dan is overstappen meestal de beste oplossing.
Is mijn site responsive als hij op mobiel kleiner wordt?
Nee. Als je hele site op je telefoon verkleind wordt weergegeven, is hij juist niet responsive. Je bezoeker moet dan inzoomen en heen en weer schuiven om iets te lezen of op een knop te tikken. Bij een responsive site verandert de opbouw: kolommen komen onder elkaar, het menu klapt in tot een menuknop en tekst blijft leesbaar zonder in te zoomen. Een ander misverstand is dat een aparte mobiele versie hetzelfde is. Dat is een tweede website die je los moet bijhouden, terwijl responsive design één site is die zich aanpast.
Wat kost het om mijn bestaande website responsive te maken?
Dat hangt vooral af van hoe je site nu gebouwd is. Er zijn grofweg drie situaties:
- Je thema is al responsive, maar een paar pagina's lopen uit beeld. Dan gaat het vaak om kleine aanpassingen.
- Je gebruikt een paginabouwer en de mobiele weergave is nooit ingesteld. Dan moet je elke pagina langs, en dat kost meer tijd naarmate je meer pagina's hebt.
- Je site draait op een verouderd thema of systeem. Dan is een nieuw thema of een nieuwe site vaak voordeliger dan blijven repareren.
Laat een webbouwer eerst je site bekijken, zodat je offertes eerlijk kunt vergelijken.
Waarom laadt mijn website zo traag op mijn telefoon?
Meestal komt dat door te grote afbeeldingen. Een responsive site maakt foto's kleiner op het scherm, maar je telefoon downloadt soms toch het volledige bestand. Mobiele verbindingen zijn bovendien vaak trager dan wifi.
- Comprimeer je afbeeldingen met ShortPixel en laat ze omzetten naar WebP, een lichter bestandsformaat.
- Zet caching aan met WP Rocket of LiteSpeed Cache, zodat pagina's sneller klaarstaan.
- Verwijder sliders, video's en plugins die je niet echt nodig hebt.
- Meet het resultaat met PageSpeed Insights van Google en kijk daar naar de mobiele score.
