Hoe hoog is above the fold op een telefoon?
Ongeveer 550 tot 650 pixels bij een gemiddelde telefoon. Dat is de ruimte die overblijft nadat de adresbalk van de browser eraf is.
Een vast getal bestaat niet, en dat is geen flauw antwoord. Schermformaten lopen uiteen en browsers gedragen zich verschillend.
Reken daarom met de krapste maat en zorg dat het belangrijkste daarbinnen past.
Waarom er geen vast getal is
Telefoons verschillen in hoogte, en fabrikanten rekenen bovendien met een andere pixeldichtheid. Wat een toestel als 800 pixels ziet, is op een ander 740.
Daar komt bij dat een deel van je bezoekers de tekstgrootte heeft vergroot. Dan past er nog minder in datzelfde scherm.
De adresbalk telt mee
Bij het laden van een pagina is de adresbalk volledig zichtbaar en die neemt zomaar honderd pixels in beslag. Pas als iemand scrollt, schuift hij weg.
Precies op het moment dat je eerste indruk telt, heb je dus de mínste ruimte. Meer over dat zichtbare gebied lees je bij viewport.
Waar je mee rekent
Ik houd 600 pixels aan als werkbare ondergrens, inclusief je menubalk. Past je kop, je tussenzin en je knop daarbinnen, dan zit je op vrijwel elk toestel goed.
Neem je menubalk daar echt in mee. Een balk van 80 pixels laat er dan nog 520 over, en dat gaat sneller op dan je denkt.
Mijn vuistregels
- Reken met 600 pixels, inclusief je menubalk.
- Ontwerp eerst voor de kleinste telefoon en schaal daarna op.
- Laat aan de onderkant iets half zichtbaar, als hint dat er meer volgt.
- Test op een echt toestel en niet alleen in de weergavemodus van je browser.
Die laatste is belangrijker dan hij lijkt. De weergavemodus houdt geen rekening met de adresbalk, dus daar past altijd net iets meer in.
Hoe je het zelf meet
Open je site op je telefoon en maak een schermafbeelding zonder te scrollen. Dat is letterlijk je eerste scherm.
Leg die afbeelding naast je ontwerp en kijk wat er is afgevallen. Meestal is dat precies je knop.
Wat dat betekent voor je ontwerp
Kortere koppen, minder witruimte boven je kop, en een menubalk die niet onnodig hoog is. Dat zijn de drie plekken waar je ruimte wint.
Bouw je met verschillende schermbreedtes in gedachten, dan kun je dit per formaat regelen. Meer daarover lees je bij breakpoint.