Definitie
Mobile-first is een ontwerp- en ontwikkelaanpak waarbij een website of applicatie eerst voor smartphones wordt gebouwd en pas daarna wordt uitgebreid naar tablets en desktop. Het is geen extra mobiele versie naast de desktopversie, maar een omgekeerde volgorde: het kleine scherm is het startpunt, niet de bijzaak.
Achter de aanpak zit een simpele observatie: een ontwerp dat op een smartphone werkt, schaalt vrijwel altijd goed naar groter. Andersom werkt zelden. Wie eerst de desktopversie maakt en daarna probeert in te krimpen, eindigt met een mobiele ervaring die voelt als een afgeknepen variant van iets anders.
Waarom het ertoe doet voor MKB
Voor de meeste MKB-websites en webapplicaties komt inmiddels meer dan de helft van het verkeer van een telefoon. Voor B2C-sites en lokale dienstverleners loopt dat richting 70 a 80 procent. Een site die op mobiel traag laadt of lastig in te vullen is, verliest dus de meeste bezoekers nog voordat ze iets gedaan hebben.
Google rangschikt sinds 2019 op de mobiele versie van een site, niet de desktopversie. Een goede desktop-ervaring met een matige mobiele variant betekent in de praktijk: lagere posities in zoekresultaten, minder verkeer, minder leads. Mobile-first is daarmee niet alleen een ontwerpkeuze maar een commerciele.
Concreet voorbeeld
Een installatiebedrijf in de regio Utrecht liet de bestaande website opnieuw bouwen. De oude site was in 2018 ontworpen voor desktop en daarna mobiel-vriendelijk gemaakt: het offerteformulier bestond uit 14 velden naast elkaar, op telefoon werden dat 14 verticale velden die niet allemaal in beeld pasten. Conversie op mobiel: 0,8 procent.
De nieuwe site is mobile-first opgezet. Het formulier is teruggebracht naar 4 velden in een verticale stack, met grote tikvlakken en een duidelijke voortgangsindicator. Pagina-laadtijd op 4G ging van 6,2 naar 1,8 seconden. Mobiele conversie steeg naar 3,1 procent in de eerste drie maanden, wat neerkomt op circa 40 extra offerteaanvragen per maand op hetzelfde verkeer. Bouwkosten van de site: €18.000.
Misverstanden en valkuilen
- “Mobile-first betekent een aparte mobiele site.” Nee, het is een ontwerpvolgorde voor een en dezelfde responsive site. Aparte mobiele sites (m.bedrijf.nl) zijn al jaren uit de gratie en geven juist SEO-problemen.
- “Onze klanten zitten allemaal op desktop, dus niet relevant.” B2B-bezoekers oriënteren zich vaak ook mobiel, ook al sluiten ze een deal vanaf hun werkplek. Analytics laten meestal zien dat het mobiele aandeel hoger is dan verwacht.
- “Mobiel werkt al, want het schaalt automatisch.” Schalen is niet hetzelfde als bruikbaar zijn. Een desktopformulier dat technisch past op een telefoon kan nog steeds onbruikbaar zijn qua tikvlakken, leesbaarheid en laadtijd.
- “Mobile-first kost extra.” Bij een nieuwe bouw kost mobile-first niet meer dan desktop-first, soms minder. De kosten ontstaan juist als je achteraf een desktop-georienteerde site moet repareren voor mobiel.
Wanneer moet je hiervan wakker liggen, wanneer niet
Wakker liggen: als je site de belangrijkste bron is voor leads, afspraken of bestellingen, en de mobiele conversie blijft achter bij desktop. Dan lekt er elke maand omzet weg die zichtbaar is in je analytics. Een audit met PageSpeed Insights en een eerlijke blik op het mobiele formulier geeft binnen een uur uitsluitsel.
Niet wakker liggen: als je site vooral een digitaal visitekaartje is en de echte klantcontacten via netwerk, telefoon of bestaande relaties lopen. Mobiel moet dan netjes werken, maar diepe optimalisatie levert weinig op. Investeer dat budget liever in de kanalen waar klanten daadwerkelijk vandaan komen.
Gerelateerde termen
- Frontend: de visuele laag waar mobile-first beslissingen zichtbaar worden.
- CMS: het systeem waarmee de content wordt beheerd, idealiter met een mobiele preview.
- Headless CMS: maakt het makkelijker om dezelfde content op verschillende schermformaten te tonen.
- CDN: versnelt het laden op mobiele verbindingen door content dichter bij de gebruiker te leveren.
- Onboarding: de eerste interactie met een product gebeurt steeds vaker op mobiel.