Mobile-first design 2026

Je website ziet er prachtig uit op je laptop. Op een telefoon? Een ramp. Knoppen te klein, tekst te dicht op elkaar, foto's die eindeloos laden. En precies dat is waar 70% van je bezoekers landt — op een mobiele schermbreedte van 375 pixels, vaak nog op een 4G-verbinding tussen twee afspraken door.

Mobile-first design is geen trend uit 2018 die we kunnen negeren. Het is sinds 2024 hoe Google je website in de eerste plaats beoordeelt. Dit artikel gaat niet over theorie. Het gaat over wat een MKB-ondernemer concreet kan doen — vandaag, deze week, dit kwartaal — om zijn website laten maken ook écht voor mobiel te laten werken.

Wat is mobile-first design?

Bij mobile-first design ontwerp je de website eerst voor de telefoon en schaal je daarna op naar tablet en desktop. Klinkt logisch, maar dat is het niet. Negen van de tien websites worden nog steeds als desktop-eerst ontworpen, waarna de mobiele versie er als een soort gekrompen variant achteraan komt. Het verschil is groot.

Een mobile-first ontwerp begint met de meest beperkte schermruimte, dwingt je om keuzes te maken over wat écht belangrijk is, en levert daardoor bijna altijd een snellere, schonere site op. Een desktop-eerst ontwerp probeert achteraf alles te laten passen op een klein scherm — met als resultaat: te veel content, te kleine elementen, en laadtijden die mobiele bezoekers niet pikken.

Waarom 70% van je MKB-verkeer mobiel is

De cijfers liegen niet. Voor de meeste MKB-websites in Nederland komt tussen de 65% en 80% van het verkeer via een mobiel apparaat. Voor lokale dienstverleners (kappers, loodgieters, restaurants) loopt dat zelfs richting de 85%. Mensen pakken hun telefoon erbij als ze op de bank zitten, in de auto staan te wachten, of net hun werk afhebben.

Dat heeft drie directe gevolgen voor jouw MKB-website laten maken:

• Google indexeert mobiel-first. Sinds 2024 is mobile-first indexing volledig: Google's crawler kijkt eerst naar je mobiele site, niet je desktop. Wat op mobiel ontbreekt, ontbreekt voor Google.
• De koopbeslissing valt vaak op mobiel. Voor lokale services boekt 60%+ van de bezoekers direct vanaf de telefoon — als de site dat tenminste toelaat.
• Mobiele bezoekers zijn sneller weg. De gemiddelde aandachtsspanne op mobiel is 8 seconden. Dat is alles wat je hebt.

Core Web Vitals: de drie cijfers waar Google op afrekent

Mobile-first design is niet alleen visueel. Google meet drie technische signalen — de Core Web Vitals — die direct meewegen in je SEO voor MKB ranking. Een snelle, stabiele mobiele site staat bijna altijd hoger dan een trage. Het zijn deze drie:

LCP — Largest Contentful Paint

Hoe snel verschijnt het grootste element op je scherm? Dat is meestal je hero-afbeelding of de eerste kop. Doel: onder de 2,5 seconden op 4G. De praktijk: de meeste MKB-sites zitten op 4 tot 6 seconden, vooral door zware ongeoptimaliseerde JPG's en blokkerende JavaScript. Fix: comprimeer afbeeldingen agressief en lazy-load alles wat niet in het eerste scherm staat.

INP — Interaction to Next Paint

Hoe snel reageert je site op een tik? Sinds maart 2024 is dit dé interactiviteitsmaatstaf (INP verving FID). Doel: onder de 200 milliseconden. Een trage menu-uitklap, een knop die pas reageert na drie seconden — dat is precies wat hier gemeten wordt. Fix: minder JavaScript op het kritieke pad, geen zware tracking-scripts in de header.

CLS — Cumulative Layout Shift

Hoeveel beweegt je content tijdens het laden? Een afbeelding zonder vaste afmetingen die later inschuift en je tekst verschuift — dat is een hoge CLS. Doel: onder de 0,1. Fix: zet altijd width en height attributen op afbeeldingen, en gebruik geen advertenties of pop-ups die content wegduwen.

