Wat is een mobile first ontwerp voor je website?

Mobile first betekent dat je een website ontwerpt vanaf het kleinste scherm en pas daarna verbreedt naar tablet en desktop. Niet andersom.

Dat klinkt als een detail in de volgorde en het verandert je hele ontwerp. Op een telefoon past bijna niets, dus je wordt gedwongen te kiezen wat er echt toe doet. Die keuze maak je aan het begin, of je maakt hem later onder tijdsdruk en dan wordt het een compromis.

Waar de aanpak vandaan komt

De term is bekend geworden door Luke Wroblewski, een Amerikaanse ontwerper die er in 2011 een boekje over schreef. Zijn redenering had drie delen: het aantal mensen dat met een telefoon op internet zit groeit hard, het kleine scherm dwingt je tot focus, en een telefoon kan dingen die een computer niet kan, zoals je locatie doorgeven en de camera gebruiken.

Het jaar ervoor had Ethan Marcotte de term responsive webdesign bedacht, voor de techniek waarmee een pagina zich aan de schermbreedte aanpast. Mobile first en responsive zijn dus in dezelfde jaren ontstaan en het zijn twee verschillende dingen.

In 2011 was mobile first een voorspelling en een standpunt. Inmiddels is het gewoon hoe het is. Bij vrijwel elke site die ik in beheer krijg komt het merendeel van het bezoek binnen op een telefoon, en bij lokale diensten is dat aandeel nog groter. De uitzondering is zakelijke software waar mensen op kantoor mee werken.

Het verschil met responsive webdesign

Deze twee worden door elkaar gebruikt en betekenen niet hetzelfde.

Responsive gaat over de techniek: flexibele rasters, breekpunten en regels die per schermbreedte iets anders doen. Hoe dat werkt staat in het artikel over responsive webdesign. Een site kan responsive zijn en toch vanaf een breed scherm zijn teruggeperst.

Mobile first gaat over de volgorde van denken en ontwerpen. Je begint klein, en extra breedte is winst in plaats van uitgangspunt. Vrijwel elke mobile first site is responsive, maar lang niet elke responsive site is mobile first ontworpen.

Dat verschil zie je meteen. Bij een teruggeperst ontwerp staat er op een telefoon te veel op, is alles een stapel van gelijkwaardige blokken en moet je scrollen langs drie sfeerfoto's voordat er iets staat waar je wat aan hebt.

Beginnen bij de inhoud, niet bij het raster

Mobile first ontwerpen begint met een inhoudsvraag, niet met een schetsprogramma. Per pagina: wat moet iemand hier weten, en wat is de volgende stap.

Op het eerste scherm van een telefoon past ongeveer een kop, twee regels tekst en een knop. Alles wat daar staat kost iets anders zijn plek. Dat is een ongemakkelijke oefening, want de meeste bedrijven willen op hun homepage zeven dingen tegelijk zeggen.

Ik vraag klanten daarom eerst om één zin: wat je doet, voor wie, en waarin je verschilt. Lukt dat niet, dan is het ontwerp niet het probleem. Het maakt dan ook niet uit hoe breed het scherm is.

Werk daarna per pagina een volgorde uit. Wat als eerste, wat als tweede, wat mag onderaan. Die volgorde is meteen je mobiele ontwerp, want op een telefoon staat alles onder elkaar.

Eén kolom dwingt een rangorde af

Op een klein scherm bestaat naast elkaar niet. Drie kolommen worden drie blokken onder elkaar, en iemand die na het tweede blok afhaakt heeft het derde nooit gezien.

Daarom is de vraag bij elk blok: hoort dit hier, of hoort het lager. Een blok met logo's van klanten of met een keurmerk werkt bovenaan als bewijs, maar duwt ook je aanbod naar beneden. Beide keuzes zijn te verdedigen, alleen moet je hem wel maken.

De carrousel is het duidelijkste voorbeeld van een keuze die niemand maakt. Vier boodschappen achter elkaar in hetzelfde blok betekent dat vier partijen hun zin kregen. Op een telefoon ziet vrijwel niemand meer dan de eerste, dus je hebt in de praktijk gewoon één boodschap gekozen en er drie verstopt.

Op bredere schermen mag die ene kolom uitwaaieren. Bij elke stap breder stel je één vraag: wat kan er nu bij dat echt iets toevoegt. Meestal is dat minder dan je zou denken, en vaak is het antwoord meer witruimte en een grotere afbeelding in plaats van meer onderdelen.

