Responsive website: wat het is en hoe je je site mobielvriendelijk maakt.

Een responsive website is een website die zich automatisch aanpast aan het scherm waarop hij wordt bekeken, van een kleine telefoon tot een breed computerscherm. De inhoud blijft gelijk, maar de indeling, de lettergrootte en het menu veranderen mee, zodat alles op elk formaat leesbaar en makkelijk te bedienen is. Dat is onmisbaar, want de meeste bezoekers bekijken uw website op hun telefoon.

Hieronder leest u hoe u test of uw website mobielvriendelijk is en welke fouten het vaakst voorkomen. Wij ontwerpen elke website op maat eerst voor de telefoon; meer over bouwen staat in ons kennisoverzicht over websitebouw.

Wat is een responsive website?

Een responsive website gebruikt één ontwerp en één adres voor elk scherm, maar verandert van indeling als het scherm smaller of breder wordt. Op een telefoon staan onderdelen onder elkaar en klapt het menu in achter een knop; op een groot scherm staan ze naast elkaar. Tekst blijft leesbaar zonder inzoomen.

Een bedacht voorbeeld: een strandpaviljoen in Domburg zet zijn gerechten op een krijtbord aan de muur en op een kaartje op tafel. Dezelfde gerechten, op het bord in drie kolommen, op het kaartje onder elkaar. De breedtes waarop een website zo van indeling wisselt, heten breakpoints (breekpunten); een goed ontwerp werkt ook daartussen.

Responsive, mobielvriendelijk en mobile first: het verschil

Responsive zegt hoe een website is opgebouwd: één website die zich aan elke schermbreedte aanpast, in plaats van een aparte mobiele website op een eigen adres.

Mobielvriendelijk zegt hoe het voor de bezoeker voelt. Een website kan responsive zijn en toch lastig werken, door te kleine knoppen of een menu dat hapert; een website mobielvriendelijk maken gaat dus verder dan de opbouw.

Mobile first is een manier van ontwerpen: u begint bij het kleinste scherm, bepaalt daar wat echt belangrijk is en bouwt daarna uit naar tablet en desktop.

Waarom is mobiel zo belangrijk?

Omdat de meeste mensen uw website op een telefoon openen, en omdat Google de mobiele versie van uw website gebruikt om pagina’s op te nemen en te rangschikken. Werkt uw website slecht op een telefoon, dan haakt de grootste groep bezoekers af, en wat alleen op de desktopversie staat, ziet Google niet.

In Nederland kwam van oktober 2025 tot en met september 2026 ruim de helft van alle bekeken webpagina’s van een telefoon, in september 2026 zelfs 65% (StatCounter), en volgens het CBS ging in 2025 96% van de 12-plussers online met een mobiele telefoon. Bij onze klanten zien we dat tot 80% van de bezoekers via een telefoon komt, de rest via tablet en desktop. Dat is onze waarneming, geen landelijk gemiddelde.

Google gebruikt de mobiele versie voor het opnemen en rangschikken van pagina’s; dat heet mobile-first indexing. Google raadt daarbij een responsive opbouw aan, en een website die op een telefoon helemaal niet werkt, kan sinds juli 2024 niet meer in Google worden opgenomen. Van de paginabeleving, waaronder de weergave op mobiel, gebruikt Google de Core Web Vitals (drie metingen bij echte bezoekers voor laden, reageren en verspringen) in de rangschikking, maar goede scores garanderen geen toppositie: de meest relevante inhoud gaat voor. Responsive is dus geen wondermiddel voor uw positie, wel een voorwaarde.

Hoe test u of uw website responsive is?

Begin op uw eigen telefoon, want daar kijken de meeste bezoekers. Loop de belangrijkste pagina’s door, draai het toestel, herhaal het op een tablet en maak daarna het browservenster op uw computer smaller en breder. Sluit af met een meting in de gratis hulpmiddelen van Google.

