Mobile-first websiteontwerp: een praktische handleiding
Wat mobile-first ontwerp echt betekent, hoe het verschilt van responsief ontwerp en hoe je een mobile-first site ontwerpt en bouwt: contentvolgorde, tikdoelen, CSS min-width-breekpunten, afbeeldingen en testen, plus notities voor bedrijven met meerdere locaties.
Veelgestelde vragen
Wat is het verschil tussen mobile-first en responsief ontwerp?
Responsief ontwerp betekent één site die zijn layout aanpast aan elke schermgrootte. Mobile-first is de volgorde waarin je ontwerpt en codeert: begin met het kleine scherm en voeg layout toe voor grotere schermen. Een mobile-first site is responsief, maar een responsieve site die desktop-first is gebouwd, eindigt vaak met een krappe, achteraf bedachte mobiele versie.
Waarom is mobile-first belangrijk voor SEO?
Google gebruikt mobile-first indexering, wat betekent dat het voornamelijk de mobiele versie van een pagina gebruikt voor indexering en ranking. Als content, koppen, gestructureerde data of links op mobiel ontbreken, ziet Google ze mogelijk niet.
Welke breekpunten moet ik gebruiken voor een mobile-first site?
Laat de content beslissen: maak de browser breder totdat de layout uitgerekt oogt en voeg daar een breekpunt toe. Gangbare beginpunten zijn rond 640px, 768px, 1024px en 1280px, die veel CSS-frameworks gebruiken, geschreven als min-width-mediaqueries.
Hoe groot moeten knoppen op mobiel zijn?
WCAG 2.2 stelt een minimale doelgrootte van 24 bij 24 CSS-pixels (niveau AA) en beveelt 44 bij 44 aan (niveau AAA). De richtlijnen van Apple gebruiken 44 punten en de Material-richtlijnen van Google 48dp. Mik op ongeveer 44 tot 48 pixels voor primaire knoppen en links in menu's.
Hoe moeten franchises omgaan met mobile-first websites?
Gebruik één gedeeld sjabloon met een locatiepagina per franchise, elk met bovenaan tik-om-te-bellen, tik-voor-routebeschrijving, uren en een winkelspecifieke boekings- of bestelactie. Mobiele bezoekers die zoeken naar 'in de buurt' willen direct handelen, dus de locatiezoeker en de primaire actie moeten met één duim werken.
Kort antwoord: mobile-first webdesign betekent dat je eerst de telefoonversie van een pagina ontwerpt en bouwt en daarna layout toevoegt voor tablets en desktops naarmate het scherm breder wordt. In code is je basis-CSS de mobiele layout en gebruik je min-width-mediaqueries om die te verbeteren. Het dwingt je te beslissen wat op elke pagina het belangrijkst is en het sluit aan bij hoe Google sites tegenwoordig indexeert.
Mobile-first vs responsive: het echte verschil
Mensen gebruiken deze termen door elkaar, maar ze beantwoorden verschillende vragen.
Responsief ontwerp
Mobile-first ontwerp
Wat het is
Eén site waarvan de layout zich aanpast aan de schermgrootte
Een proces: begin klein, verbeter naar boven
CSS-stijl
Kan max-width zijn (desktop verkleinen) of min-width
min-width (mobiel laten groeien)
Contentprioriteit
Vaak op desktop bepaald en daarna samengeperst
Bepaald op het kleinste scherm
Typische fout
Verborgen content, minuscule tikdoelen, zware pagina's op telefoons
Desktoplayout voelt leeg aan als het niet is verbeterd
De beste praktijk is beide: een responsieve site, mobile-first gebouwd.
Stap 1: Bepaal de volgorde van content op een telefoon
Op een smal scherm is alles één kolom, dus volgorde is je hele layout. Schrijf voor elke pagina een genummerde lijst met secties in de volgorde die een bezoeker op een telefoon nodig heeft.
Voor de homepage van een lokale dienst kan dat zijn:
Wat je doet en waar (één regel)
Primaire actie: bellen of boeken
Bewijs: beoordeling, reviews of herkenbare klanten
Diensten, als korte aantikbare kaarten
Servicegebied of locaties
Secundair bewijs: foto's, voor en na
FAQ
Footer met uren, adres en contact
Alles wat geen plek in deze lijst verdient, hoort waarschijnlijk ook niet op desktop.
Stap 2: Ontwerp voor duimen
Tikdoelen: maak knoppen en menulinks minstens 44 tot 48 pixels hoog, met ruimte ertussen. Het minimum van WCAG 2.2 is 24 bij 24 CSS-pixels; dat is een ondergrens, geen doel.
Primaire actie binnen bereik: een vaste onderbalk met "Bel" en "Boek" werkt goed voor lokale bedrijven. Houd hem kort zodat hij geen content bedekt.
Navigatie: een menuknop die een lijst op volledig scherm opent is prima. Houd de lijst tot vijf tot zeven items en zet de hoofdactie buiten het menu.
Formulieren: één kolom, labels boven velden en de juiste invoertypes (tel, email, number) zodat telefoons het juiste toetsenbord tonen. Gebruik autocomplete-attributen zodat browsers namen en adressen kunnen invullen.
Tekst: lopende tekst van 16px is een gangbaar minimum en voorkomt dat iOS Safari op formuliervelden inzoomt. Houd de regellengte prettig en het contrast minstens 4,5:1 voor lopende tekst (WCAG AA).
Stap 3: Bouw het mobile-first in code
Begin met de viewport-tag in de head van elke pagina:
Vloeiende typografie en witruimte met clamp(), bijvoorbeeld font-size: clamp(1.75rem, 5vw, 3rem) voor een kop, zodat je minder breekpunten nodig hebt.
Flexbox en Grid met auto-fit: grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) maakt alleen kolommen aan als er ruimte is.
Containerqueries (ondersteund in de huidige grote browsers) laten een kaart van layout veranderen op basis van de breedte van zijn container in plaats van het hele scherm, wat handig is voor herbruikbare componenten.
Utility-frameworks zoals Tailwind CSS zijn standaard mobile-first: klassen zonder prefix gelden voor alle formaten en prefixen zoals md: gelden vanaf die breedte omhoog.
Kies breekpunten waar je content breekt, niet voor specifieke telefoonmodellen.
Stap 4: Maak het snel op een echte telefoonverbinding
Telefoons hebben tragere processors en minder betrouwbare netwerken dan de laptop waarop je ontwerpt. De Core Web Vitals van Google meten dit: Largest Contentful Paint (laden), Interaction to Next Paint (reactiesnelheid) en Cumulative Layout Shift (visuele stabiliteit).
Responsieve afbeeldingen: gebruik srcset en sizes zodat telefoons kleinere bestanden downloaden, en moderne formaten zoals WebP of AVIF.
Stel altijd width en height in (of aspect-ratio) op afbeeldingen en embeds om layoutverschuiving te voorkomen.
Lazy-load afbeeldingen onder de vouw met loading="lazy", maar niet de hoofdafbeelding van de hero.
Beperk lettertypen tot een of twee families en een paar gewichten.
Snoei scripts van derden: chatwidgets, trackers en embeds zijn veelvoorkomende oorzaken van trage interactie op telefoons. Laad ze laat of alleen waar nodig.
Stap 5: Verbeter voor grotere schermen
Zodra de telefoonlayout werkt, maak je de browser breder en voeg je waarde toe, niet alleen breedte:
Rasters met meerdere kolommen voor diensten en producten
De volledige navigatiebalk in plaats van een menuknop
Tekst en afbeeldingen naast elkaar
Een vaste zijbalk voor lange artikelen of boekingsoverzichten
Hoverstatussen, maar nooit informatie die alleen via hover beschikbaar is, omdat touchscreens niet kunnen hoveren
Stap 6: Test als een bezoeker
De apparaatmodus in de dev tools van je browser voor snelle controles bij 360px, 390px en 414px breed, plus tabletformaten.
Minstens één echte Android en één echte iPhone, omdat emulators eigenaardigheden bij scrollen, toetsenborden die velden bedekken en trage CPU's missen.
Lighthouse in Chrome DevTools en PageSpeed Insights, dat ook veldgegevens van echte Chrome-gebruikers toont wanneer een site genoeg verkeer heeft.
Draai naar liggend en controleer dat vaste balken niet het halve scherm bedekken.
Voltooi de hoofdtaak (boeken, kopen, bellen) met één duim op mobiele data.
Controleer Search Console na de lancering op mobiele problemen. Onze gids voor Google Search Console behandelt waar je moet kijken.
Mobile-first voor franchises en bedrijven met meerdere locaties
Sites van franchises en bedrijven met meerdere locaties hebben een specifiek mobiel probleem: de meeste bezoekers komen binnen via een zoekopdracht "in de buurt" op een telefoon en willen direct de gegevens van één locatie.
Eerst een locatiezoeker: "Gebruik mijn locatie" plus een zoekopdracht op postcode of plaats, met resultaten als aantikbare kaarten.
Een pagina per locatie gebouwd vanuit één gedeeld sjabloon: adres, uren, telefoon, kaartlink, diensten en een lokale boekings- of bestelactie, met de belknop bovenaan.
Lokale details die verschillen: elke pagina heeft waar mogelijk eigen foto's, personeel of reviews nodig, niet alleen een verwisselde plaatsnaam.
Consistent merk, lokale controle: franchisenemers moeten uren en aanbiedingen kunnen bijwerken zonder de layout aan te raken.
Gestructureerde data: LocalBusiness-schema op elke locatiepagina met de juiste naam, adres en telefoon.
Mobile-first checklist
[ ] Viewport-metatag op elke pagina
[ ] Contentvolgorde geschreven voor één kolom
[ ] Primaire actie zichtbaar zonder scrollen op een telefoon
[ ] Tikdoelen van ongeveer 44 tot 48px, met tussenruimte
[ ] Lopende tekst van 16px+, contrast 4,5:1
[ ] Basis-CSS voor mobiel, min-width-queries voor grotere schermen
[ ] Responsieve afbeeldingen met afmetingen ingesteld
[ ] Dezelfde content en gestructureerde data op mobiel en desktop
[ ] Getest op echte iOS- en Android-apparaten
Er een bouwen zonder vanaf nul te beginnen
Elke site die We.Inc bouwt, is vanaf het begin responsief en je kunt de telefoonlayout in de editor bekijken en daarna visueel of in de code aanpassen. Bekijk de sjablonen om te zien hoe layouts inklappen tot één kolom, of beschrijf je bedrijf en krijg een eerste concept om op je eigen telefoon te testen.