Mobile first design: Waarom je website voor telefoons moet ontwerpen

Mobile first design: Waarom je website voor telefoons moet ontwerpen

Mobile first design betekent dat je website eerst voor telefoons ontwerpt, daarna pas voor computers. Dit is essentieel omdat 60% van websitebezoekers mobiel komt en Google eerst de mobiele versie indexeert. Mobile first zorgt voor snellere laadtijden, betere gebruikservaring en hogere rankings. Kernprincipes: grote knoppen (min. 44px), leesbare tekst (min. 16px), één kolom layout en touch-friendly navigatie binnen duimbereik.

---

Je website ziet er perfect uit op je laptop. Op een telefoon is het een ramp.

60% van je websitebezoekers komt via hun telefoon. Maar jij hebt je website ontworpen terwijl je lekker achter een groot computerscherm zat.

Dat is alsof je een huis bouwt voor reuzen en dan verwacht dat kinderen er comfortabel wonen. Alles is te hoog, te breed, te groot.

Vorige week sprak ik een ondernemer uit Eersel. Prachtige website, zei hij trots. Op zijn laptop zag het er inderdaad goed uit. Toen ik hem vroeg z’n telefoon te pakken en zijn eigen site te bezoeken, zag ik z’n gezicht betrekken.

“De tekst is niet te lezen.”
“Waar moet ik klikken?”
“Dit duurt lang zeg.”
“Hoe krijg ik dat menu open?”

Herkenbaar? Dan is het tijd voor mobile first design.

Wat is mobile first design eigenlijk?

Mobile first design betekent: je begint met ontwerpen voor de kleinste schermen (telefoons), en bouwt daarna pas uit naar tablets en computers.

Niet: eerst desktop maken, dan “passen” op mobiel.
Wel: eerst mobiel maken, dan uitbreiden naar desktop.

Het is een totaal andere manier van denken:

• Wat is echt belangrijk? (want je hebt weinig ruimte)
• Hoe maken we dit simpel? (want mobiele gebruikers hebben haast)
• Werkt dit met een dikke vinger? (geen precisiemuis)

Bij traditioneel webdesign maak je een mooie desktop site en prop je dat daarna in een mobiele template. Resultaat: een rommelige mobiele ervaring.

Bij mobile first ontwerp je eerst de kern van je boodschap voor mobiel, en voeg je daarna extra’s toe voor grotere schermen.

Waarom mobile first niet meer weg te denken is

Google indexeert mobile first (en straft slechte mobiele sites af)

Sinds 2019 kijkt Google eerst naar de mobiele versie van je website. Pas daarna naar de desktop versie.

Vertaling: als je mobiele site slecht is, krijg je een lagere Google ranking. Ook op desktop.

Ik zie dit constant:

• Mooie desktop site: ranking 4
• Beroerde mobiele versie: ranking 18

Google ziet: “Deze site werkt niet goed op mobiel → minder relevant → lagere positie.”

60%+ van je bezoekers komt via telefoon

Kijk maar in je eigen Google Analytics (als je die hebt). Waarschijnlijk zie je:

• 60-70% mobiel
• 20-30% desktop
• 5-10% tablet

Dat betekent: 6 van de 10 bezoekers krijgen een frustrerende ervaring als je mobiele site niet deugt.

Die 60% haakt af. Die 60% koopt niet. Die 60% belt je niet.

Mobiele gebruikers zijn ongeduldig (en haken snel af)

Op desktop nemen mensen de tijd. Ze zitten comfortabel, hebben een groot scherm, zoeken rustig rond.

Op mobiel? Totaal andere situatie:

• Ze staan in de rij bij de supermarkt
• Ze zitten in de trein
• Ze lopen tussen vergaderingen door
• Ze liggen op de bank met half een oog op de TV

53% verlaat een mobiele site als die langer dan 3 seconden laadt. Drie seconden. Dat is niks.

En als je site eenmaal geladen is maar niet goed werkt? Ook weg. Mensen hebben nul geduld op hun telefoon.

Aanraking werkt totaal anders dan klikken

Met een muis ben je precies. Pixel-perfect klikken? Geen probleem.

Met je vinger? Totaal andere story:

• Een vinger is 44 pixels breed (gemiddeld)
• Je ziet niet precies waar je klikt (je vinger zit in de weg)
• Je kunt niet “hoveren” zoals met een muis