1. Op uw telefoon. Open uw homepage, uw belangrijkste dienstpagina en uw contactpagina. Leest u alles zonder in te zoomen of opzij te schuiven? Opent het menu soepel, en raakt u elke knop?
2. De weg naar contact. Belt uw telefoonnummer met één tik? Krijgt u in uw formulier bij het e-mailveld een toetsenbord met @, en komt het bericht aan?
3. Liggend en op een tablet. Draai uw telefoon en bekijk dezelfde pagina’s op een tablet.
4. In de browser. Maak het venster op uw computer langzaam smaller en breder, en bekijk de website ook op een breed scherm. Blijft het belangrijkste van de foto bovenaan in beeld? In Chrome kiest u via rechtermuisknop, Inspecteren en de apparaatweergave een breedte, zoals 375, 768 of 1440 pixels; volgens Google een benadering van een echt toestel.
5. Met een meting van Google. Test uw homepage op het tabblad Mobiel van PageSpeed Insights: bovenaan metingen van echte bezoekers, daaronder een Lighthouse-test (een automatische controle die een gewone telefoon nabootst) met verbeterpunten. Ook Google Search Console, het gratis programma van Google voor uw website, toont in het rapport Core Web Vitals de cijfers voor mobiel.

De aparte test voor mobielvriendelijkheid van Google en het rapport Mobiele bruikbaarheid in Search Console zijn op 1 december 2023 stopgezet; Google verwijst sindsdien naar onder meer Lighthouse.

Ziet u bij een van deze stappen iets misgaan? Neem contact met ons op, dan kijken we vrijblijvend met u mee.

De zeven fouten die het vaakst voorkomen

De eerste drie zien wij bij bestaande websites het vaakst; de andere vier noemen Google en erkende vakbronnen.

1. Het ontwerp is gemaakt voor een groot scherm. Wat u ziet: een verkleinde desktop, met onderdelen in een onlogische volgorde en de knop naar contact ver onderaan. Waarom het bezoekers kost: wie niet snel vindt wat hij zoekt, gaat terug naar Google. Oplossing: ontwerpen vanuit de telefoon.
2. Een mobiel menu dat niet soepel werkt. Wat u ziet: een menu dat hapert, niet goed sluit of submenu’s die niet openen. Waarom het bezoekers kost: op een telefoon is het menu de weg door uw website. Oplossing: het menu als apart onderdeel ontwerpen en testen (zie hieronder).
3. Afgesneden afbeeldingen bovenaan de pagina. Wat u ziet: een foto die op het ene scherm mooi is en op het andere half wegvalt. Bij websites die klanten wilden laten aanpakken, zagen we een foto van het personeel bovenaan waarop bij een breedbeeldscherm de hoofden volledig waren afgesneden, omdat het ontwerp niet op verschillende schermen was bekeken. Waarom het bezoekers kost: het eerste beeld bepaalt de eerste indruk. Oplossing: per beeld vastleggen welk deel zichtbaar blijft en waar nodig per schermformaat een eigen uitsnede gebruiken (art direction).
4. Te kleine tekst en knoppen. Wat u ziet: u moet inzoomen om te lezen, of tikt op de verkeerde link. Waarom het bezoekers kost: elke extra moeite kost bezoekers. Oplossing: tekst niet kleiner dan de standaardletter van de telefoon en knoppen van ongeveer 48 bij 48 pixels, zo’n 9 millimeter (web.dev); de toegankelijkheidsrichtlijn WCAG 2.2 noemt 24 bij 24 pixels als ondergrens.
5. Formulieren die lastig in te vullen zijn. Wat u ziet: veel velden en een gewoon toetsenbord bij het telefoonnummer. Waarom het bezoekers kost: het formulier is de laatste stap naar een aanvraag. Oplossing: alleen de nodige velden, een vaste naam boven elk veld en per veld het juiste toetsenbord en automatisch invullen (web.dev).
6. Pop-ups die het hele scherm bedekken. Wat u ziet: bij binnenkomst schuift een venster over de pagina. Waarom het bezoekers kost: zulke vensters ondermijnen volgens Google het vertrouwen en maken uw inhoud voor zoekmachines moeilijker te begrijpen. Oplossing: een balk die een klein deel van het scherm inneemt, zoals Google aanraadt.
7. Inhoud die breder is dan het scherm. Wat u ziet: de pagina schuift opzij als u scrolt, of rechts valt tekst weg. Waarom het bezoekers kost: de pagina voelt kapot. Oplossing: een viewport-instructie, een regel die de telefoon de pagina op zijn eigen breedte laat tonen, en beelden en tabellen die nooit breder worden dan het scherm (web.dev).

