Responsive design uitgelegd: zo maak je je website mobielvriendelijk
Kort antwoord
Responsive design is een manier van websites bouwen waarbij dezelfde pagina zich automatisch aanpast aan de schermgrootte: op een telefoon staat alles onder elkaar, op een laptop naast elkaar. Het werkt met flexibele layouts, schaalbare afbeeldingen en media queries in CSS. Een bestaande website maak je responsive door de opmaak aan te passen, over te stappen op een responsive thema of, bij verouderde techniek, opnieuw te bouwen.
Kernpunten
- Eén website, één set HTML, die zich aanpast aan elk scherm: dat is responsive design.
- Google indexeert en rangschikt op basis van de mobiele versie van je site (mobile-first indexing).
- Een bestaande site maak je responsive via CSS, een ander thema of een nieuwe opbouw. Welke route past, hangt af van de techniek eronder.
- De oude Mobile-Friendly Test van Google bestaat niet meer. Test met Lighthouse, PageSpeed Insights en vooral op echte telefoons.
Wat is responsive design precies?
Responsive web design is een aanpak waarbij een webpagina goed wordt weergegeven op alle schermformaten en resoluties, met behoud van gebruiksgemak. De term werd in 2010 geïntroduceerd door webdesigner Ethan Marcotte, zoals MDN beschrijft.
Vroeger bouwden bedrijven soms een aparte mobiele website, vaak op een adres als m.jouwbedrijf.nl. Dat betekende twee versies onderhouden, met het risico dat de mobiele versie minder inhoud had. Bij responsive design is er één website, met dezelfde inhoud en dezelfde URL's, die zich per scherm anders presenteert.
Waarom is responsive design belangrijk voor SEO?
Omdat Google de mobiele versie van je website gebruikt om die te indexeren en te rangschikken. Google noemt dit mobile-first indexing: de inhoud die de smartphone-crawler ziet, is de inhoud die telt.
Google raadt responsive design uitdrukkelijk aan, omdat het het eenvoudigste ontwerppatroon is om te implementeren en te onderhouden. Staat er op je mobiele versie minder tekst, ontbreken er afbeeldingen of zijn links niet bereikbaar, dan kan dat je vindbaarheid kosten, ook voor mensen die op desktop zoeken.
Hoe werkt responsive design technisch?
Responsive design is geen losse technologie, maar een combinatie van technieken in HTML en CSS. De belangrijkste zijn:
| Techniek | Wat het doet | Voorbeeld |
|---|---|---|
| Viewport-metatag | Zegt tegen mobiele browsers dat ze de echte schermbreedte moeten gebruiken | meta name=viewport content=width=device-width |
| Flexibele layouts | Kolommen en blokken schalen mee in plaats van vaste pixelbreedtes | CSS Grid en Flexbox |
| Media queries | Andere opmaak vanaf een bepaalde schermbreedte | Vanaf 768 pixels twee kolommen naast elkaar |
| Responsive afbeeldingen | Afbeeldingen schalen mee en de browser kiest een passend formaat | max-width: 100%, srcset en het picture-element |
| Responsive typografie | Lettergrootte past zich aan het scherm aan, zonder zoomen te blokkeren | Relatieve eenheden zoals rem en clamp() |
Zonder de viewport-metatag doen mobiele browsers alsof het scherm ongeveer 980 pixels breed is en verkleinen ze de hele pagina. Dan werken je media queries niet zoals bedoeld.
Wat is mobile-first ontwerpen?
Mobile-first betekent dat je begint met het ontwerp voor het kleinste scherm en daarna uitbreidt voor grotere schermen. MDN raadt dit ook aan: begin met een layout in één kolom en voeg complexiteit toe naarmate er meer ruimte is.
Het grote voordeel is focus. Op een telefoon is geen ruimte voor overbodige elementen, dus je moet kiezen wat echt belangrijk is. Die keuzes maken de desktopversie meestal ook beter. Bovendien laden mobile-first opgebouwde pagina's vaak sneller op telefoons, omdat zware elementen pas voor grotere schermen worden toegevoegd.
Een website die klanten oplevert?
Vaste prijs vooraf. Reactie binnen 24 uur.
Waar let je op bij een goede mobiele ervaring?
Een site die zich aanpast is niet automatisch prettig op mobiel. Let ook op deze punten:
- Knoppen en links groot genoeg om met een duim te raken, met ruimte ertussen.
- Lettergrootte die zonder zoomen goed leesbaar is.
- Een overzichtelijk menu en een zichtbare belangrijkste actie, zoals bellen of een offerte aanvragen.
- Telefoonnummers die direct bellen en adressen die naar een kaart linken.
- Formulieren met het juiste toetsenbord (cijfers voor telefoonnummer, @ voor e-mail).
- Geen pop-ups die het hele scherm bedekken en moeilijk te sluiten zijn.
- Tabellen en brede elementen die horizontaal scrollen binnen hun eigen blok, niet de hele pagina.
- Snelle laadtijd: afbeeldingen in het juiste formaat en zo weinig mogelijk scripts.
Hoe maak je een bestaande website responsive?
Of je een bestaande website responsive kunt maken, hangt vooral af van de techniek waarop hij is gebouwd. Kijk eerst wat er nu misgaat: open je site op je eigen telefoon, draai Lighthouse of de gratis websitescan, en noteer per pagina waar je moet zoomen, horizontaal moet scrollen of niet bij een knop kunt. Daarna kies je een van drie routes.
| Route | Wanneer geschikt | Wat het inhoudt | Let op |
|---|---|---|---|
| Opmaak aanpassen (CSS) | De site draait op een redelijk modern systeem, alleen de opmaak schiet tekort | Viewport-tag toevoegen, vaste breedtes vervangen door flexibele, media queries per breakpoint | Werkt slecht als de pagina's met tabellen of vaste pixelmaten zijn opgebouwd |
| Ander thema of template | WordPress of een websitebouwer met een verouderd thema | Overstappen op een responsive thema en de inhoud opnieuw in de blokken zetten | Pagina's kunnen er anders uitzien; controleer elke pagina en je URL's |
| Opnieuw bouwen | Verouderde techniek, veel losse aanpassingen of de site is ook inhoudelijk toe aan vernieuwing | Nieuwe opbouw, mobile-first, met de bestaande inhoud en URL's als uitgangspunt | Zet redirects als URL's veranderen, anders verlies je posities in Google |
Welke mobiele problemen kom je het vaakst tegen?
Bij het bekijken van oudere websites zien we steeds dezelfde problemen terug. De meeste hebben een duidelijke oorzaak en een gerichte oplossing.
| Probleem | Meestal de oorzaak | Oplossing |
|---|---|---|
| De hele pagina is piepklein | Geen viewport-metatag | Viewport-tag toevoegen in de head |
| Je moet horizontaal scrollen | Afbeeldingen, tabellen of blokken met een vaste breedte | max-width: 100% voor beelden, tabellen in een eigen scrollblok |
| Tekst te klein om te lezen | Vaste, kleine lettergroottes in pixels | Basisgrootte van ongeveer 16 pixels en relatieve eenheden |
| Knoppen raak je niet goed | Links te klein en te dicht op elkaar | Grotere klikvlakken en meer ruimte ertussen |
| Menu past niet | Horizontaal menu met veel items | Een inklapbaar menu op kleine schermen |
| Pagina laadt traag op 4G | Grote foto's en veel scripts of plugins | Afbeeldingen verkleinen en comprimeren, onnodige scripts weg |
| Pop-up blokkeert alles | Nieuwsbrief- of cookiemelding over het hele scherm | Kleinere melding die de inhoud niet afdekt |
Wanneer is nieuw bouwen beter dan aanpassen?
Soms is een nieuwe website goedkoper en sneller dan een bestaande site responsive maken. Dat is meestal zo als de site op verouderde techniek draait, als elke pagina apart moet worden aangepast, of als de inhoud en structuur toch al aan vernieuwing toe zijn. Je betaalt dan twee keer: nu voor de aanpassing en straks voor de nieuwe site.
Twijfel je, laat dan eerst kijken. In het artikel over een website herontwerp lees je hoe je bij een nieuwe site je domein en posities in Google behoudt. Wil je meteen een site die op elk scherm goed werkt, bekijk dan responsive website laten maken. Een Starter-website bij Easybrand begint vanaf vanaf € 499, met een vaste prijs vooraf.
Hoe test je of je website goed responsive is?
Test op meerdere manieren, want elke methode vangt andere problemen op. De Mobile-Friendly Test en het rapport Mobiele bruikbaarheid van Google zijn in december 2023 gestopt; Google verwijst sindsdien naar Lighthouse. Een snelle eerste check doe je met de gratis websitescan, die met Lighthouse ook je mobiele snelheid meet. Meer over snelheid lees je in website-snelheid en SEO.
- 1Gebruik de apparaatmodus van je browserIn Chrome of Firefox kun je via de ontwikkelaarstools (F12) verschillende schermformaten simuleren. Handig voor een snelle eerste controle.
- 2Test op echte telefoonsOpen je site op minstens één iPhone en één Android-toestel. Probeer menu, formulieren en knoppen echt te gebruiken.
- 3Draai PageSpeed Insights of LighthouseDeze tools tonen je mobiele prestaties en wijzen op problemen zoals te kleine tekst of knoppen die te dicht op elkaar staan.
- 4Controleer Search ConsoleKijk bij het rapport over Core Web Vitals hoe je pagina's scoren voor mobiele bezoekers.
- 5Voer een echte taak uitVraag een offerte aan of zoek een dienst op je telefoon, en let op elk moment waarop je moet zoomen of twijfelt.
Conclusie
Responsive design zorgt dat je website op elk scherm goed werkt, met één set inhoud en één onderhoudsplek. Omdat Google de mobiele versie van je site gebruikt voor indexering, is het de standaard voor elke moderne website. Een bestaande site maak je responsive via de opmaak, een ander thema of een nieuwe opbouw; welke route het verstandigst is, hangt af van de techniek eronder en van hoeveel er toch al moet veranderen.
Veelgestelde vragen
Is elke moderne website automatisch responsive?
De meeste moderne thema's en frameworks zijn responsive opgezet, maar dat garandeert geen goede mobiele ervaring. Maatwerk-onderdelen, tabellen, pop-ups en zware afbeeldingen gaan vaak alsnog mis. Test daarom altijd zelf.
Wat is het verschil tussen responsive en adaptive design?
Responsive design gebruikt flexibele layouts die vloeiend meeschalen. Adaptive design werkt met een paar vaste layouts voor specifieke schermformaten. Responsive is tegenwoordig de standaard en wordt door Google aanbevolen.
Wat kost het om een website responsive te maken?
Dat hangt af van de techniek. Kleine aanpassingen in de opmaak zijn soms in een paar uur gedaan; een site met vaste breedtes en verouderde code vraagt vaak een nieuwe opbouw. Een nieuwe Starter-website bij Easybrand begint vanaf € 499.
Hoe maak ik mijn WordPress-website mobielvriendelijk?
Kijk eerst of je thema nog updates krijgt en responsive is. Is dat niet zo, dan is overstappen op een modern thema vaak de snelste route. Controleer daarna elke pagina op je telefoon, want blokken uit page builders en oude shortcodes gaan bij een themawissel regelmatig mis.
Heb ik nog een aparte app nodig als mijn website responsive is?
Voor de meeste bedrijven niet. Een app is pas zinvol als klanten je dienst heel vaak gebruiken of functies nodig hebben die een website niet goed kan bieden. Een goede responsive website of web-app volstaat meestal.
Wat zijn breakpoints?
Breakpoints zijn schermbreedtes waarop de layout verandert, bijvoorbeeld van één naar twee kolommen. MDN adviseert om breakpoints te kiezen op de plek waar je inhoud er niet meer goed uitziet, niet op basis van specifieke apparaten.
Bronnen
Meer van Easybrand