Knoppen die perfect werken met een muis, zijn te klein voor vingers. Menu’s die openen bij hover (muis eroverheen), werken niet op mobiel. Links die 2mm uit elkaar staan, klik je constant allebei tegelijk aan.

De 8 grootste mobile design fouten (en hoe je ze voorkomt)

❌ 1. Te kleine knoppen en links

Het probleem: Knoppen van 20-30 pixels breed. Links die tegen elkaar aan staan. Menu-items die smaller zijn dan een vinger.

Waarom het stom is: Mensen tikken per ongeluk op de verkeerde knop. Of ze missen de knop helemaal en raken gefrustreerd.

De oplossing: Minimum knopgrootte: 44 x 44 pixels. Liever 48×48 of zelfs groter. En tussen knoppen minimaal 8 pixels ruimte.

Praktijkvoorbeeld: Een stukadoor uit Bladel had contactknoppen van 28 pixels. Van de 100 mobiele bezoekers per maand, klikte er maar 3 op “Contact”. Na het vergroten naar 50 pixels? 14 clicks. Van 3% naar 14% conversie. Zelfde website, alleen grotere knoppen.

❌ 2. Tekst die te klein is om te lezen

Het probleem: Tekst van 12 of 14 pixels op mobiel. Je moet zoomen om het te kunnen lezen.

Waarom het stom is: Niemand gaat zoomen. Ze gaan naar je concurrent.

De oplossing: Minimum lettergrootte: 16 pixels voor body tekst. Liever 18 pixels. Koppen nog groter: 24-32 pixels.

Praktijkvoorbeeld: Ik zie dit vooral bij websites die door “goedkope” websitebouwers zijn gemaakt. Ze kopiëren de desktop tekst (14px) naar mobiel. Niemand leest het. Bounce rate 78%. Na aanpassing naar 18px? Bounce rate 42%.

❌ 3. Horizontaal scrollen (de horror)

Het probleem: De website is breder dan het scherm. Je moet links-rechts scrollen om alles te zien.

Waarom het stom is: Scrollen op een telefoon gaat verticaal (omhoog-omlaag). Horizontaal scrollen is awkward, vervelend en niemand doet het.

De oplossing: Alles moet passen binnen de schermbreedte. Gebruik max-width: 100% voor afbeeldingen en containers. Test op verschillende schermformaten.

Rode vlag: Als je moet pinch-to-zoom om tekst te lezen of links te klikken, werkt je mobiele site niet.

❌ 4. Pop-ups die niet weg te klikken zijn

Het probleem: Een nieuwsbrief pop-up verschijnt. De sluitknop zit buiten beeld. Of is zo klein dat je hem niet raakt.

Waarom het stom is: Je vangt mensen gevangen op je site. Ze kunnen niks, raken gefrustreerd en sluiten de hele tab. Google straft dit ook af: interstitials (pop-ups die hele scherm bedekken) zorgen voor lagere ranking.

De oplossing:

• Grote, duidelijke sluitknop (min. 44×44 pixels)
• Sluitknop rechtsboven (daar verwachten mensen hem)
• Of helemaal geen pop-ups op mobiel

❌ 5. Menu’s die niet werken

Het probleem: Hamburger menu (☰) dat niet opent. Dropdown menu’s die onder andere elementen verdwijnen. Menu’s die half buiten beeld vallen.

Waarom het stom is: Als mensen je menu niet kunnen openen, kunnen ze niet navigeren. Als ze niet kunnen navigeren, gaan ze weg.

De oplossing:

• Test je menu op echte telefoons
• Grote, duidelijke menu-knop
• Menu moet volledig in beeld komen
• Submenu’s moeten ook touch-friendly zijn

❌ 6. Veel te lange formulieren

Het probleem: Contactformulier met 12 velden. Tekst typen op een klein scherm is al klote, laat staan 12 velden invullen.

Waarom het stom is: Elk extra veld kost je 10-15% conversie. Bij 12 velden haak je 95% van je bezoekers af.

De oplossing: Vraag alleen wat echt nodig is:

• Naam: ja
• Email: ja
• Telefoon: alleen als je gaat bellen
• Adres: alleen als je langkomst
• Bedrijfsnaam, functie, postcode, etc: NEE (tenzij absoluut nodig)

