Waarom mobile-first webdesign geen optie meer is
Leestijd: 10 minuten
Inhoudsopgave
- De cijfers die niemand meer betwist
- Wat mobile-first design betekent
- De verkeerde volgorde die veel websites beschadigt
- Prioriteit bepalen voor een klein scherm
- Typografie op telefoon: kleine details, groot effect
- Laadtijd op mobile: de vergeten factor
- Hoe Webflow mobile-first design ondersteunt
- Google en mobile-first indexering
- Hoe ik mobile-first aanpak bij elk project
De cijfers die niemand meer betwist
Meer dan de helft van al het webverkeer wereldwijd komt van smartphones. In sommige sectoren, zoals retailen, lokale dienstverlening en professionele dienstverlening voor consumenten, is het aandeel mobiel verkeer 65 tot 75 procent. Die cijfers zijn niet nieuw. Ze zijn al enkele jaren zo, en ze groeien gestaag.
Toch worden veel websites nog steeds primair ontworpen voor desktop en daarna aangepast voor mobiel. Soms omdat het zo altijd is gegaan. Soms omdat de designer en de opdrachtgever allebei op een laptop werken en de telefoon als nagedachte behandelen. Soms omdat het aanpassen voor mobiel goedkoper lijkt dan het opnieuw nadenken voor mobiel.
Die aanpak heeft een prijs. Een website die er op desktop goed uitziet maar op telefoon niet goed werkt, verliest de meerderheid van zijn bezoekers voordat ze ook maar iets hebben gelezen.
Wat mobiel-first design betekent
Mobiel-first design betekent dat het ontwerpproces begint bij het kleinste scherm. Niet bij de meest ruime versie die daarna wordt aangepast, maar bij de meest beperkende versie die daarna wordt uitgebreid.
Dat verschil in benadering heeft verstrekkende gevolgen. Als je begint bij het kleine scherm, word je gedwongen na te denken over prioriteit. Wat moet de bezoeker als eerste zien? Wat is essentieel en wat kan wachten? Welke informatie heeft hij nodig om te beslissen of hij verder leest of afhaakt?
Als je begint bij het grote scherm, neem je die beslissingen impliciet mee. Je plaatst elementen naast elkaar omdat er ruimte is, niet omdat ze naast elkaar horen. En als je daarna probeert alles in een smaller scherm te krijgen, zijn er altijd elementen die niet kloppen, te druk zijn of de verkeerde prioriteit communiceren.
De verkeerde volgorde die veel websites beschadigt
Desktop-first, daarna mobiel aanpassen is de werkwijze die de meeste websites beschadigt die er op het eerste gezicht goed uitzien. Het eindresultaat is een mobiele versie die functioneert maar niet overtuigt. Alles past, maar niets voelt alsof het voor die context is gemaakt.
Een navigatiemenu dat op desktop horizontaal werkt, wordt op mobiel samengevouwen achter een hamburger-icoon. Dat is functioneel, maar het vraagt wel dat de bezoeker weet dat hij op dat icoon moet klikken. Een sectie met twee kolommen naast elkaar die op mobiel onder elkaar gaan staan: prima, maar in welke volgorde? En is die volgorde de logische volgorde voor iemand die de informatie op zijn telefoon scant?
Dat soort vragen worden beantwoord als je mobiel-first werkt, en genegeerd als je desktop-first werkt en daarna aanpast.
Prioriteit bepalen voor een klein scherm
Op desktop heb je ruimte. Je kunt informatie naast elkaar plaatsen, je kunt grote hero-secties gebruiken, je kunt uitgebreide navigatie tonen. Op mobiel is die ruimte er niet. Alles is verticaal, smal en scrollbaar.
Dat vraagt een andere manier van nadenken over welke informatie de bezoeker als eerste nodig heeft. Voor een accountantskantoor: wat wil de bezoeker die zijn telefoon pakt om een accountant te zoeken, als eerste zien? Hoogstwaarschijnlijk: wat doet dit kantoor, voor wie en hoe neem ik contact op. Niet de uitgebreide geschiedenis van het kantoor, niet de lijst van certificeringen, niet de volledige beschrijving van elke dienst.
Mobiel-first design legt die prioriteit eerst vast en bouwt daarna op naar meer detail voor grotere schermen. Dat is de juiste volgorde, ook als de meeste bezoekers uiteindelijk op desktop landen.
Typografie op telefoon: kleine details, groot effect
Typografie op een telefoon is een vakgebied op zich. Wat er op desktop prettig leest, kan op telefoon oncomfortabel zijn. Lettergroottes die op een groot scherm goed proporteren, zijn op een klein scherm soms te klein om zonder inspanning te lezen. Regelafstanden die op desktop open voelen, zijn op mobiel soms te krap voor een vloeiende leeservaring.
Goede mobiele typografie betekent: leesbare lettergroottes zonder te hoeven zoomen, voldoende regelafstand voor comfortabel lezen, en alinealengtes die niet breder zijn dan de duim comfortabel kan volgen. Dat zijn details die het verschil maken tussen een site die prettig leest en een site die je na twee alineas weglegt.
Laadtijd op mobiel: de vergeten factor
Mobiel-first gaat niet alleen over hoe een site eruitziet op een klein scherm. Het gaat ook over hoe snel hij laadt op een mobiel netwerk. Een site die op een snel thuisnetwerk snel laadt, maar op 4G traag is vanwege grote afbeeldingen en zware scripts, verliest bezoekers voordat ze ook maar iets zien.
Afbeeldingen optimaliseren voor mobiel, scripts defer laden zodat de pagina niet wacht tot alle code is geladen, en gebruik maken van een snelle hosting-infrastructuur zijn technische maatregelen die de laadtijd op mobiel direct beinvloeden.
Webflow helpt hierbij. De hosting via een content delivery network zorgt voor snelle laadtijden wereldwijd. En de manier waarop Webflow afbeeldingen serveert, met automatische WebP-conversie en responsive images, zorgt dat bezoekers op mobiel de juiste afbeeldingsgrootte krijgen in plaats van een desktop-formaat dat onnodig groot is.
Hoe Webflow mobiel-first design ondersteunt
Webflow is gebouwd voor mobiel-first design. In de Webflow Designer werk je met breakpoints: specifieke schermbreedtes waarvoor je het design apart kunt instellen. Je ontwerpt op mobiel, publiceert de mobiele stijlen, en schakelt daarna naar tablet en desktop om het design uit te breiden.
Dat is anders dan veel andere tools waarbij je begint bij desktop en mediaquery's toevoegt om het design voor kleinere schermen aan te passen. Webflow draait die logica om, in lijn met de mobiel-first aanpak die de industrie al jaren propageert maar weinig tools echt ondersteunen.
Per breakpoint kun je bovendien elementen verbergen of tonen, de volgorde van secties aanpassen en de typografie los instellen. Die flexibiliteit maakt het mogelijk om op mobiel en desktop echt verschillende ervaringen te bieden zonder twee aparte websites te bouwen.
Google en mobile-first indexering
Google heeft mobile-first indexing volledig doorgevoerd. Dat betekent dat Google de mobiele versie van een website gebruikt als basis voor de beoordeling en indexering van de site, ook voor desktop-zoekopdrachten. Een site die slecht werkt op mobiel, scoort slechter in Google, ongeacht hoe goed de desktopversie is.
Dat heeft directe gevolgen voor de vindbaarheid van jouw website. Een website die mobiel-first is gebouwd, heeft structureel een betere uitgangspositie in Google dan een website waarbij mobiel een afterthought is geweest. Niet alleen voor de gebruiker, maar ook voor de zoekmachine die bepaalt wie er bovenaan staat.
Hoe ik mobiel-first aanpak bij elk project
Elk project dat ik bouw, begint bij het kleinste scherm. Ik ontwerp en bouw eerst de mobiele versie volledig, test hem op meerdere echte apparaten en schaal daarna op naar tablet en desktop. Niet andersom.
In de testfase gebruik ik echte telefoons, geen browseremulators. Een site die er in Chrome Developer Tools goed uitziet op simulatie van een iPhone, ziet er in de praktijk soms anders uit op een echte iPhone. Echte apparaten zijn de enige betrouwbare test.
Het resultaat is een website die op elk scherm werkt zoals hij moet werken. Niet net zo goed, maar echt goed. Dat is het verschil.