Het menu is een structuurprobleem

Als je menu op een telefoon niet werkbaar is, is het te groot. Dat los je niet op met een hamburgerknop.

Achter zo'n knop past technisch alles, en dat is precies het gevaar. Twintig items in een uitklapmenu met drie niveaus is op een telefoon een lijst waar niemand doorheen komt. De vraag is niet hoe je twintig items verbergt, maar waarom je er twintig hebt.

Voor een gewone bedrijfssite werkt vier tot zes hoofditems. Lukt dat niet, dan zitten er diensten in je menu die eigenlijk onder één noemer horen, of staan er pagina's in die niemand zoekt.

Bij een webshop of een grote site zet je de zoekfunctie zichtbaar in de kop, want daar begint mobiel bezoek vaak. En zet de belangrijkste actie los van het menu, als knop die altijd zichtbaar is. Wat er verder in die balk thuishoort, behandel ik in het artikel over de website header. Voor de opvang onderaan is er een apart stuk over de footer.

Tekstgrootte en aanraakvlakken

Een aanwijzer is een punt, een vinger is een vlek. Dat is het verschil waar de meeste mobiele ontwerpen op stuklopen.

Apple houdt in zijn richtlijnen 44 bij 44 punten aan als minimum voor iets wat je aantikt, Google hanteert in Material Design 48 bij 48. Sinds WCAG 2.2 uit oktober 2023 staat er ook een toegankelijkheidseis in: een bedieningselement moet minstens 24 bij 24 pixels beslaan, of er moet genoeg ruimte omheen zitten. Reken op 44 pixels en genoeg lucht ertussen, dan zit je overal goed.

Voor tekst is 16 pixels de ondergrens, en in formuliervelden is het een harde eis. Staat er een kleinere letter in een invoerveld, dan zoomt Safari op de iPhone bij het aantikken in en staat je pagina scheef. Dat is geen bug, dat is bedoeld gedrag dat je met de tekstgrootte voorkomt.

Houd er verder rekening mee dat er op een telefoon maar zo'n veertig tekens op een regel passen. Een zin die op een breed scherm twee regels beslaat wordt er zes. Korte alinea's zijn op mobiel geen stijlkeuze maar een vereiste, en tussenkoppen zijn het houvast waarmee iemand scant.

Zwevende elementen zijn de laatste valkuil. Een cookiebalk, een chatknop en een sticky kop nemen samen zo de helft van een klein scherm in beslag. Op een breed scherm valt dat niet op, op een telefoon blijft er niets over.

Formulieren die op een telefoon te doen zijn

Typen op een telefoon is vervelend, dus elk veld dat je weglaat verhoogt je aantal ingevulde formulieren.

Zet het juiste type op elk veld. Bij een e-mailadres verschijnt dan een toetsenbord met een apenstaartje, bij een telefoonnummer een cijfertoetsenbord. Zet er ook de juiste autocomplete-waarde op, zodat de telefoon naam, adres en e-mailadres zelf kan invullen. Dat scheelt meer dan welk ontwerpdetail ook.

Voor Nederlandse adressen is postcode en huisnummer genoeg om straat en plaats op te halen. Twee velden in plaats van vijf, en minder typefouten in je administratie.

Let op wat er gebeurt als iemand een fout maakt. Een melding bovenaan de pagina staat op een telefoon buiten beeld. Zet de melding bij het veld zelf en laat de ingevulde gegevens staan. Ik heb formulieren gezien die bij één fout alles leegden; op een telefoon betekent dat het einde van de aanvraag.

Test het formulier ook op het moment dat het toetsenbord openstaat. Vaak valt de verzendknop er precies achter. Over de opbouw van zo'n formulier heb ik een apart artikel geschreven.

Beeld en snelheid horen bij het ontwerp

Snelheid is geen technische nabewerking. Het zit in wat je tekent.

Een pagina met vier video's en acht ongecomprimeerde foto's is op een snelle kantoorverbinding prima en in de trein onbruikbaar. Spreek daarom vooraf af hoe zwaar een pagina mag worden, net zoals je afspreekt welke kleuren je gebruikt. Dat maximum is een afspraak vooraf en geen streven achteraf.

