Mobile first: begin klein, dan houd je over wat telt
De meeste websites worden nog steeds ontworpen op een groot scherm. Dat is logisch, want daar zit de ontwerper achter. Alleen zit je bezoeker daar niet. Die staat in de rij bij de kassa met een telefoon in zijn hand.
Ontwerp je van groot naar klein, dan ga je weglaten. Ontwerp je van klein naar groot, dan ga je toevoegen.
Dat verschil klinkt subtiel maar het bepaalt alles. Weglaten doe je met tegenzin, want alles is er niet voor niets gekomen.
Toevoegen doe je bewust. Je begint met wat er echt moet staan en breidt uit als er ruimte is. Dat is de kern van mobile first, en het is meer een werkvolgorde dan een techniek.
Begin bij het kleinste scherm, dan houd je vanzelf alleen over wat telt.
Wat is mobile first?
Mobile first betekent dat je ontwerpen vanaf klein scherm en daarna uitbreidt. Eerst de telefoon, dan de tablet, dan de desktop.
Ook in de code werkt het zo. Je schrijft de basisopmaak voor het kleinste scherm en voegt daarboven regels toe voor bredere vensters.
Het verschil met responsive
Responsive betekent alleen dat je site meebeweegt met de schermbreedte. Dat zegt niets over de volgorde waarin je hebt gewerkt.
Een site kan dus responsive zijn en toch vanaf desktop bedacht. Dan is de mobiele versie een ingekorte variant in plaats van een eigen ontwerp. Meer over die schermbreedtes lees je bij breakpoint.
Waarom het werkt
Omdat een klein scherm je dwingt tot keuzes. Er passen geen vier kolommen naast elkaar, dus je moet bepalen wat bovenaan komt.
Dat prioriteiten stellen is precies de oefening die veel sites nooit doen. Op een groot scherm past alles, dus wordt er niets geschrapt.
Waar ik op let
Staat je belangrijkste boodschap in het eerste scherm?
Is je actieknop bereikbaar binnen het duimbereik?
Blijft je kop leesbaar zonder in te zoomen?
Werkt je menu met een duim en niet alleen met een muis?
Die tweede wordt zelden meegenomen. Onderaan het scherm is makkelijker te raken dan bovenaan, zeker op een groot toestel.
Hoeveel bezoek is mobiel?
Bij mijn klanten zit het meestal tussen de zestig en tachtig procent. Bij lokale diensten ligt het aan de bovenkant daarvan.
Kijk het na in je eigen statistieken en gok het niet. Het cijfer verschilt per branche en per soort pagina.
Vindbaarheid
Google beoordeelt je site sinds een paar jaar op basis van de mobiele versie. Dat heet mobiele indexering.
Staat er op mobiel minder inhoud dan op desktop, dan telt alleen die kleinere versie. Verberg dus geen teksten op een klein scherm.
Snelheid weegt daar bovendien zwaarder, want een telefoon heeft minder rekenkracht. Meer daarover lees je bij pagespeed.
Hoe je het test
Niet in het venster van je browser. Dat geeft je de afmetingen maar niet het gevoel.
Pak een echt toestel en doe wat je bezoeker doet. Zoek een prijs op, vul je formulier in, bel jezelf via je eigen nummer. Kijk ook of de hero je kop en je knop samen toont.
Doe die test buiten in fel daglicht. Dat is de strengste situatie die er is. Het raakt direct aan accessibility.
Meet je aanvragen apart
Splits je cijfers uit naar mobiel en desktop. Niet alleen je bezoek, maar ook je aanvragen.
Zeventig procent van je bezoek is mobiel, terwijl tachtig procent van je aanvragen van desktop komt. Dat komt regelmatig voor. Dat is een signaal dat er iets misgaat.
Verberg geen inhoud
Een veelgemaakte fout is teksten weglaten op een klein scherm om ruimte te winnen. Dat kost je vindbaarheid, want Google beoordeelt de mobiele versie.
Beter kort je de tekst in voor iedereen. Wat op mobiel te lang is, is op desktop meestal ook te lang.
Denk aan de duim
Onderaan het scherm is makkelijker te raken dan bovenaan, zeker op een groot toestel. Zet je belangrijkste knop dus niet standaard rechtsboven.
Bij een grid dat naar een kolom terugvalt, bepaalt de volgorde bovendien wat er eerst komt. Controleer of dat nog klopt.
Meer vragen over Mobile first
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is mobile first?
Wat is het verschil tussen mobile first en responsive?
Waarom ontwerp je vanaf het kleinste scherm?
Hoeveel bezoekers komen er via mobiel?
Wat betekent mobile first voor je vindbaarheid?
Hoe test je je website goed op mobiel?
Wat is mobile first?
Responsive betekent alleen dat je site meebeweegt met de schermbreedte. Het zegt niets over de volgorde waarin je hebt gewerkt.
Een site kan dus responsive zijn en toch volledig vanaf desktop bedacht. Dan is de mobiele versie een ingekorte variant in plaats van een eigen ontwerp.
Dat zie je terug in de details. Een menu met acht items dat op mobiel achter een knop verdwijnt. Of een tabel die je zijwaarts moet scrollen.
Mobile first is dus een werkwijze, responsive is een eigenschap. Je hebt allebei nodig, maar ze zijn niet hetzelfde.
Vraag bij een offerte dus niet alleen of je site responsive wordt. Vraag waar het ontwerp begint. Meer over schermbreedtes lees je bij breakpoint.
Kijk naar de details om het verschil te herkennen. Een tabel die je zijwaarts moet scrollen is een teken dat er vanaf desktop is gedacht. Vraag ook om een mobiele versie van het ontwerp voordat er gebouwd wordt.
Wat is het verschil tussen mobile first en responsive?
Mobile first betekent dat je een website ontwerpt vanaf het kleinste scherm en daarna uitbreidt. Eerst de telefoon, dan de tablet, dan de desktop.
Ook in de code werkt het zo. Je schrijft de basisopmaak voor het kleinste scherm en voegt daarboven regels toe voor bredere vensters.
De meeste websites worden nog steeds andersom gemaakt. Dat is logisch, want de ontwerper zit achter een groot scherm. Alleen zit je bezoeker daar niet.
Ontwerp je van groot naar klein, dan ga je weglaten. Ontwerp je van klein naar groot, dan ga je toevoegen.
Dat verschil klinkt subtiel maar het bepaalt alles. Weglaten doe je met tegenzin, want alles is er niet voor niets gekomen. Toevoegen doe je bewust.
Vraag bij een offerte niet alleen of je site responsive wordt. Vraag waar het ontwerp begint, want dat antwoord zegt meer over het resultaat. Dat antwoord scheelt je later een verbouwing op het scherm waar je meeste bezoek zit.
Waarom ontwerp je vanaf het kleinste scherm?
Omdat een klein scherm je dwingt tot keuzes. Er passen geen vier kolommen naast elkaar, dus je moet bepalen wat bovenaan komt.
Dat prioriteiten stellen is precies de oefening die veel sites nooit doen. Op een groot scherm past alles, dus wordt er niets geschrapt.
Het resultaat is een homepage met veertien blokken waarvan niemand weet welke belangrijk is. Ook op desktop werkt dat niet, al valt het daar minder op.
Begin je klein, dan houd je vanzelf over wat telt. Wat je daarna toevoegt voor grotere schermen, voegt echt iets toe.
Er is nog een praktisch voordeel. Code die begint bij het kleinste scherm is eenvoudiger en lichter, en dat merk je in je laadtijd.
Tel eens hoeveel blokken er op je homepage staan. Meer dan zeven en je hebt waarschijnlijk nooit de oefening gedaan om te kiezen. Schrap net zolang tot je kunt uitleggen waarom elk blok er staat.
Hoeveel bezoekers komen er via mobiel?
Bij mijn klanten zit het meestal tussen de zestig en tachtig procent. Bij lokale diensten ligt het aan de bovenkant daarvan.
Denk aan een installateur, een kapper of een restaurant. Daar zoekt bijna iedereen onderweg of vanaf de bank.
Bij zakelijke dienstverlening ligt het lager. Iemand die een offerte voor een softwaretraject vergelijkt, doet dat vaker achter een bureau.
Kijk het na in je eigen statistieken en gok het niet. Het cijfer verschilt per branche, per pagina en zelfs per moment van de dag.
Splits het ook uit naar je aanvragen. Het komt regelmatig voor dat zeventig procent van je bezoek mobiel is, terwijl tachtig procent van je aanvragen van desktop komt. Dat is een signaal dat er iets misgaat op mobiel.
Splits je cijfers uit naar mobiel en desktop, en niet alleen je bezoek maar ook je aanvragen. Dat verschil legt problemen bloot die je anders nooit ziet. Vraag je bouwer om dat verschil een keer voor je uit te splitsen.
Hoe test je je website goed op mobiel?
Niet in het venster van je browser. Dat geeft je de afmetingen maar niet het gevoel.
Pak een echt toestel en doe wat je bezoeker doet. Zoek een prijs op, vul je formulier in, bel jezelf via je eigen nummer.
Let daarbij op vier dingen. Staat je belangrijkste boodschap in het eerste scherm? Is je actieknop met een duim te raken? Blijft je kop leesbaar zonder in te zoomen? En werkt je menu prettig?
Doe die test buiten in fel daglicht. Dat is de strengste situatie die er is, en daar zie je meteen of je contrast klopt.
Vraag ook iemand anders om het te doen op zijn eigen toestel. Jij kent je site te goed om nog te merken waar iemand vastloopt.
Doe die test op een echt toestel en buiten in daglicht. Een simulatie in je browser geeft je de maten maar niet de ervaring. Vraag daarna iemand anders om hetzelfde te doen op zijn eigen toestel.
Weet je zeker dat jouw website prettig werkt op een telefoon? Stuur me de link via het formulier hieronder. Ik loop je belangrijkste pagina’s door op een echt toestel en noteer waar het knelt. Vermeld je plaats, dan weet ik meteen waar je zit.