Bij mijn contactformulieren: naam, email, bericht. Klaar. Conversie 18%. Bij concurrentie met lange formulieren: 3-5%.

❌ 7. Afbeeldingen die niet laden of te groot zijn

Het probleem: Mega-grote afbeeldingen (3MB per plaatje). Of afbeeldingen die gewoon niet laden op mobiel.

Waarom het stom is: Grote afbeeldingen = lange laadtijd = mensen haken af.

De oplossing:

• Gebruik WebP formaat (70% kleiner dan JPEG)
• Optimaliseer alle afbeeldingen voor web (max 200KB)
• Lazy loading: laad afbeeldingen pas als ze in beeld komen
• Responsive images: juiste grootte voor elk scherm

❌ 8. Content die niet past (meerdere kolommen op klein scherm)

Het probleem: Desktop heeft drie kolommen naast elkaar. Op mobiel? Elke kolom 100 pixels breed. Onleesbaar.

Waarom het stom is: Tekst wordt zo smal dat elk woord op een aparte regel staat. Afbeeldingen worden zo klein dat je niks ziet.

De oplossing: Op mobiel: alles onder elkaar. Eén kolom. Simpel en overzichtelijk.

Hoe je mobile first ontwerpt (stap voor stap)

Stap 1: Begin met het kleinste scherm

Start niet met desktop. Start met een telefoonscherm (bijvoorbeeld iPhone SE = 320 pixels breed).

Vraag jezelf af:

• Wat is de belangrijkste boodschap?
• Wat moet een bezoeker hier kunnen doen?
• Wat kan weg om het simpel te houden?

Schrap alles wat niet essentieel is. Op mobiel heb je geen ruimte voor fluff.

Stap 2: Eén kolom layout (vergeet complexe layouts)

Op mobiel werkt één ding boven het andere het beste.

Niet: [Tekst links | Afbeelding rechts]

Wel:
[Afbeelding]
[Tekst]
[Knop]

Simpel, duidelijk, geen gedoe.

Stap 3: Maak alles groot genoeg om aan te raken

Checklist voor touch-friendly design:

• Knoppen minimaal 44×44 pixels (liever 48×48 of groter)
• Tussen knoppen minimaal 8 pixels ruimte
• Menu-items groot genoeg voor dikke vingers
• Links in tekst ver genoeg uit elkaar (niet 2mm tussen woorden)

Stap 4: Belangrijkste info bovenaan (“above the fold”)

Mensen scrollen wel, maar je belangrijkste boodschap moet meteen zichtbaar zijn zonder scrollen.

Goede volgorde mobiel:

1. Wie ben je / wat doe je (H1, 1 zin)
2. Kernboodschap (2-3 zinnen)
3. Grote duidelijke call-to-action knop
4. Dan pas rest van content

Slechte volgorde:

1. Groot logo
2. Fancy animatie
3. 10 menu-items
4. Pas na 3 schermen scrollen: wat doe je eigenlijk?

Stap 5: Optimaliseer voor snelheid

Mobiele verbindingen zijn trager dan WiFi. En mensen hebben minder geduld.

Snelheidscheck:

• Afbeeldingen: max 200KB per stuk, WebP formaat
• Lazy loading: laad eerst wat in beeld is
• Minimale plugins/widgets
• Gecachete versies voor snelle terugkeerders

Bij WordPress sites die ik bouw: gemiddeld 1.2 seconden laadtijd op mobiel. Bij Wix sites: 1.8 seconden. Beide ruim onder de 3 seconden grens.

Stap 6: Test op echte apparaten

Testen in je browser met “responsive mode” is niet genoeg. Test op:

• Oude Android (Samsung Galaxy S7 bijvoorbeeld)
• Nieuwe Android (Samsung S23, Pixel)
• Oude iPhone (iPhone 8)
• Nieuwe iPhone (iPhone 14/15)

En test verschillende orientaties:

• Staand (portret) → standaard
• Liggend (landschap) → sommige mensen doen dit

Touch-friendly navigatie die echt werkt

De duim-zone (waar mensen echt tikken)

De meeste mensen bedienen hun telefoon met één hand. Hun duim bereikt makkelijk:

• Onderkant scherm
• Midden scherm
• Moeilijk: bovenkant scherm

Belangrijke elementen dus:

• Navigatie knoppen: onderin of midden
• Call-to-action: midden of onderin
• Minder belangrijk spul: bovenin

Grote menu-bar bovenin? Je dwingt mensen hun telefoon met twee handen vast te houden. Dat doen ze niet, dus ze klikken niet.

Grote, opvallende call-to-action knoppen

“Klik hier” wordt “Tik hier”. Of beter: “Bel direct” of “Vraag offerte aan”.

Kenmerken van goede mobiele CTA:

• Minimaal 48px hoog
• Volledige breedte van het scherm (of minimaal 80%)
• Opvallende kleur die contrasteert met achtergrond
• Duidelijke actie (“Bel nu”, niet “Meer info”)

Swipe functionaliteit waar logisch

Mensen verwachten te kunnen swipen door:

• Foto galerijen
• Testimonials
• Product kaarten
• Voor/na voorbeelden

Maak het mogelijk. Niet verplicht (zorg ook dat pijltjes knoppen werken), maar wel beschikbaar.

Formulieren die werken op mobiel

Zo min mogelijk velden (elke veld kost je klanten)

Onderzoek toont aan:

• 3 velden: 18% conversie
• 5 velden: 12% conversie
• 7 velden: 8% conversie
• 10+ velden: 3% conversie

Elke extra vraag die je stelt = mensen die afhaken.

Vraag alleen wat je echt nodig hebt:

• Voor offerte: naam, email, telefoonnummer, wat ze willen
• Voor nieuwsbrief: alleen email
• Voor contact: naam, email, bericht

Grote input velden die makkelijk te tikken zijn

Input velden minimaal 44 pixels hoog. Liever 56-60 pixels.

Tussen velden genoeg ruimte (8-12 pixels) zodat je niet per ongeluk het verkeerde veld aanklikt.

Labels boven de velden (niet links ervan) zodat het op kleine schermen past.

Juiste toetsenbord types (iPhone/Android doen dit automatisch)

• Email veld → email toetsenbord (met @ en .com)
• Telefoon veld → nummer toetsenbord
• Nummer veld → nummer toetsenbord
• Datum veld → datum picker
• Reguliere tekst → normaal toetsenbord

Dit doe je met HTML5 input types:

<input type="email" name="email">
<input type="tel" name="telefoon">
<input type="number" name="postcode">

Klinkt simpel maar ik zie dit constant fout gaan. Telefoonveld met normaal toetsenbord = mensen typen letters per ongeluk = frustratie.

Autocomplete en suggesties

Help gebruikers:

• Autocomplete voor naam, email, telefoon
• Suggesties voor straatnamen en plaatsen
• Dropdown voor vaak voorkomende antwoorden

Hoe minder ze hoeven te typen, hoe meer conversie.

Site speed op mobiel (elke seconde telt)

Comprimeer alles zonder kwaliteit te verliezen

Afbeeldingen:

• WebP formaat (70% kleiner dan JPEG, 80% kleiner dan PNG)
• TinyPNG of ImageOptim voor compressie
• Max 200KB per afbeelding

Code:

• Minify CSS en JavaScript (verwijder alle onnodige spaties en code)
• Combineer meerdere bestanden tot één bestand
• Verwijder onnodige plugins

Lazy loading (laad alleen wat in beeld is)

Afbeeldingen die onder de vouw zitten (dus waar je naar moet scrollen) worden pas geladen als je erbij komt.

Resultaat:

• Zonder lazy loading: 3.8 seconden laadtijd
• Met lazy loading: 1.2 seconden laadtijd

Verschil van 2.6 seconden = 20% minder mensen die afhaken.

Minimale code en plugins

Elke plugin die je toevoegt = extra code = langzamer.

Ik zie websites met:

• 40+ plugins
• 3 verschillende sliders
• 5 social media widgets
• Contact formulier plugin, terwijl er al een in het thema zit

Resultaat: 8 seconden laadtijd op mobiel. Niemand wacht zo lang.

Mijn aanpak:

• Max 10-15 plugins (echt nodig)
• Geen onnodige widgets
• Geen fancy animaties die niks toevoegen

CDN (Content Delivery Network) voor wereldwijde snelheid

CDN betekent: je website wordt gekopieerd naar servers wereldwijd.

