Mobile-first 2026 — voor MKB

Wat mobile-first NIET is

"Mobile-first" wordt gebruikt voor twee verschillende dingen:

• Mobile-first design (echte definitie): ontwerp eerst de telefoon-versie, dan desktop. Filosofie.
• "Ook op mobiel werkt" (slappe variant): site is gemaakt voor desktop, daarna gepatched voor mobiel. Niet hetzelfde.

Wij bedoelen optie 1. Optie 2 is wat de meeste WordPress-thema's uit 2015-2018 doen, en wat de problemen veroorzaakt die je in "site werkt niet op de telefoon" tegenkomt.

Waarom Google mobile-first eist

Sinds september 2019 indexeert Google met de mobiele versie van je site als bron. Wat betekent dat?

• De Googlebot crawlt je site als een mobiele user-agent (telefoon-simulatie)
• Content die alleen op desktop staat (verborgen op mobiel) telt niet voor ranking
• Performance-metingen (Core Web Vitals) komen uit veld-data op mobiele apparaten
• Schema.org-markup wordt gelezen vanuit mobiele HTML

Concreet: als jouw mobiele site een kortere of slechtere versie is dan desktop, mist Google een hoop content. Je rankt dus op de mobiele beperking, niet op de desktop-volledigheid.

Hoe een mobile-first proces eruit ziet

Bij DesignCheck volgen we deze volgorde voor elke nieuwe MKB-site:

1. Wireframe op 360px breed. Alleen de kern: hero, primaire CTA, drie kernpropositions. Alles wat hier niet past, hoort niet op de homepage.
2. Tap-targets ≥ 44px. Knoppen, links, menu-items — alles moet met één duim klikbaar zijn zonder mis-klikken.
3. Eerst de tekst, dan de plaatjes. Schrijf eerst de copy voor mobiel (korte zinnen, scanbaar), kies daarna foto's die toegevoegde waarde hebben.
4. Test op echte hardware. Niet alleen in Chrome DevTools — op een echte iPhone én een echte budget-Android.
5. Scale op naar tablet (768px) en desktop (1200px+). Voeg extra ruimte toe, maar nooit nieuwe content. Wat op mobiel hoort hoort op desktop ook.

De vraag is niet "hoe schrap ik dingen van desktop om mobiel passend te maken?". De vraag is: "wat is essentieel genoeg om op de telefoon te tonen?" Alles wat niet door die test komt, is overbodig op desktop ook.

Vier concrete mobile-first regels

1. Eén kernactie per pagina

Desktop-design heeft vaak 4-5 CTA's "boven de fold". Op mobiel: één. De kernactie (offerte, contact, bel-knop). Alle andere CTA's komen later in de scroll.

2. Menu maximaal 5-7 items

Hamburger-menu's met 15+ items zijn een UX-anti-pattern. Hou je primaire navigatie op 5-7 items. Sub-items in een tweede laag, niet zichtbaar bij eerste opening.

3. Formulieren onder 5 velden

Elke extra invul-veld op mobiel = 7-12% lagere conversie. Snij formulieren tot het minimum: naam, e-mail, vraag. Adres en telefoon kun je later vragen.

4. Foto's onder 200 KB elk

WebP-formaat, srcset, max 800px breed voor mobiele weergave. Detail: image-optimalisatie voor MKB.

Mobile-first en performance

Mobiele apparaten zijn trager dan desktops. Een goedkope Android van 4 jaar oud heeft 10% van de rekenkracht van een MacBook. Een mobile-first site:

• Heeft minder JavaScript (omdat je begon met "wat heeft de mobiel echt nodig")
• Heeft kleinere afbeeldingen
• Laadt sneller op 4G dan een "ook-mobiel"-site op WiFi
• Scoort beter op Core Web Vitals (zie CWV voor MKB)

Wanneer rebuild zinvol is

Drie scenario's waarin we MKB-klanten een mobile-first rebuild aanraden:

• Mobiele bouncerate boven 65%. Bezoekers haken af voordat ze iets gezien hebben.
• Mobiele conversie minder dan helft van desktop. Normale ratio is 60-80%. Onder 50% = mobiel kapot.
• Lighthouse mobiel onder 50. Symptoom van een niet mobile-first basis.