Test je eigen score gratis op PageSpeed Insights van Google. Wedden dat je site rood scoort op minstens één van deze drie? Dat is het startpunt voor een serieuze professionele website laten bouwen met mobile-first als uitgangspunt.

Touch-optimization: ontwerpen voor de duim, niet de muis

Een muiscursor is precies. Een duim is grof. Een duim die ook nog langs je telefoon vasthoudt is nog grover. Mobile-first design houdt daar rekening mee — desktop-design negeert het.

• Tap-targets minimaal 44 × 44 pixels. Dat is de Apple-standaard, en Google volgt hetzelfde principe. Knoppen kleiner dan dat zijn een mistap-fabriek.
• Witruimte tussen klikbare elementen. Minstens 8 pixels tussen knoppen, links en menu-items. Anders tik je per ongeluk op de buurman.
• Belangrijke acties in de duim-zone. Het onderste derde deel van het scherm is waar je duim natuurlijk landt. Plaats hoofd-CTA's, navigatie en boekingsknoppen daar — niet bovenaan.
• Vergeet 'hover' helemaal. Op mobiel is er geen hover. Een dropdown-menu dat alleen op hover werkt is op telefoon onbruikbaar.
• Formulieren met grote velden. 16px font-size op input-velden voorkomt automatische zoom op iOS. Velden van 48px hoog tikken makkelijker.

Bij elke nieuwe website laten maken die wij voor MKB-klanten bouwen, is dit het eerste check-punt na launch: pak je telefoon, navigeer met je duim, doe een proefboeking. Lukt dat zonder twee keer terugtikken? Goed. Niet? Pas aan.

Snelheid op 4G en 5G: waarom afbeeldingen je grootste vijand zijn

Veel ondernemers testen hun website thuis op Wi-Fi. Hun klanten doen dat niet. De gemiddelde 4G-snelheid in Nederland is rond 50 Mbps in optimale omstandigheden — maar in de auto, in een winkelstraat, of in een gebouw met dikke muren zakt dat snel naar 5–10 Mbps. Dat is het werkelijke testterrein.

Het overgrote deel van de Nederlandse mobiele gebruikers zit inmiddels op 5G — daar haal je in de praktijk vaak 100 Mbps of ruim meer. Goed nieuws? Maar half. Google's PageSpeed Insights en Lighthouse simuleren bewust nog steeds een trage 4G-verbinding als test-baseline voor mobile Core Web Vitals. Je site wordt dus op 4G afgerekend, ongeacht of de meeste echte bezoekers op 5G zitten. Plus: 5G-dekking valt buiten de Randstad en in oudere gebouwen regelmatig terug naar 4G. Optimaliseren voor 4G is daarmee geen achterhaald advies — het is precies wat Google meet, én wat je slechtst-bedeelde bezoeker krijgt.

Op die snelheid is de #1 boosdoener bijna altijd hetzelfde: te zware afbeeldingen. Een hero-foto van 3 MB neemt op 4G zo'n 4–5 seconden om te downloaden. Die seconden komen direct van je LCP-score af, en bezoekers haken massaal af.

Drie concrete fixes:

1. Comprimeer agressief. JPG's op kwaliteit 75–80 met TinyPNG of Squoosh. WebP voor moderne browsers: 30% kleiner dan JPG zonder zichtbaar verlies.
2. Geef elke afbeelding de juiste afmeting. Een 3000 × 2000 pixel foto laden op een 375-pixel scherm is verspilling. Gebruik srcset zodat de browser de juiste maat ophaalt.
3. Lazy-load alles onder de fold. loading="lazy" op elke afbeelding die niet meteen zichtbaar is. Browser-native, kost niets, scheelt enorm.

De zes mobile-first fouten die de meeste MKB-websites maken

In de gemiddelde mobile-audit die wij doen op een MKB-website komen deze zes problemen telkens terug:

