Wat is een responsive website, en waarom kijkt Google alleen nog naar de mobiele versie?

Pak je telefoon, open je eigen website en probeer met één duim een afspraak te maken of je telefoonnummer te bellen. Moet je inzoomen, zijwaarts scrollen of drie keer mis tikken op een te kleine knop, dan is je site niet responsive, of niet goed. En dat is niet alleen een klantprobleem: Google beoordeelt je site op precies die mobiele weergave, ook voor mensen die op een laptop zoeken.

Wat is responsive webdesign precies?

Responsive webdesign is een manier van bouwen waarbij de pagina zelf kijkt hoe breed het scherm is en zich daarnaar indeelt. Dezelfde pagina, met dezelfde tekst en foto’s, toont op een laptop drie diensten naast elkaar en op een telefoon dezelfde drie onder elkaar. Menu’s vouwen samen tot een knop, foto’s worden kleiner geladen, tekst blijft leesbaar zonder inzoomen. Er is dus één website en één adres; er bestaat geen aparte “mobiele versie” die je apart moet bijhouden.

De term stamt uit 2010, en sinds ongeveer 2015 is het de standaard manier van bouwen. Een site die nu wordt opgeleverd en niet responsive is, is simpelweg niet af.

Waarom telt vooral mobiel?

Twee redenen. Ten eerste komen bij de meeste lokale bedrijven, van kapper tot slotenmaker, de meeste bezoekers via een telefoon; wie buitengesloten staat of een kapper zoekt, doet dat niet achter een bureau. Ten tweede gebruikt Google al enkele jaren “mobile-first indexering”: het haalt je pagina’s op zoals een telefoon ze ziet, en beoordeelt op basis daarvan wat erop staat en hoe bruikbaar de pagina is. Tekst die alleen op de desktopversie staat, telt niet. Een knop die op een telefoon onbruikbaar is, telt tegen je.

Daar komt bij dat Google’s snelheidsmetingen (de Core Web Vitals) worden gemeten op telefoons, vaak op een matig netwerk. Een site die op je laptop snel lijkt, kan op een telefoon door de test zakken. Meer daarover in hoe snel moet een website laden?.

Hoe controleer je of je site responsive is?

Zonder gereedschap, in twee minuten:

• Open je site op een telefoon. Moet je zijwaarts scrollen of inzoomen om tekst te lezen? Dan is hij niet responsive.
• Tik op het telefoonnummer. Begint de telefoon te bellen? Zo niet, dan ontbreekt een kleine maar belangrijke instelling.
• Vul het contactformulier in. Springt het toetsenbord goed mee, zijn de velden groot genoeg, kun je verzenden zonder mis te tikken?
• Open het menu. Zijn alle pagina’s bereikbaar, ook de tweede laag?
• Maak op een laptop het browservenster smaller door het met de muis te verkleinen. Een responsive site herschikt zich zichtbaar; een oude site krijgt een horizontale schuifbalk.
• Voer je adres in bij Google PageSpeed Insights en kijk naar het mobiele resultaat; onder “toegankelijkheid” en “best practices” zie je klachten over te kleine tekst of knoppen.

Wat is het verschil tussen responsive, adaptive en een aparte mobiele site?

Aanpak	Hoe het werkt	Voordeel	Nadeel
Responsive	Eén pagina die zich vloeiend aanpast aan elke breedte	Eén adres, eén keer onderhouden, standaard voor Google	Vraagt om zorgvuldig ontwerp voor kleine schermen
Adaptive	Enkele vaste indelingen (telefoon, tablet, desktop) waaruit de server kiest	Veel controle per apparaat	Nieuwe schermformaten vallen tussen wal en schip
Aparte mobiele site (m.jouwbedrijf.nl)	Een tweede website voor telefoons	Was in 2010 een oplossing	Dubbel onderhoud, verwarring voor Google, verouderd

Voor een bedrijfssite is responsive de enige zinvolle keuze. Kom je nog een m.-adres tegen, dan is de site aan vervanging toe.

Waar gaat het vaak mis, ook op een “responsive” site?

Een site kan technisch responsive zijn en toch onbruikbaar op een telefoon. De klassieke fouten:

• Prijslijsten als afbeelding of pdf. Op een telefoon onleesbaar en voor Google onzichtbaar. Zet prijzen als gewone tekst of tabel op de pagina.
• Tekst op foto’s. De foto krimpt, de tekst krimpt mee tot een streepje.
• Pop-ups. Een venster dat op een laptop een hoekje inneemt, bedekt op een telefoon het hele scherm. Google rekent dat aan.
• Te kleine knoppen en te veel knoppen naast elkaar. Een duim is een centimeter breed; ontwerp daarvoor.
• Tabellen met acht kolommen. Die worden op een telefoon een puzzel. Kies minder kolommen of laat de tabel binnen zijn eigen kader scrollen.
• Formulieren met tien velden. Op een telefoon haakt iedereen af na vier. Vraag alleen wat je echt nodig hebt.
• Hetzelfde grote fotobestand voor elk scherm. Een foto van 3 MB die op een telefoon in een kader van 400 pixels wordt geperst, kost seconden laadtijd. Een goed gebouwde site levert per scherm een passend formaat.

Zijn nieuwe websites altijd responsive?

Vrijwel altijd, of je nu zelf bouwt in Wix of Webador, WordPress met een modern thema gebruikt of een bureau inhuurt. Het verschil zit in hoe goed. Websitebouwers laten je de mobiele weergave apart bekijken en aanpassen; doe dat ook, want de automatische indeling zet regelmatig het belangrijkste blok onderaan. Bij een bureau hoort mobiele weergave een vast onderdeel van de oplevering te zijn. Vraag ernaar, en test het zelf voordat je akkoord geeft; het staat niet voor niets in de website-checklist voor ondernemers.

Twijfel je over je huidige site, dan zie je in een gratis website-check hoe hij op een telefoon presteert, inclusief snelheid en bruikbaarheid.

Veelgestelde vragen

Kan mijn bestaande site responsive gemaakt worden?

Soms, met een nieuw thema of template, als de inhoud goed gestructureerd is. Vaak is het goedkoper om de inhoud over te zetten naar een nieuwe basis dan om een oude site te verbouwen.

Is “mobielvriendelijk” hetzelfde als responsive?

Bijna. Responsive is de bouwtechniek; mobielvriendelijk is het resultaat dat Google beoordeelt. Een site kan responsive zijn en toch onvriendelijk door pop-ups of kleine knoppen.

Moet ik ook rekening houden met tablets?

Een responsive site regelt dat vanzelf: een tablet is gewoon een breedte tussen telefoon en laptop in. Controleer wel een keer of het menu en de foto’s op die tussenmaat netjes vallen.