Meer technische controlepunten staan in onze checklist technische SEO.

Wat is mobile first ontwerpen?

Mobile first betekent dat het ontwerp begint op het kleinste scherm. Daar is weinig ruimte, dus kiest u wat echt belangrijk is: de kernboodschap, de knop naar contact en het menu. Daarna werkt u het ontwerp uit naar tablet en desktop, waar ruimte is voor extra beeld en voor onderdelen naast elkaar.

Wordt een desktopontwerp achteraf verkleind, dan belandt alles wat naast elkaar stond onder elkaar en zakt de belangrijkste knop ver weg. Begint u op de telefoon, dan klopt de volgorde vanaf het begin. Mobile first is wel geen mobile only, zegt de Nielsen Norman Group, een onderzoeksbureau voor gebruiksvriendelijkheid: ook de desktopversie verdient een eigen uitwerking.

Een goede gebruikersinterface (UI, wat u op het scherm ziet en aanraakt) en gebruikerservaring (UX, hoe logisch en prettig het gebruik voelt) houden bezoekers vast en maken er klanten van; meer daarover in wat is webdesign.

Waaraan voldoet een goed mobiel menu?

Een goed mobiel menu valt direct op, opent en sluit soepel, toont de belangrijkste pagina’s overzichtelijk onder elkaar en is met één duim te bedienen. Submenu’s openen zonder dat u verdwaalt, de pagina erachter schuift niet mee en de weg naar contact ligt binnen handbereik.

Het mobiele menu wordt vaak onderschat. Op een telefoon zit het achter een knop, meestal drie streepjes (het hamburgermenu), en volgens de Nielsen Norman Group (2016) vinden bezoekers onderdelen dan bijna half zo vaak. Een goed menu heeft:

• een herkenbare knop op een vaste plek, groot genoeg om te raken;
• een vlotte opening en een duidelijke sluitknop;
• de pagina’s in de volgorde waarin bezoekers ze zoeken, met een weg terug uit submenu’s;
• een knop of nummer voor contact in het menu zelf;
• bediening met een toetsenbord en een schermlezer (een programma dat de tekst voorleest).

Is uw website niet responsive: aanpassen of opnieuw bouwen?

Aanpassen kan als de basis goed is en het om losse fouten gaat, zoals een afgesneden beeld, te kleine knoppen of een lastig formulier. Is de website gebouwd op vaste breedtes, met een oud thema of verouderde software, of spelen er meerdere problemen tegelijk, dan is een nieuwe website meestal slimmer dan repareren.

Een website responsive maken die daar nooit voor is opgezet, betekent dat elke pagina een nieuwe indeling krijgt, terwijl de oude techniek blijft. Wij passen bestaande websites daarom niet aan; uit ervaring is een nieuwe website vaak de betere keuze. Speelt er meer dan alleen mobiel, doe dan de zelftest in ons artikel over website vernieuwen.

Waar let u op bij een bureau?

Vraag niet alleen of een website responsive wordt, want dat zegt vrijwel elk bureau. Vraag hoe het ontwerp op een telefoon eruitziet voordat er wordt gebouwd, op welke schermen wordt getest en hoe het mobiele menu werkt, en probeer zelf een paar websites van het bureau op uw telefoon.

Responsive website laten maken: vijf vragen voor een bureau