DesignCheck-rebuilds zijn standaard mobile-first met PageSpeed 90+ garantie. Zie prijzen en de verliescalculator voor wat dit oplevert. Lokaal werken we vanuit DesignCheck Mijdrecht.

De geschiedenis in een halve pagina

De term mobile-first komt van Luke Wroblewski, die hem in 2009 introduceerde in een blogpost en in 2011 een boek met dezelfde titel publiceerde. Zijn argument was simpel. De beperkingen van een telefoon dwingen je tot keuzes. Welke informatie is essentieel, welke acties zijn primair, welke afbeeldingen voegen iets toe. Als je die keuzes maakt voor een schermbreedte van 320 pixels, behoud je die helderheid op grotere schermen vanzelf.

Tot 2014 ontwierpen veruit de meeste bureaus desktop-first en patchten ze mobiel achteraf. Dat lukte zolang het mobiele aandeel onder de 30 procent bleef. In 2016 trok mobiel de desktop voorbij in Nederland. In 2019 maakte Google mobile-first indexing de standaard voor nieuwe sites. In 2023 stopte Google met het indexeren van sites die niet mobielklaar waren. Wie nu nog desktop-first werkt, bouwt voor een vergrijzend deel van de markt.

Wat in 2026 anders is dan in 2019 is de fragmentatie. Smartphones variëren van 360 tot 430 pixels breed, opvouwbare toestellen lopen tot 720 pixels, tablets zitten tussen 768 en 1024 pixels. Een mobile-first-aanpak ontwerpt voor de smalste smartphone en schaalt vanaf daar omhoog. Niet voor één hypothetisch gemiddeld toestel, maar als een trapsgewijs systeem.

Wat mobile-first betekent voor copywriting

De grootste fout van een desktop-first-site is niet de layout, het is de tekst. Lange paragrafen die op desktop sierlijk overlopen worden op mobiel een onleesbare muur. Een hero met de zin Welkom bij onze website, wij zijn een gespecialiseerd bureau dat zich richt op het ontwerpen van krachtige merkidentiteiten doet het op desktop matig en op mobiel slecht. Vervang door drie woorden en een verhelderend zinnetje en je hebt iets dat ook werkt op een Samsung A52 met de duim half over het scherm.

Mobile-first copywriting volgt drie regels. Eén, de eerste zin staat helemaal alleen en moet kloppen zonder context. Twee, geen zinnen langer dan twintig woorden. Drie, elk onderdeel van de pagina staat los, zodat een bezoeker midden in een sectie kan landen en alsnog begrijpt wat er staat. Wie zo schrijft, ontdekt dat de pagina opeens korter wordt zonder dat informatie verdwijnt. Dat is de winst van de discipline.

Voor lokale dienstverleners is dit extra belangrijk. Een hovenier uit Vinkeveen die via Google zoekt naar een nieuwe boekenkast voor zijn kantoor klikt vanaf een tankstation op zijn telefoon. De drie seconden waarin hij beslist of jouw site kloppend voelt, vinden plaats op mobiel. Op dat moment moet je hoofdboodschap, je bewijsmateriaal en je actie zichtbaar zijn zonder scrollen.

Mobile-first en SEO in 2026

Google's mobile-first indexing betekent dat alleen wat zichtbaar is in de mobiele HTML telt voor je ranking. Dat heeft drie praktische gevolgen die nog steeds verkeerd gaan op de meeste MKB-sites. Eén, content die verstopt zit achter tabs of accordions moet wel in de DOM staan, anders ziet Google hem niet. Twee, lazy-loaded content onder de fold moet binnen de eerste seconden in beeld komen, anders crawlt Google hem niet. Drie, structured data moet op de mobiele variant identiek zijn aan de desktop-variant, anders raakt je Rich Results in de war.

Een tweede thema is page experience. Google publiceert geen exacte ranking-formule, maar uit onderzoek van semrush, ahrefs en backlinko in 2025 blijkt dat sites met CWV in het groen op alle drie de metrics gemiddeld 14 procent hoger ranken dan vergelijkbare sites met oranje of rood. Op een term met 1000 zoekopdrachten per maand maakt dat het verschil tussen pagina 1 en pagina 2.

