Above the fold: het eerste scherm dat alles bepaalt
Veel websites vertellen pas na twee keer scrollen wat het bedrijf eigenlijk doet. Bovenin staat een groot logo. Daaronder een sfeerfoto zonder één woord uitleg. De bezoeker moet zelf maar raden of hij goed zit. Dat kost je elke dag klanten, zonder dat je het merkt.
Dat probleem heeft een naam. Het eerste scherm van je website doet zijn werk niet. In vakjargon heet dat gebied above the fold. Ik kom het bij bijna elke bestaande site tegen.
Een installatiebedrijf uit Hoorn belde mij hierover. Zijn site kreeg ruim duizend bezoekers per maand. Toch kwamen er nauwelijks aanvragen binnen. Samen keken we op zijn telefoon naar de homepage. Het eerste scherm toonde alleen een logo en een foto van een bus.
Ik heb dat scherm teruggebracht tot vier onderdelen. Een kop die zijn werkgebied benoemt. Een zin over storingsdienst binnen 24 uur. Een knop naar het aanvraagformulier. En zijn Google-beoordeling als bewijs. Twee maanden later waren zijn aanvragen bijna verdubbeld. Aan zijn dienst was niets veranderd.
Het eerste scherm bepaalt of een bezoeker blijft of wegklikt.
Wat is above the fold?
Above the fold is alles wat een bezoeker ziet zonder te scrollen. Het is dus letterlijk het eerste scherm van je pagina. Alles daaronder heet below the fold. Die grens verschuift per apparaat en per schermgrootte. Op een laptop zie je nu eenmaal meer dan op een telefoon. Daarom praat ik liever over het eerste scherm dan over een vaste hoogte.
Waar komt de term vandaan?
De term komt uit de krantenwereld. Een krant lag opgevouwen in het schap van de kiosk. Alleen de bovenste helft was zichtbaar voor de koper. Daar zette de redactie dus het belangrijkste nieuws neer. Online werkt het precies hetzelfde. Je bovenste helft bepaalt of iemand blijft hangen.
Hoe hoog is die vouw eigenlijk?
Een vaste hoogte in pixels bestaat niet. Ik reken meestal met ongeveer 650 pixels voor een telefoon. Op desktop houd ik zo’n 750 pixels aan. Wil je het exact weten, kijk dan naar je eigen bezoekersdata. Daarin zie je welke schermformaten bij jou het meest voorkomen. Lees ook mijn uitleg over viewport en breakpoint.
Waarom above the fold zoveel invloed heeft
Bezoekers beslissen razendsnel of ze blijven of weggaan. Onderzoek naar webgedrag laat steeds hetzelfde beeld zien. Binnen enkele seconden vormt iemand een oordeel over je site. Klopt dat oordeel niet, dan is de bezoeker weer weg. Je bounce rate loopt dan hard op.
Mobiel is inmiddels de norm
Bij de meeste van mijn klanten draait alles om de mobiele website. Op een telefoon is het eerste scherm klein. Elke regel tekst telt daar dubbel zo zwaar. Ik ontwerp daarom altijd volgens mobile first. Eerst het kleine scherm, daarna pas de grotere formaten.
Snelheid hoort er onlosmakelijk bij
Een mooi eerste scherm helpt niets als het traag laadt. Google kijkt mee naar de laadtijd van je website en de visuele stabiliteit. Houd je afbeeldingen licht en je code schoon. Ook je webhosting speelt hierin een grote rol. Meer daarover lees je bij pagespeed.
Wat zet je above the fold?
Ik hanteer hierin een heel simpele regel. Een bezoeker moet drie vragen beantwoord zien. Wat is dit? Wat heb ik eraan? Wat moet ik nu doen? Lukt dat binnen één scherm, dan staat het goed.
Checklist voor jouw eerste scherm
Een duidelijke kop die je aanbod letterlijk benoemt.
Één korte zin met het voordeel voor de klant.
Één primaire call-to-action knop naar je aanbod. Zie ook call-to-action.
Een beeld dat het verhaal echt ondersteunt.
Zichtbaar bewijs, zoals een beoordeling of een klantlogo.
Veelgemaakte fouten die ik tegenkom
Alles tegelijk willen tonen
Veel ondernemers proppen hun hele aanbod in dat eerste scherm. Het resultaat is een muur van tekst en knoppen. Niemand leest zoiets. Kies één boodschap en één actie.
Een slider als opening gebruiken
Sliders zien er leuk uit in een ontwerppresentatie. In de praktijk klikt bijna niemand op de tweede slide. Bovendien vertragen ze je pagina flink. Ik kies liever één sterke hero sectie. Meer daarover lees je bij hero.
Denken dat niemand scrollt
Dat is een hardnekkig misverstand uit oude vakliteratuur. Mensen scrollen prima, mits ze een reden krijgen. Above the fold moet die reden geven. Het is een startpunt, geen samenvatting van je hele site.
Zo test ik het eerste scherm
Ik vertrouw hierbij niet op onderbuikgevoel. Een eerste scherm test ik met echte bezoekers. Met A/B-testen zet ik twee versies naast elkaar. Een heatmap laat zien waar mensen kijken en klikken. Daarna pas ik aan en meet ik opnieuw. Zo kun je stap voor stap je conversie verhogen. De conversie groeit dan zichtbaar mee.
Mijn conclusie
Above the fold is geen ontwerptruc en geen modewoord. Het is de plek waar je belofte staat. Houd hem kort, eerlijk en concreet. De rest van je pagina mag het verhaal daarna afmaken. Twijfel je of jouw eerste scherm werkt? Leg hem naast de checklist hierboven en wees streng.
Meer vragen over Above the fold
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is above the fold op een website?
Wat hoort er above the fold op je homepage?
Hoe hoog is above the fold op een telefoon?
Hoe optimaliseer je above the fold voor meer aanvragen?
Waarom haken bezoekers af op het eerste scherm?
Hoe test je of je eerste scherm werkt?
Moet mijn contactformulier above the fold staan?
Niet rechtstreeks. Google heeft nooit gezegd dat je eerste scherm meetelt als losse factor. Toch heeft het wel degelijk invloed op je positie. Dat loopt via een omweg, en die omweg is belangrijk.
Google meet namelijk hoe bezoekers zich gedragen. Klikken mensen terug naar de zoekresultaten? Dan is dat een signaal. Blijven ze juist doorklikken op je site? Ook dat is een signaal. Je eerste scherm bepaalt die keuze binnen enkele seconden.
Daarnaast telt de laadtijd van dat eerste scherm wel direct mee. Google kijkt naar hoe snel het grootste element in beeld staat. Een zware afbeelding of een slider vertraagt dat flink. Meer daarover lees je bij pagespeed.
Mijn advies is simpel. Optimaliseer je eerste scherm voor mensen, niet voor Google. De zoekmachine volgt vanzelf. Andersom werkt het zelden.
Kortom: je eerste scherm is geen knop in de zoekmachine. Het is wel de plek waar je bezoeker beslist. En die beslissing telt uiteindelijk gewoon mee.
Is above the fold een rankingfactor in Google?
Meestal niet. Ik zet liever een knop naar het formulier bovenin. Een formulier vraagt namelijk direct om inspanning van je bezoeker. Die bezoeker weet op dat moment vaak nog niet of hij goed zit. Eerst overtuigen, dan pas vragen. Dat werkt in bijna elke branche beter.
Er is één uitzondering die ik regelmatig maak. Bij een landingspagina uit een advertentie is de intentie al hoog. Iemand klikte bewust op jouw specifieke aanbod. Dan mag een kort formulier direct in beeld staan. Houd het wel bij drie of vier velden.
Bij een gewone dienstenpagina kies ik vrijwel altijd voor een knop. Die knop springt naar het formulier onderaan de pagina. Zo blijft je eerste scherm rustig en leesbaar. Wil je weten wat er wel bovenin hoort? Lees dan mijn uitleg over de hero sectie. Twijfel je nog? Zet dan gewoon twee varianten naast elkaar en meet het verschil.
Meet het daarna wel. Kijk hoeveel bezoekers op die knop klikken. Blijft dat onder de twee procent, dan is je aanbod nog niet duidelijk genoeg.
Hoe hoog is above the fold op een telefoon?
Er bestaat geen vaste hoogte. Dat is de eerlijke maar onbevredigende antwoord. Elk toestel heeft een ander scherm en elke browser een andere balk.
Ik werk daarom met een vuistregel. Op een telefoon reken ik met ongeveer 650 pixels beschikbare hoogte. Op een tablet houd ik zo’n 900 pixels aan. Op desktop ongeveer 750 pixels, want daar hoort een browserbalk bij.
Belangrijker dan die getallen is je eigen data. In je statistiekenpakket zie je welke schermformaten bezoekers gebruiken. Neem het formaat dat het meest voorkomt als uitgangspunt. Bij mijn klanten is dat vrijwel altijd een telefoon.
Houd er ook rekening mee dat de adresbalk verdwijnt bij scrollen. Je zichtbare gebied groeit dus tijdens het bezoek. Ontwerp voor het kleinste moment, dus het moment van aankomst. Meer over schermmaten lees je bij viewport.
Test het altijd op een echt toestel. Een simulatie in je browser komt aardig in de buurt. Toch mis je daarmee de adresbalk en het echte gevoel.
Geldt above the fold ook voor een webshop?
Zeker, en daar is de winst vaak nog groter. Op een productpagina beslist iemand binnen seconden of hij verder kijkt. Ontbreekt de prijs, dan haakt een deel meteen af.
Ik zorg dat vier dingen altijd bovenin staan. De productfoto, de naam, de prijs en de bestelknop. Daarnaast noem ik de levertijd of de verzendkosten. Juist die twee zorgen achteraf voor afgebroken bestellingen.
Op een categoriepagina werkt het net iets anders. Daar moet de bezoeker direct zien dat hij in de juiste categorie is. Een korte introtekst en zichtbare filters doen dat werk. Verstop je filters niet achter een knop op mobiel.
Voor een webwinkel geldt bovendien dat vertrouwen zwaar telt. Zet een keurmerk of beoordeling in beeld. Twijfel is nu eenmaal de grootste kostenpost in e-commerce.
Zet ook je retourbeleid kort in beeld. Een zin over dertig dagen bedenktijd neemt veel twijfel weg. Dat kost nauwelijks ruimte en levert direct vertrouwen op.
Kan ik above the fold zelf aanpassen in WordPress?
Vaak wel, mits je site netjes is opgebouwd. Werk je met een paginabouwer, dan pas je koppen en knoppen zelf aan. Sleep het blok, wijzig de tekst en sla op. Dat is precies waarom ik met deze techniek werk.
Soms zit het eerste scherm vast in het thema. Denk aan een hero die het thema zelf oplegt. Dan kun je alleen de tekst wijzigen, niet de opbouw. In dat geval is er maatwerk nodig.
Een valkuil zie ik regelmatig terugkomen. Mensen slepen er van alles bij en het eerste scherm groeit. Voor je het weet staat er weer een muur van tekst. Houd jezelf aan één boodschap en één knop.
Weet je niet zeker of jouw opzet het toelaat? Kijk dan eerst naar de basis van WordPress en je thema. Daarna weet je wat er zonder code mogelijk is.
Begin klein bij zo’n verbouwing. Wijzig eerst alleen je kop en meet een maand. Werkt dat, ga dan pas aan de rest sleutelen.
Nog steeds twijfel over jouw eerste scherm? Stuur me de link van je homepage via het formulier hieronder. Ik kijk er kosteloos naar en geef je drie concrete verbeterpunten. Geen verkooppraatje, gewoon een eerlijk oordeel. Vermeld je plaats, dan weet ik meteen of ik bij je in de buurt zit.
Waar kan ik je mee helpen?
Ook bekend als: Boven de vouw, eerste scherm, first screen