1. Zie ik het ontwerp eerst op telefoonformaat?
2. Op welke schermen wordt getest? Een goed antwoord noemt telefoon, tablet, desktop en een breed scherm.
3. Hoe werkt het mobiele menu?
4. Hoe voorkomt u dat een foto bovenaan op een ander scherm wordt afgesneden?
5. Hoe werkt het formulier op een telefoon? Denk aan het aantal velden, het toetsenbord per veld en een telefoonnummer dat met één tik belt.

Wat een website kost, leest u in wat kost een website laten maken; zelf bouwen met een bouwpakket staat in zelf een website maken of laten maken en de keuze voor een platform in maatwerk website of WordPress.

Zo werken wij: mobile first, op elk scherm getest

Wij werken mobile first: we denken eerst vanuit de telefoon hoe iets eruit komt te zien en werken het ontwerp daarna uit voor tablet en desktop. Ook de animaties en de details die een website afmaken, zitten voor een groot deel in de mobiele versie.

Het mobiele menu krijgt veel aandacht, want als alles soepel verloopt, is een website veel prettiger in gebruik; elke website krijgt een uitgewerkt mobiel menu, ook bij een kleiner budget. We testen op telefoon, tablet en desktop, met voldoende contrast, bediening met het toetsenbord en duidelijke formuliervelden, en op afgesneden beelden letten we extra.

Wilt u een website die op elk scherm goed werkt? Lees hoe wij een maatwerk website laten maken aanpakken, of neem contact met ons op.

Bronnen

Alle bronnen bekeken op 18 oktober 2026.

• Google Search Central: Mobile-first indexing best practices (mobiele versie voor opnemen en rangschikken, responsive aanbevolen, gelijke inhoud; bijgewerkt 10 december 2025)
• Google Search Central Blog: Mobile-indexing-vLast-final-final.doc (3 juni 2024: na 5 juli 2024 niet meer opneembaar als een website op een telefoon helemaal niet werkt)
• Google Search Central: Understanding page experience in Google Search results (vraag over weergave op mobiel, Core Web Vitals in de rangschikking, geen garantie; bijgewerkt 22 september 2026)
• Google Search Central Blog: The role of page experience in creating helpful content (19 april 2023: test voor mobielvriendelijkheid en rapport Mobiele bruikbaarheid stoppen op 1 december 2023, Lighthouse als alternatief)
• Google Search Central: Avoid intrusive interstitials and dialogs (opdringerige vensters, banners als alternatief)
• PageSpeed Insights: About PageSpeed Insights (mobiel en desktop, praktijk- en labgegevens)
• Chrome for Developers: Simulate mobile devices with device mode (benadering, test bij twijfel op een echt toestel)
• web.dev: Responsive web design basics (viewport, geen horizontaal scrollen, beelden binnen het scherm, breekpunten op basis van de inhoud)
• web.dev: Accessible tap targets (48 pixels, ongeveer 9 mm, 8 pixels ruimte)
• W3C: Web Content Accessibility Guidelines 2.2 (succescriterium 2.5.8, 24 bij 24 pixels)
• web.dev: Typography (tekst niet kleiner dan de voorkeursgrootte van de gebruiker)
• web.dev: Payment and address form best practices (toetsenbord per veld, labels, automatisch invullen)
• MDN Web Docs: Mobile First en Responsive design (definities, breekpunten)
• MDN Web Docs: Responsive images (art direction: een andere uitsnede per schermformaat)
• Nielsen Norman Group, 2016: Hamburger Menus and Hidden Navigation Hurt UX Metrics en Mobile First Is NOT Mobile Only
• StatCounter: Desktop vs Mobile vs Tablet Market Share Netherlands (oktober 2025 tot en met september 2026: mobiel 50,4%; september 2026: 65,0%)
• CBS, 2026: Digitalisering en kenniseconomie 2025, ICT-gebruik van personen (96% van de 12-plussers online met een mobiele telefoon of smartphone in 2025)