Een derde thema is internationalisering. Wereldwijde bezoekers betekenen wereldwijde latency. Een site die in Mijdrecht in 800 ms laadt, doet er in São Paulo 4,3 seconden over zonder edge-caching. Mobile-first hosting in 2026 betekent een CDN met edge-locaties wereldwijd, plus statische output waar mogelijk. DesignCheck deployt naar Vercel of Cloudflare Pages, met edge-functies voor dynamische routes en static assets voor alles wat onveranderlijk is.

Voorbeeld uit de praktijk — Keurmeesters

Keurmeesters is een Nederlands energielabel-bureau dat in mei 2026 live ging op keurmeesters.vercel.app. De site is volledig mobile-first opgebouwd. De hero past in één scherm op een iPhone SE, het aanvraagformulier heeft drie velden voor de eerste stap, het adresveld gebruikt autocomplete via de BAG-API, en alle CTA's zijn telefoon-vriendelijk. Lighthouse-score op mobiel is 98. LCP is 1,1 seconde op een gesimuleerde Moto G4.

Wat we anders deden dan een typische bouwer, we begonnen met wireframes op 360 pixels en bouwden pas in week drie de tablet- en desktop-varianten. De copy schreven we eerst voor mobiel, met zinnen onder de twintig woorden. De foto's selecteerden we op visuele kracht in een vierkant uitsnede, niet op breedbeeld. De hoofd-CTA is een sticky knop onderaan op mobiel en een prominente knop in de hero op desktop, met identieke tekst en bestemming.

Resultaat in week één, conversieratio op mobiel was 9,8 procent, op desktop 11,2 procent. De ratio mobiel-desktop is 87 procent, ruim boven de drempel van 80 procent die we als gezond mobile-first beschouwen. Bij een gemiddelde klantwaarde van €295 voor een energielabel, levert die mobiele conversie ongeveer €4.300 extra per maand op vergeleken met de oude site.

Stappenplan voor een mobile-first transitie

Heb je een bestaande site die niet mobile-first is, dan is een geleidelijke transitie vaak haalbaar zonder volledige rebuild. Volg deze volgorde.

1. Audit je huidige site op mobiel, met de acht-tests-methode uit de gids elders in dit cluster.
2. Identificeer de drie pagina's met het meeste mobiele verkeer in Google Analytics of Search Console.
3. Herontwerp die drie pagina's mobile-first op papier of in Figma, met een breedte van 360 pixels.
4. Implementeer de mobile-first versie van die drie pagina's eerst, met aparte mobiele breakpoints.
5. Meet vier weken lang het verschil in conversie tussen de oude en de nieuwe pagina's.
6. Rol de nieuwe aanpak uit over de rest van de site als de cijfers kloppen.
7. Vernieuw je homepage als laatste, niet als eerste, om de leereffecten elders eerst mee te nemen.
8. Sluit af met een design-system in CSS-variabelen en herbruikbare componenten, zodat toekomstige toevoegingen automatisch mobile-first zijn.

Dit traject kost in een Groei-pakket van €3.995 doorgaans vier tot zes weken. In een Starter van €1.995 doen we het in compactere vorm voor sites met minder dan tien pagina's. Voor multi-locatie of e-commerce zit je vaak in Premium van €6.995, omdat daar extra werk zit aan structured data, CDN-configuratie en image-pipeline.

Wat doe je vandaag?

Open je site op een echte smartphone, niet op je laptop. Schrijf op wat je niet ziet binnen het eerste scherm. Schrijf op welke knop je het eerst zou willen tikken. Schrijf op welke tekst onleesbaar klein is. Met die drie observaties weet je of je site mobile-first is of dat hij dat alleen op papier claimt. Wil je een tweede mening, vraag de gratis audit aan en stuur je drie observaties mee. Wij gebruiken ze als startpunt voor de analyse.

Gerelateerde gidsen

• Diagnose: site niet op telefoon
• Responsive vs adaptive
• Mobiele conversie verbeteren
• Tap-targets 44px

FAQ — mobile-first 2026

Door Lorenzo Ruisi — DesignCheck. Laatst bijgewerkt 16 mei 2026.