In het kort
Mobile-first design is een ontwerpfilosofie die start vanaf de kleinste schermgrootte (mobiel) en uitbreidt naar groter (tablet, desktop). Het is het tegenovergestelde van de oude aanpak waarbij websites eerst voor desktop ontworpen werden en daarna gecomprimeerd voor mobiel. Mobile-first kwam op gang toen het aandeel mobiele bezoekers de desktopcijfers overtrof, en wordt sinds 2020 ook door Google's index gepromoot: Google indexeert vooral de mobiele versie van een site, niet de desktop. Bij Creative Hero ontwerpen we elke nieuwe website mobile-first. We tekenen eerst de mobiele wireframes, kiezen welke content prioriteit heeft op klein scherm, en bouwen het hele systeem op vanaf 360px breed. Dat dwingt ons tot scherpe beslissingen: wat is essentieel, wat kan weg, welke navigatie werkt, hoe vinden gebruikers wat ze zoeken zonder dropdowns? Pas wanneer de mobiele ervaring sterk is, breiden we uit naar tablet en desktop met meer ruimte voor secundaire content. Sites die desktop-first ontworpen zijn voelen op mobiel altijd geknepen aan, met te kleine knoppen, te lange formulieren en menu's die niet werken op één duim.
Hoe het werkt
Mobile-first design verloopt in vier stappen. Eerst wireframes voor mobiel: 360px breed met alle essentiële content. Dan visuele design: kleur, typografie en componenten op mobiel. Vervolgens scaling: het systeem wordt uitgebreid naar tablet (768px) en desktop (1024px+). Tot slot QA op alle apparaten. We werken altijd met progressieve enhancement: de mobiele versie heeft de basisfuncties, de desktop-versie krijgt extra content die op mobiel optioneel is. Touch-targets moeten minstens 44x44px zijn (Apple HIG-richtlijn), tekst minstens 16px om zoom te vermijden, en formulieren maximaal één invoer per scherm op mobiel. Mobile-first faalt wanneer ontwerpers desktop-mockups uitprinten en die op mobiel proberen te squeezen.
Voorbeelden uit de praktijk
creativehero.be redesign 2026
We bouwden onze eigen site mobile-first vanaf 360px. Resultaat: 95+ Lighthouse mobiel én desktop, en een Google Search Console-positie die in 6 maanden van pagina 5 naar pagina 1 ging voor 'webdesign Antwerpen'.
Bonbon Antwerp menu-page
De menukaart-pagina is op mobiel volledig duim-vriendelijk: één gerecht per scherm, foto's vol-breed, prijzen rechts uitgelijnd. Op desktop zien gebruikers 3 gerechten naast elkaar.
Numaxx Beauty checkout
De Shopify-checkout is mobile-first geoptimaliseerd: één veld per scherm, automatische form-fill, expressieve buttons. Conversie steeg met 18 procent na de redesign.
Do's & don'ts
Wel doen
- ✓Begin elk project met mobiele wireframes voor je iets anders ontwerpt.
- ✓Test op echte mobiele apparaten, niet alleen op browser-resize.
- ✓Werk met touch-targets minstens 44x44px.
- ✓Houd body-tekst minstens 16px om automatische zoom te vermijden.
- ✓Bouw één-kolom layouts op mobiel, geen knepige twee-kolom oplossingen.
- ✓Test laadtijden op 3G/4G, niet alleen wifi.
Niet doen
- ✗Ontwerp nooit eerst op desktop en pas dan op mobiel.
- ✗Verstop nooit primaire content achter een hamburger-menu op mobiel.
- ✗Gebruik nooit hover-effecten als enige manier om content te tonen.
- ✗Vergeet nooit landscape-modus te testen, niet iedereen werkt portrait.
- ✗Bouw geen formulieren met meer dan 5 velden per scherm op mobiel.
- ✗Negeer touch-feedback niet, gebruikers moeten zien dat een tap gewerkt heeft.
Veelgestelde vragen
Waarom is mobile-first design belangrijk?
Wat is het verschil tussen responsive en mobile-first?
Hoe test ik mobile-first design?
Werkt mobile-first ook voor B2B?
Wat zijn typische mobile-first fouten?
Heeft mobile-first invloed op SEO?
Gerelateerde uitleg
Hulp nodig met mobile-first design?
Plan een kennismaking. We bekijken samen of we kunnen helpen.
Plan een call