Praktisch betekent het: lever afbeeldingen in meerdere formaten aan zodat een telefoon de kleine versie krijgt, gebruik WebP of AVIF in plaats van zware JPG-bestanden, en laat alles onder de vouw pas laden als het in beeld komt. Hoe je bestanden kleiner maakt zonder zichtbaar verlies, leg ik uit bij Shortpixel.

Let ook op lettertypen. Elk extra font en elke extra dikte is een bestand dat eerst moet worden opgehaald voordat je tekst leesbaar is. Twee diktes van één lettertype is voor de meeste sites genoeg.

Wat Google met de mobiele versie doet

Google beoordeelt je site op de mobiele versie. De versie die bij veel bedrijven het minste aandacht krijgt is dus de versie die het meeste telt.

Dat is in stappen zo gegroeid. In april 2015 begon Google mobielvriendelijkheid mee te wegen in de zoekresultaten voor telefoons. In 2016 kondigde Google mobile first indexering aan, en sinds juli 2024 wordt elke site alleen nog met de mobiele crawler bekeken. Wat op een telefoon niet zichtbaar is, bestaat voor Google in feite niet.

Er is nog een regel die veel mensen missen. Sinds januari 2017 kan een pop-up die op een telefoon de inhoud afdekt je positie kosten. Een cookiemelding die wettelijk moet, mag; een schermvullende nieuwsbriefpopup boven je artikel is een risico.

Het gereedschap is ondertussen veranderd. Google haalde in december 2023 de mobielvriendelijkheidstest en het bijbehorende rapport in Search Console weg. De redenering was dat mobiel werken geen aparte controle meer verdient. Wat er wel is gebleven zijn de Core Web Vitals, waarin sinds 12 maart 2024 de reactiesnelheid op interactie wordt gemeten met INP in plaats van met de oude FID. Die cijfers komen uit echte bezoeken, en op mobiel zijn ze bijna altijd slechter dan op desktop.

Gaat het je om het verbeteren van een site die er al staat, dan is het artikel over je website optimaliseren voor mobiel de praktische kant daarvan.

Toegankelijkheid hoort in dezelfde volgorde thuis

Wie klein begint, doet automatisch veel goed voor toegankelijkheid: grote aanraakvlakken, duidelijke rangorde, weinig afleiding. De rest moet je er bewust bij ontwerpen.

Sinds 28 juni 2025 geldt de Europese toegankelijkheidsrichtlijn, in Nederland ingevoerd als de Implementatiewet toegankelijkheidsvoorschriften producten en diensten. Die raakt onder meer webshops, bankieren, e-boeken, telecom en vervoersbewijzen. Voor diensten geldt een uitzondering voor micro-ondernemingen met minder dan tien medewerkers en een omzet onder de twee miljoen euro, dus veel kleine bedrijven vallen erbuiten. De technische norm erachter is EN 301 549, die naar de WCAG-richtlijnen wijst.

Ook zonder die verplichting is het verstandig. Zorg dat je tekst mag meegroeien als iemand zijn systeemletter groter zet, dat kleurcontrast klopt, dat je niet alleen kleur gebruikt om iets aan te duiden, en dat animaties uitblijven bij mensen die bewegingseffecten hebben uitgezet. Dat zijn instellingen die op telefoons veel vaker aanstaan dan ontwerpers denken.

Testen op een echt toestel

De simulator in je browser vertelt je hoe iets eruitziet, niet hoe het aanvoelt. Aanraken is anders dan klikken.

Pak dus een telefoon. Liefst niet alleen de nieuwste, want daar breekt weinig op. Test ook op 320 pixels breed, want dat is de smalste maat die je nog tegenkomt en daar valt het meeste uit elkaar. Test met één hand, want dat is hoe mensen hun telefoon vasthouden, en kijk of de belangrijkste knop met een duim te bereiken is.

Kijk daarnaast met een echte verbinding buiten de deur. Op kantoorwifi is elke site snel. In een parkeergarage of in de trein zie je pas welke pagina op een lege plek blijft staan.

Voor wie het preciezer wil: je kunt een iPhone met een kabel aan een Mac koppelen en de pagina in Safari uitlezen, en een Android-toestel op dezelfde manier aan Chrome. Dan zie je op je grote scherm wat er op dat toestel echt gebeurt. Verder helpt het om drie mensen die je site niet kennen een opdracht te geven en te kijken waar ze aarzelen. Wil je dat gedrag structureel bijhouden, dan helpt gebruikersgedragsanalyse je verder.

Wat het verandert aan het ontwerpproces

