Mobile first is geen stijl en geen techniek. Het is een volgorde. Je ontwerpt een website eerst voor een telefoonscherm en pas daarna voor een laptop, in plaats van andersom.
Waarom de volgorde uitmaakt
Op een laptop is er ruimte zat. Een menu met acht items, drie kolommen naast elkaar, een grote foto links en tekst rechts: het past allemaal. Ontwerp je zo, dan moet je daarna alles inklappen om het op een telefoon te laten werken. Dat inklappen gaat bijna altijd ten koste van iets. Het menu verdwijnt achter een hamburgerknop, de kolommen komen onder elkaar en die ene knop die op de laptop meteen opviel, staat op de telefoon opeens onderaan.
Begin je bij de telefoon, dan dwingt de ruimte je tot kiezen. Wat moet er echt staan? Welke knop is de belangrijkste? Welke tekst kan weg? Die keuzes maken de laptopversie daarna ook beter, want je hebt al bepaald wat er toe doet.
Wat het concreet verandert
Een paar dingen die anders gaan als je bij het kleine scherm begint:
- Eén hoofdactie per scherm. Bellen, mailen of het formulier. Niet alle drie tegelijk even groot.
- Kortere teksten boven de vouw. Op een telefoon zie je vier of vijf regels voordat iemand moet scrollen. Daar moet staan wat je doet en voor wie.
- Knoppen die je met een duim raakt. Een link in een lopende zin is op een telefoon lastig aan te tikken. Een echte knop niet.
- Afbeeldingen die niet te zwaar zijn. Een foto van vier megabyte laadt op wifi prima en op een slechte verbinding niet.
- Formulieren met zo min mogelijk velden. Elk veld dat je toevoegt, kost je invullers. Op een telefoon meer dan op een laptop.
Mobile first en Google
Google beoordeelt sinds een paar jaar de mobiele versie van je website en niet de desktopversie. Staat er op je telefoonversie minder inhoud dan op de laptopversie, dan is dat de versie waar Google mee rekent. Dat is een reden om op mobiel niet stiekem hele stukken te verbergen om het overzichtelijk te houden.
Hoe je controleert of jouw site het doet
Pak je eigen telefoon en doe drie dingen. Zoek je bedrijf op via Google in plaats van het adres in te typen, want zo komt een klant ook binnen. Probeer het contactformulier helemaal in te vullen en te versturen. En bekijk de pagina met je product of dienst zonder in te zoomen.
Loopt een van die drie stroef, dan is dat waar je klanten kwijtraakt. Niet in het ontwerp, maar in de praktijk.
Betekent dit dat de laptopversie niet telt?
Nee. Zakelijke bezoekers kijken vaak wel op een groot scherm, en een offerte wordt zelden op een telefoon doorgenomen. Mobile first betekent niet dat de laptop er niet toe doet, het betekent dat je de moeilijkste beperking als eerste oplost. Wat daarna op een groot scherm gezet moet worden, is het makkelijke deel.
Twijfel je of jouw site het op een telefoon goed doet? Bij een redesign loop ik elke pagina op telefoon, tablet en laptop na voordat hij live gaat. Wil je weten wat dat kost, kijk dan bij website laten maken.
Veelgestelde vragen
Is mobile first hetzelfde als responsive design?
Nee. Responsive betekent dat een website meebeweegt met de schermgrootte. Mobile first gaat over de volgorde waarin je ontwerpt: eerst het kleine scherm, daarna het grote. Een site kan responsive zijn en toch vanaf de laptop ontworpen, met alle compromissen op mobiel die daarbij horen.
Moet ik mijn hele website opnieuw laten bouwen?
Meestal niet. Als de techniek eronder in orde is, zijn de meeste mobiele problemen op te lossen zonder opnieuw te beginnen. Wat wel vaak nodig is: keuzes maken in wat er boven de vouw staat, en dat is eerder schrijfwerk dan bouwwerk.
Hoe test ik het zelf zonder hulpmiddelen?
Pak je telefoon, zoek je bedrijf op via Google in plaats van het adres in te typen, en vul je eigen contactformulier helemaal in. Loopt dat stroef, dan weet je genoeg. Dit zegt meer dan welke test op een laptop ook.
Een website laten maken?
Gebouwd door een persoon die je kunt bellen, met een prijs die vooraf vaststaat. Vanaf 750 euro eenmalig of 99 euro per maand.
