Je site werkt perfect op de laptop. Alle elementen staan op de juiste plek, de navigatie klopt, en het ziet er professioneel uit. Dan pak je je telefoon erbij. De tekst is te klein, de knoppen overlappen, en het menu is een puzzel. Herkenbaar? Dan ben je niet in de minderheid - het is een van de meest gemaakte fouten in webdesign.
Meer dan 60% van je bezoekers zit op mobiel
Statcounter meldt dat wereldwijd meer dan 60% van alle webverkeer van mobiele apparaten komt. In Nederland ligt dat iets lager maar dicht in de buurt. Dat betekent dat de meerderheid van je bezoekers je site op een klein scherm bekijkt, met hun duim als enige invoermethode.
Als je je site ontwerpt op een 27-inch monitor en daarna "responsive maakt", werk je tegen je bezoekers in. Je dwingt een desktop-ontwerp in een mobiele bak en dat knelt. De content is er, de stijl is er, maar het voelt niet goed.
Wat mobile-first eigenlijk betekent
Mobile-first is geen technische instelling maar een ontwerp-volgorde. Je begint met de kleinste versie van je site: 375 pixel breed, beperkte ruimte, trage verbinding. Alles wat op die versie staat, moet er echt toe doen.
Daarna schaal je op. Voor tablets: iets meer ruimte, misschien een twee-koloms layout. Voor desktop: de volledige versie met alle visuele rijkdom die je wilt.
Het verschil met de traditionele aanpak (desktop-first) is subtiel maar groot. Bij desktop-first haal je weg. Bij mobile-first voeg je toe. Weggooien is moeilijker dan toevoegen. Content die op desktop staat maar niet past op mobiel, wordt alsnog meegestuurd maar verstopt. Je bezoekers betalen er met laadtijd voor.
Hoe mobile-first ontwerpen er in de praktijk uitziet
Stap 1: begin met wat er echt toe doet. Op de homepage: wat is de ene zin die een bezoeker moet onthouden? Dat is je opening. De rest is aanvulling.
Stap 2: ontwerp je navigatie voor touch. Hamburger menus of bottom bars ondersteunen duim-navigatie. Desktop-menus met hover-states werken niet op een touchscreen.
Stap 3: maak je knoppen groot genoeg. Apple schrijft voor dat een touch-target minimaal 44 bij 44 pixel moet zijn. Dat is groter dan je denkt. Knoppen van 30px hoog zien er in een design-mockup prima uit maar zijn op een telefoon een uitdaging om te raken.
Stap 4: test op een echt apparaat, niet alleen in de browser-simulator. De DevTools-modus in Chrome is handig maar simuleert geen echte touch-interacties of trage verbindingen op 4G.
Stap 5: schrijf CSS met min-width breakpoints, niet max-width. Dat is de technische vertaling van mobile-first. Je begint met de mobiele stijl als basis en breidt uit voor grotere schermen.
/* Mobile first - basis stijl */
.container {
padding: 1rem;
}
/* Tablet en groter */
@media (min-width: 768px) {
.container {
padding: 2rem;
}
}
De fouten die het vaakst voorkomen
Tekst die te klein is. 14px is het absolute minimum voor lopende tekst op mobiel. 16px is beter. Alles kleiner dwingt je bezoeker te zoomen, en dat is een signaal dat ze weg gaan.
Afbeeldingen die te zwaar zijn. Een foto van 3MB die je desktop-bezoeker nauwelijks merkt, haalt een mobiele bezoeker op slechte wifi hard terug in de realiteit. Gebruik WebP, comprimeer agressief, en laad afbeeldingen lazy. Geen afbeelding is beter dan een trage afbeelding.
Popups die te vroeg komen. Op desktop sluit je een popup met een kleine x in de hoek. Op mobiel verdwijnt die x achter de adresbalk van de browser. Je bezoeker zit vast en vertrekt.
Tabellen die niet aanpassen. HTML-tabellen zijn berucht op mobiel. Ze lopen over de rand van het scherm. Als je tabellen nodig hebt, gebruik een horizontale scroll-container of zet de data om naar een andere structuur voor kleine schermen.
Wat Google ermee te maken heeft
Google gebruikt Mobile-First Indexing. Dat betekent dat Google je site crawlt zoals een mobiele gebruiker hem ziet. De mobiele versie van je pagina is de versie die mee telt voor je positie in de zoekresultaten.
Als je mobiele versie slechter is dan je desktop-versie - minder content, langzamer, kapotte layouts - heeft dat directe gevolgen voor je SEO. Dit is niet iets wat Google op de achtergrond meespeelt. Het is de hoofdregel.
Je kunt in Google Search Console exact zien welke mobiele fouten Google op je site constateert: elementen die te dicht op elkaar staan, tekst die te klein is, of content die alleen op desktop staat. Dat is gratis feedback van de grootste traffic-bron die je hebt.
Hoe je weet of je site mobile-first klaar is
Drie snelle controles:
Eerste check: open je site op je eigen telefoon en probeer alle belangrijke acties te doen. Contact opnemen, een product bekijken, het menu navigeren. Kost het moeite? Dan kost het je bezoekers ook moeite.
Tweede check: test je paginasnelheid op mobiel via PageSpeed Insights van Google. Een score onder de 50 op mobiel is een rode vlag en ook een directe SEO-impact.
Derde check: kijk in Google Analytics naar het bouncepercentage op mobiel versus desktop. Een significant hogere bounce op mobiel betekent dat je mobiele bezoekers iets tegenkomen wat hen afschrikt.
Bij Web Design by Kick bouwen we elke site standaard mobile-first. Niet omdat het trendy is, maar omdat het de enige aanpak is die werkt voor een bezoekersmix die voor het merendeel op een telefoon zit.
Conclusie
Mobile-first is geen optie naast responsive design - het is de volgorde waarin je denkt en bouwt. Begin klein, voeg toe voor grotere schermen, en test op echte apparaten. Je bezoekers gebruiken hun telefoon, dus jij ontwerpt voor hun telefoon.