Bezoeker uit Nederland? Server in Amsterdam.
Bezoeker uit België? Server in Brussel.
Bezoeker uit Duitsland? Server in Frankfurt.

Scheelt seconden in laadtijd. Bij goede hosting (zoals bij mijn WordPress pakket) zit CDN er standaard bij.

Mobiele gebruikers begrijpen (en daarop ontwerpen)

Ze zijn onderweg (en afgeleid)

Desktop gebruiker: zit rustig achter bureau, focus op scherm.

Mobiele gebruiker:

• Staat in de rij
• Zit in de trein (met instabiele verbinding)
• Loopt tussen afspraken
• Ligt half te slapen op de bank

Implicatie voor design: Simpel. Duidelijk. Direct to the point. Geen lange verhalen.

Ze zijn gericht op actie

Mobiele bezoekers zoeken meestal:

• Telefoonnummer om te bellen
• Adres om naartoe te gaan
• Openingstijden
• Prijsinformatie
• Specifiek antwoord op een vraag

Geef ze dat. Meteen. Geen omwegen.

Voorbeeld goede mobiele homepage:

• H1: “Website laten maken in de Kempen vanaf €499”
• Knop: “Bel direct: 06-12345678”
• Knop: “Vraag offerte aan”
• Dan pas rest van info

Ze gebruiken hun duim (eénhandig)

80% van mobiele gebruikers bedient hun telefoon met één hand. Duim doet het werk. Belangrijke elementen binnen duimbereik = meer interactie.

Ze hebben minder geduld (en geen vergeving)

Werkt iets niet meteen? Weg.
Duurt het te lang? Weg.
Niet duidelijk wat ze moeten doen? Weg.

Je krijgt geen tweede kans op mobiel.

Testing op echte apparaten (geen smoesjes)

Test op verschillende telefoons (niet alleen de jouwe)

Jij hebt misschien een nieuwe iPhone 15. Maar je klanten?

• 40% heeft een Android midrange (Samsung A-serie)
• 30% heeft een oudere iPhone (8, X, 11)
• 20% heeft een nieuwe high-end
• 10% heeft een budgettelefoon

Test op allemaal.

Test verschillende orientaties

Meeste mensen houden hun telefoon staand. Maar sommige situaties vragen liggend. Zorg dat je site ook liggend werkt.

Test verschillende netwerken (niet alleen je snelle WiFi)

Thuis WiFi: 100+ Mbps.
Echt mobiel internet: 5-20 Mbps (4G), soms 1-3 Mbps (slecht bereik).

Test je site op:

• WiFi (thuis)
• 4G (normaal)
• 3G of traag 4G

Als je site werkt op traag internet, werkt het overal.

Mobile analytics die je moet meten

• Bounce rate mobiel vs desktop: Als je mobiele bounce rate veel hoger is dan desktop, is er iets mis.
• Conversie rates per device: Als je mobiele conversie meer dan 30% lager is dan desktop, is je mobiele ervaring niet goed genoeg.
• Page load speed per device type: Doel: onder 3 seconden op mobiel.

Vergelijkingstabel: Desktop First vs Mobile First Design

Aspect	Desktop First (oud)	Mobile First (modern)
Startpunt	Groot scherm	Klein scherm
Aanpak	Vol design, dan inkrimpen	Essentials eerst, dan uitbreiden
Knoppen	Klein (30-35px)	Groot (44-48px+)
Tekst	Klein (14px)	Groot (16-18px)
Laadtijd	3-5 seconden	1-3 seconden

Conclusie: mobile first is geen trend, het is de realiteit

60% van je bezoekers komt via hun telefoon. Google beoordeelt je eerst op mobiel. Mensen haken af binnen 3 seconden als je site niet werkt. Mobile first design is geen fancy extra. Het is de basis.

Bij mijn websites is mobile first gewoon standaard:

WordPress pakket vanaf €995:

• Mobile first ontwerp
• Touch-friendly navigatie
• Snelle laadtijd (onder 3 sec mobiel)
• Getest op iPhone én Android

Wix pakket vanaf €499:

• Mobile first templates
• Automatische mobiele optimalisatie
• Grote knoppen en leesbare tekst

Twijfel je of jouw website goed werkt op mobiel? Stuur me een berichtje en ik check je website gratis op mobiele problemen. Geen verplichtingen, gewoon eerlijk advies.