Je eerste scherm op een telefoon: wat past er wel en niet

Op een telefoon is het eerste scherm van je website een smal, kort venster, en alles wat op een laptop naast elkaar stond, staat nu onder elkaar. Veel bezoekers zien je site eerst op een telefoon, dus in dat kleine venster ontstaat hun eerste indruk.

Het deel van de pagina dat je ziet zonder te scrollen heet above the fold. Op een telefoon is het veel kleiner dan de meeste mensen verwachten als ze op een laptop ontwerpen.

Wat er met je opmaak gebeurt op een telefoon

Een gebruikelijke homepage toont op een laptop links een kop en een knop, met rechts een afbeelding. Op een telefoon komen die drie onder elkaar:

De kop, vaak over meerdere regels verdeeld
De afbeelding, die het grootste deel van het scherm kan innemen
De knop, die onder het eerste scherm belandt

Het resultaat: een bezoeker ziet een kop en een stuk foto, en moet scrollen om te ontdekken wat hij kan doen. Komen daar een cookiebanner onderaan en een menubalk bovenaan bij, dan blijft er weinig over.

Wat er in het eerste scherm hoort

Mik op een telefoon op dit in het eerste scherm, in deze volgorde:

De kop, kort genoeg voor twee of drie regels
Eén regel uitleg, als die past
De belangrijkste knop, zichtbaar zonder scrollen
Een vertrouwenssignaal, zoals een reviewscore, als er ruimte is

Een grote hero-afbeelding is het eerste om te heroverwegen. Op een telefoon duwt die vaak alles wat belangrijk is naar beneden. Hem kleiner maken, onder de knop zetten of op kleine schermen weglaten zijn allemaal redelijke keuzes.

Veelvoorkomende problemen op kleine schermen

Een cookiebanner over half het scherm. Maak hem compact, of zet hem onderaan met kleine knoppen.
Een menubalk die te veel hoogte inneemt, zeker met een groot logo.
Tekst die te klein is, of te groot, zodat de kop het hele scherm vult.
Knoppen die te klein zijn om op te tikken of te dicht op elkaar staan.
Pop-ups die op een telefoon lastig te sluiten zijn.

Bekijk je eigen eerste scherm op mobiel

Je browservenster smaller maken geeft een idee, maar niet precies wat een telefoon toont. De gratis above-the-fold-checker laadt je pagina op een telefoonscherm van 390 × 844 naast een laptopscherm, precies zoals StayOrBounce-reviewers het zien. Reviewers beoordelen allebei, dus een zwakke telefoonversie zie je terug in je scores.