Bij de eerste ontwerpbespreking zit de ondernemer meestal achter een laptop of een groot beeldscherm. Daar ziet het ontwerp er ruim en rustig uit. Twee weken na de livegang belt dezelfde ondernemer: zijn zwager had de site op zijn telefoon bekeken en kon het telefoonnummer niet vinden. Dat gesprek voorkomt u met mobile first ontwerp: de site eerst bedenken voor het kleine scherm, en pas daarna uitbreiden naar de laptop. In dit artikel leggen we uit wat dat in de praktijk inhoudt en waarom het meer is dan een technisch detail.
Wat mobile first ontwerp precies betekent
Lange tijd werkte het andersom. Een ontwerper maakte een mooie desktopversie en daarna werd die versie “responsive” gemaakt: kolommen schoven onder elkaar, het menu verdween achter drie streepjes, en wat niet paste werd kleiner. Het resultaat was vaak een gekrompen desktopsite. Leesbaar, maar niet bedacht voor iemand die met één duim scrolt terwijl hij in de bus zit.
Bij mobile first begint u op het smalste scherm. U beslist eerst wat iemand op een telefoon nodig heeft en in welke volgorde. Pas als dat staat, kijkt u wat u met de extra ruimte op een groter scherm toevoegt. Een tweede kolom, een grotere foto, een tabel die op de telefoon als lijst werd getoond. Dat lijkt een kleine verschuiving, maar het dwingt tot keuzes die een site voor iedereen beter maken.
Waarom Google ook naar de telefoonversie kijkt
Er is een praktische reden om het serieus te nemen. Google bekijkt websites inmiddels met een smartphone-crawler. In juni 2024 kondigde Google op zijn Search Central-blog aan dat ook de laatste groep sites die nog met de desktopcrawler werd bezocht, na 5 juli 2024 overging naar de mobiele crawler. Inhoud die op de telefoon niet bereikbaar is, kan Google dan niet meer goed indexeren. Staat een belangrijke alinea alleen in de desktopversie, dan bestaat die voor Google in feite niet.
Dat betekent niet dat u voor Google ontwerpt. Het betekent wel dat de telefoonversie geen uitgeklede bijzaak mag zijn.
Wat er verandert als u mobiel begint
De volgorde van de inhoud
Op een laptop staan drie blokken naast elkaar en ziet de bezoeker ze tegelijk. Op een telefoon staan ze onder elkaar en ziet hij er één. Dus u moet kiezen: wat komt eerst? Bij een loodgieter is dat misschien “spoed? bel direct”, bij een fysiotherapeut “afspraak maken” en bij een advocatenkantoor de rechtsgebieden. Die keuze maakt u aan het begin, niet als de site al af is.
Knoppen voor duimen
Een muisaanwijzer is precies, een duim niet. Knoppen en links die dicht op elkaar staan, leveren verkeerde tikken op. Een telefoonnummer moet aantikbaar zijn, zodat het direct gebeld wordt. Een WhatsApp-knop kan handig zijn, mits hij niet de helft van het scherm afdekt.
Minder tekst per scherm, niet minder inhoud
Mobile first betekent niet dat u teksten moet inkorten tot twee zinnen. Mensen lezen op hun telefoon prima een volledige pagina, als die goed is opgebouwd: korte alinea’s, duidelijke tussenkoppen, geen muur van tekst. Wat wel weg kan, is opvulling. De welkomsttekst die begint met “Welkom op onze website” leest op een telefoon nog trager dan op een laptop.
Formulieren die op een telefoon in te vullen zijn
Een offerteformulier met twaalf velden is op een laptop vervelend en op een telefoon een reden om af te haken. Vraag wat u echt nodig heeft om terug te bellen. Gebruik veldtypes die het goede toetsenbord openen: cijfers bij een telefoonnummer, het @-teken bij e-mail. Dat soort kleine dingen merkt een bezoeker niet, behalve als ze ontbreken.
Snelheid hoort bij het ontwerp
Een telefoon heeft een tragere processor dan een laptop en zit vaak op een wisselend netwerk. Een ontwerp met een videobanner, vier lettertypes en een slider met grote foto’s voelt op kantoor-wifi nog vlot, maar op 4G in een buitenwijk niet. Waarom dat verschil zo groot is, leest u in ons artikel over mobiele snelheid. Bij mobile first neemt u die beperking mee in het ontwerp zelf: welke foto’s zijn echt nodig, hoe zwaar mag de bovenkant van de pagina zijn, en kan dat ene effect weg.
Hoe u een ontwerp op de telefoon beoordeelt
De meeste ondernemers krijgen ontwerpen te zien als plaatje op een groot scherm. Vraag uw webbouwer om de mobiele versie apart te laten zien, en bekijk die op uw eigen telefoon, niet verkleind op de laptop. Let dan op:
- Ziet u binnen een paar seconden wat het bedrijf doet en hoe u contact opneemt?
- Kunt u het telefoonnummer aantikken?
- Is het menu logisch als u het opent, en hoeveel items staan erin? Daarover meer in ons stuk over de menustructuur.
- Kunt u de tekst lezen zonder in te zoomen, ook buiten in de zon?
- Valt er niets over de rand, zoals een brede tabel of een te lang woord in een kop?
- Werkt het contactformulier met uw duim, inclusief de verzendknop?
Doe die test ook op een oudere of goedkopere telefoon als u er een in huis heeft. Uw klanten hebben niet allemaal het nieuwste toestel.
Waar het in de praktijk misgaat
Stel: een hovenier in Deventer laat een site maken met een prachtige fotogalerij van aangelegde tuinen. Op de laptop staan de foto’s in een raster van vier. Op de telefoon worden het twaalf foto’s onder elkaar, elk schermvullend, voordat de bezoeker bij de diensten en het contactformulier komt. Niemand scrolt daar doorheen. Mobile first had hier betekend: op de telefoon drie foto’s met een knop “meer projecten”, en de diensten daarboven.
Een ander herkenbaar voorbeeld: de cookiemelding, de chatwidget en een balk met “gratis offerte” die samen op een telefoon het halve scherm bedekken. Elk element is los bedacht, niemand heeft ze samen op een klein scherm bekeken.
Laten bouwen met de telefoon als uitgangspunt
Mobile first is geen extra optie die u bijkoopt. Het is een manier van werken die in het hele traject terugkomt: bij de structuur, het ontwerp, de teksten en het testen. Wij laten bij elk ontwerp de telefoonversie apart zien en testen voor de livegang op echte toestellen en in meerdere browsers. Wilt u weten hoe dat bij een nieuwe site verloopt, kijk dan bij WordPress website laten maken. Heeft u al een site en twijfelt u hoe die het op de telefoon doet, dan is een gratis websitecheck een goed begin.
Vraag een gratis websitecheck aan. Binnen één werkdag weet u waar uw website staat.