Mobile first is vooral een afspraak over volgorde, en die afspraak sneuvelt in de presentatie.

Een ontwerper die zijn werk laat zien op een groot scherm, met de desktopversie in beeld, krijgt daar commentaar op. De mobiele versie komt dan aan het eind, als reparatie. Ik teken daarom eerst het smalle formaat uit en laat dat als eerste zien, ook al vinden opdrachtgevers dat in het begin gek.

Bij een paginabouwer werkt het net zo. In Beaver Builder, waar wij mee werken, kun je per apparaat andere waarden zetten voor marges, tekstgrootte en volgorde. Dat is handig voor de laatste tien procent. Het is geen vervanging voor een ontwerp dat klein begint, want je blijft dan sleutelen aan iets wat voor een ander scherm bedacht is.

Let ook op wat je verbergt. Een blok dat je op mobiel wegzet met een instelling wordt meestal wel gewoon opgehaald. Je bezoeker wacht dus op iets wat hij nooit ziet.

Waar het misgaat

Een ontwerp dat alleen op desktop bestaat. Dan wordt de mobiele versie een reparatie achteraf, en dat blijf je zien.

Op mobiel dingen weglaten. Als iets op een telefoon niet nodig is, is het waarschijnlijk nergens nodig. Google indexeert bovendien de mobiele versie, dus tekst die je daar weghaalt telt niet mee.

Alleen in de browsersimulator kijken. Handig om mee te beginnen en het zegt niets over hoe iets in de hand ligt.

De vouw als heilige grens zien. Mensen scrollen prima. Wat bovenaan staat moet duidelijk maken dat ze goed zitten, niet alles bevatten.

Denken dat mobiel om minder tekst vraagt. Het vraagt om betere volgorde en kortere alinea's. Een uitgebreide pagina met duidelijke tussenkoppen leest op een telefoon prima.

Een aparte mobiele site maken. Dat was rond 2010 een oplossing, met een adres dat met m begon. Je onderhoudt dan twee sites en je krijgt problemen met adressen die verwijzen naar de verkeerde versie. Eén site die meebeweegt is sindsdien het advies.

Veelgestelde vragen over mobile first ontwerp

Wat is het verschil tussen mobile first en responsive design?

Mobile first is de volgorde waarin je ontwerpt: eerst het kleinste scherm, daarna breder. Responsive is de bouwtechniek eronder, met flexibele rasters en breekpunten.

Je kunt responsive bouwen zonder mobile first te denken, en dat is precies wat er meestal gebeurt. Het resultaat past dan wel op een telefoon, maar het is een ingedikte versie van iets wat voor een groot scherm bedacht is.

Moet ik mijn website opnieuw laten bouwen om mobile first te zijn?

Meestal niet. Als je huidige site meebeweegt en op een telefoon te bedienen is, valt er veel te winnen met kleinere ingrepen: menu opschonen, knoppen vergroten, afbeeldingen comprimeren en de volgorde van blokken aanpassen.

Opnieuw beginnen is pas logisch als het ontwerp op een telefoon fundamenteel niet klopt, of als de site zo traag is dat er niets aan te repareren valt. Bij een nieuwe site is mobile first gewoon de werkwijze en kost het niets extra.

Welke schermbreedte neem ik als uitgangspunt?

Ontwerp op ongeveer 375 pixels breed, dat is de maat van een gangbare telefoon. Controleer daarna op 320 pixels, want daar zie je of iets echt buiten de rand valt.

Kijk voor de breedtes die je zelf krijgt in je statistieken. Bij een lokale dienst zie je andere toestellen dan bij een zakelijke site.

Hoe groot moeten knoppen op een telefoon zijn?

Houd 44 bij 44 pixels aan, met genoeg ruimte eromheen zodat je niet per ongeluk de buurman raakt. Apple noemt 44 punten, Google noemt 48, en de toegankelijkheidsrichtlijn WCAG 2.2 uit 2023 zet de ondergrens op 24 pixels of voldoende tussenruimte.

Let vooral op links die in lopende tekst onder elkaar staan. Die liggen vaak zo dicht op elkaar dat je de verkeerde aantikt.

Mag ik onderdelen verbergen op mobiel?

Liever niet. Zit iets in de weg op een klein scherm, verplaats het dan naar beneden of stop het in een uitklapblok. Uitklapbare tekst telt gewoon mee, mits hij in de broncode staat.