• Pop-ups die het hele scherm vullen. Google straft dit sinds 2017 actief af op mobiel. Als je nieuwsbrief-pop-up direct bij landing in beeld komt, verlies je ranking én bezoekers.
• Horizontaal scrollen. Een tabel die niet past, een afbeelding die te breed is — alles wat je dwingt om zijwaarts te scrollen voelt direct stuk.
• Tekst onder de 16 pixels. Op een 375-pixel breed scherm is alles onder 16px effectief onleesbaar. 17 of 18 px is de moderne minimum.
• Telefoonnummers die geen tap-to-call zijn. Zonder tel:-link moet de bezoeker handmatig overtypen. Conversiekiller.
• Embedded video's die autoplay'en. Vreten data, vertragen LCP, en de meeste mobiele browsers blokkeren ze toch. Gebruik in plaats daarvan een statische thumbnail die de video pas laadt na een tik.
• Cookie-banners die de hele homepage afdekken. Maak ze laag, gemakkelijk weg te tikken, en niet de eerste interactie die je bezoeker doet.

Mobile-first checklist: zeven dingen die je vandaag kunt doen

Geen volledige redesign nodig. Deze zeven aanpassingen aan een bestaande site leveren in de meeste gevallen een directe verbetering op zonder dat je de hele site overhoop hoeft te halen:

1. Run je homepage door PageSpeed Insights en noteer je drie Core Web Vitals scores. Doel: alle drie groen op mobiel.
2. Comprimeer alle hero- en banner-afbeeldingen tot onder 200 KB. WebP waar mogelijk.
3. Voeg loading="lazy" toe aan elke afbeelding behalve de eerste hero.
4. Test elk telefoonnummer en e-mailadres op tap-to-call en mailto:-link.
5. Vervang elke pop-up die direct bij landing verschijnt door een onopvallende slide-in onderaan.
6. Vergroot je primaire CTA-knop naar minimaal 48 pixels hoog en plaats hem in de duim-zone.
7. Doe één echte test: pak je telefoon, schakel Wi-Fi uit, ga naar je site over 4G en probeer een afspraak te boeken. Wat hapert? Dat is jouw lijst.

Wanneer je een volledige mobile-first redesign nodig hebt

Niet elke site hoeft op de schop. Maar in deze drie scenario's is een complete mobile-first rebuild bijna altijd de juiste investering voor een MKB-ondernemer:

• Je site staat op een verouderde theme of pagebuilder. Een WordPress-site uit 2018 met een trage page-builder krijgt nooit groene Core Web Vitals, hoeveel je ook tweakt. Een schone basis levert direct 40–60% snelheidswinst.
• Je conversieratio op mobiel zit onder de 1%. Als 70% van je verkeer mobiel is en daar nauwelijks iets van converteert, betaalt een redesign zich razendsnel terug.
• Je hebt sinds 2022 niet meer naar je site omgekeken. Mobile-first indexing, INP, AI Overviews — er zijn in twee jaar meer fundamentele veranderingen geweest dan in de tien jaar daarvoor.

In dat geval is een website laten maken voor MKB die vanaf de tekentafel mobile-first is opgezet, vaak goedkoper én sneller dan eindeloos blijven sleutelen aan een verouderde basis. Bij STUDIOLEE bouwen we elke nieuwe MKB-site op een lichte, mobile-first basis met groene Core Web Vitals als oplevercriterium — geen optie, maar standaard.

Conclusie

Mobile-first design is in 2026 geen design-keuze meer, het is een rankingsfactor en een conversie-factor tegelijk. 70% van je verkeer komt via mobiel, Google indexeert mobile-first, en bezoekers haken af binnen 8 seconden als je site stamelt. Begin klein: comprimeer afbeeldingen, vergroot je knoppen, doe een 4G-test op je eigen telefoon. Werkt het nog niet, overweeg dan serieus een nieuwe website laten maken met mobiel als startpunt.

Wil je weten waar jouw site nu staat op mobiel? Vraag een gratis AI scan aan en je krijgt binnen twee minuten een rapport met je Core Web Vitals scores, de grootste mobile-pijnpunten en concrete next steps. Geen verplichting, geen sales-gesprek vooraf — alleen het cijfer waar je vandaag mee verder kunt.