Mobiele conversie versus desktop: waar 64% van de verloren leads valt

Op de gemiddelde MKB-website komt 60-70% van het verkeer via mobiel. Maar als je naar de aanvragen kijkt: vaak slechts 30%. Tussen het mobiele verkeer en de mobiele aanvragen verlies je 64% van je potentiële leads. Niet omdat mobiele bezoekers minder serieus zijn, maar omdat de meeste sites de ervaring niet eens fatsoenlijk neerzetten.

Hieronder de vier grootste mobile-killers en hun fixes.

Wat heatmaps op mobiel laten zien

Drie patronen die we structureel terugzien:

• Te kleine tap-zones (knoppen onder 44x44px). Bezoekers proberen, missen, frustreren.
• Horizontaal scrollen ongewenst. Tabellen, brede afbeeldingen, formulieren te wijd voor de schermbreedte.
• Sticky elementen die content blokkeren. Mobile-CTA's die over content vallen, banners die de hero-tekst verbergen.

Vier mobile-killers

Killer 1: te kleine tekst

Body-tekst onder 16px is op mobiel onleesbaar. Het brein registreert het als 'moeilijk te lezen', en mobiele bezoekers schakelen sneller af dan desktop-bezoekers. Standaard wel 17-18px op mobiel. Fix: 5 minuten in je CSS-root.

Killer 2: knoppen die nooit getapt worden

Knoppen onder 44x44px zijn fysiek lastig te raken. Apple en Google adviseren beide minimaal 44px. Op MKB-sites zien we structureel knoppen van 32px hoog. Resultaat: bezoekers tappen meerdere keren, raken gefrustreerd, klikken weg. Fix: 10 minuten in CSS, voeg een mobile-only padding toe.

Killer 3: formulieren met dubbele kolommen

Op desktop ziet een 2-koloms formulier compact uit. Op mobiel collapseert het, en velden komen te dicht op elkaar te staan. Tappen op het verkeerde veld is dan normaal. Fix: forceer single-column op mobiel.

Killer 4: de hero die te lang scrolt

Op desktop is een hero van 800px geen probleem. Op mobiel is dat al 1.5 schermhoogte. De bezoeker scrolt al voor hij de USP-bar gezien heeft. Fix: maak de hero op mobiel maximaal 100vh.

Quick fixes per killer

1. Tekstgrootte: body { font-size: 17px; line-height: 1.6; }
2. Tap-zones: @media (max-width: 768px) { button, a.btn { min-height: 48px; padding: 14px 20px; } }
3. Formulieren: @media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } }
4. Hero-hoogte: @media (max-width: 768px) { .hero { max-height: 100vh; } }

Vier fixes, samen ongeveer 30 minuten werk. Onze ervaring: alleen al deze vier brengen mobiele conversie typisch op met 15-30%.

Mobile-first versus mobile-friendly

Het verschil:

• Mobile-friendly: je site werkt op mobiel, maar is voor desktop ontworpen.
• Mobile-first: je site is voor mobiel ontworpen en uitgebreid op desktop.

Voor MKB met 60%+ mobiel verkeer is mobile-first geen optie, maar standaard. Bij een rebuild begin je met de mobiele wireframe, niet de desktop-versie.

De test in 10 minuten

Open je site op je eigen telefoon. Probeer in 10 minuten:

1. De homepage te scannen en de hoofdbelofte te identificeren.
2. Eén CTA te tappen zonder de pagina te zoomen.
3. Een formulier in te vullen tot het laatste veld.
4. Door een tabel of vergelijking heen te scrollen zonder zijwaarts te scrollen.

Lukt het allemaal moeiteloos? Top. Stokt het ergens? Daar zit je conversie-lek. Fix vandaag, meet volgende week.