Een uitzondering maak ik voor sierbeeld dat op een telefoon niets toevoegt. Zorg dan wel dat het bestand ook echt niet wordt opgehaald, want anders houd je de laadtijd zonder dat iemand er iets voor terugkrijgt.

Is mobile first ook nodig als mijn bezoekers vooral op een computer komen?

Kijk eerst of dat echt zo is. In Google Analytics zie je de verdeling per apparaat, en die verrast bijna iedereen. Vaak blijkt het beeld te komen uit één afdeling die de site zelf gebruikt.

Is het aandeel desktop echt hoog, bijvoorbeeld bij software die mensen op kantoor gebruiken, dan mag je meer ruimte in het brede ontwerp steken. Google kijkt nog steeds naar de mobiele versie, dus die moet hoe dan ook kloppen.

Werkt mobile first ook voor een zakelijke website?

Ja, en juist daar wordt het onderschat. Een inkoper die jouw naam hoort, kijkt op zijn telefoon of je bestaat en of je serieus overkomt. De aanvraag doet hij later misschien achter zijn bureau, maar het eerste oordeel valt op een klein scherm.

Hoe test ik mijn site zonder allerlei telefoons te kopen?

Begin met de toestellen die je in huis hebt, inclusief het oudste. Gebruik daarnaast de apparaatweergave in Chrome of Firefox om smalle breedtes na te lopen, en koppel je telefoon met een kabel aan je computer om de echte pagina uit te lezen.

Wil je meer toestellen zien, dan zijn er testdiensten waarmee je op echte apparaten in een datacentrum kunt kijken. Voor een site van tien pagina's vind ik dat overdreven; twee echte toestellen en een smalle breedte in de browser dekken het meeste af.

Wat is een goede laadtijd op een telefoon?

Google hanteert in de Core Web Vitals als richtwaarde dat het grootste element binnen 2,5 seconden zichtbaar is, dat de pagina binnen 200 milliseconden op een aanraking reageert en dat er nauwelijks verspringt tijdens het laden. Die waarden gelden voor het merendeel van je bezoeken, niet voor een enkele meting.

Meet met de mobiele weergave van PageSpeed Insights en kijk naar de gegevens uit echte bezoeken onderaan het rapport. De testscore erboven is een laboratoriumcijfer dat per meting verspringt.

Heb ik een app nodig in plaats van een goede mobiele website?

Voor de meeste bedrijven niet. Een app moet worden gedownload, onderhouden en in twee winkels goedgekeurd, en mensen installeren geen app voor een bedrijf waar ze twee keer per jaar iets kopen.

Zit er wel een terugkerende handeling in, bijvoorbeeld inloggen bij een dienst, dan is een progressive web app vaak de tussenvorm: een website die je op je beginscherm kunt zetten.

Wat gebeurt er als mijn site op een telefoon niet goed werkt?

Je verliest bezoekers voordat ze iets hebben gelezen, en je verliest posities. Google bekijkt sinds juli 2024 alle sites met de mobiele crawler, dus problemen op een klein scherm werken direct door in wat er van je site in de index staat.

Hoeveel tekst kan er op een mobiele pagina?

Zo veel als de vraag verdient. Lange pagina's werken op een telefoon prima zolang de opbouw klopt: een duidelijke kop, korte alinea's en tussenkoppen waar iemand op kan scannen.

Wat niet werkt is een lap tekst zonder tussenkoppen. Dat leest op een breed scherm al zwaar en op een telefoon helemaal.

Moet ik de mobiele versie apart laten controleren op toegankelijkheid?

Ja, want een deel van de problemen bestaat alleen op een klein scherm: te dicht op elkaar staande knoppen, tekst die niet mag meegroeien, en een uitklapmenu dat met een schermlezer niet te sluiten is.

Val je onder de Europese toegankelijkheidsregels die sinds 28 juni 2025 gelden, bijvoorbeeld met een webshop, dan is dat geen vrijblijvende controle meer. Micro-ondernemingen zijn voor diensten uitgezonderd.

Waar begin ik als ik morgen wil beginnen?

Open je eigen site op je telefoon en probeer in één minuut te doen wat een klant komt doen: een prijs vinden, een afspraak maken of contact opnemen. Schrijf op waar je aarzelt.

Dat lijstje is je opdracht, en het is bijna altijd korter en concreter dan wat er uit een uitgebreide analyse komt.