Krantenredacteuren wisten het al lang voordat het web bestond. Het verhaal dat gelezen moet worden, komt boven de fysieke vouw. Alles eronder moet opboksen tegen de keuze om door te bladeren. Op een website geldt hetzelfde principe voor het eerste scherm dat een bezoeker ziet voordat hij scrolt.
Above the fold is het deel van een webpagina dat zichtbaar is in het browservenster als de pagina voor het eerst laadt, voordat de bezoeker ook maar heeft gescrold. Het is het enige deel van de pagina dat elke bezoeker ziet. Alles daaronder moet het scrollen waard zijn. De term komt uit de krantenwereld: een dubbelgevouwen krant in het schap toont alleen de bovenste helft van de voorpagina. Die bovenste helft moest de aandacht trekken. Het above the fold-gedeelte van een website werkt net zo.
Wat er above the fold staat, hangt af van het apparaat, het schermformaat en de browser van elke bezoeker. Een grote desktopmonitor toont veel meer content above the fold dan een telefoon die rechtop wordt gehouden. Ontwerpen voor de vouw betekent dus denken aan al die schermen, niet alleen aan de versie op je eigen scherm.
Waarom is content above the fold belangrijk?
Onderzoek naar leesgedrag laat steeds zien dat bezoekers meer tijd besteden aan content bovenaan een pagina. Hoe verder naar beneden content staat, hoe minder bezoekers het bereiken. Dat is geen gebrek aan aandacht, maar een logische reactie op beperkte tijd. Bezoekers beoordelen razendsnel of een pagina het lezen waard is, en dat oordeel vormen ze in het eerste zichtbare stuk.
Above the fold beantwoord je de eerste vraag van de bezoeker: zit ik hier goed? Als de kop, de afbeelding en de eerste regels tekst dat duidelijk maken, scrollen bezoekers verder. Als ze in de war zijn of twijfelen, geven de meesten de rest van de pagina geen kans.
Wat zet je above the fold?
Above the fold is weinig ruimte met veel op het spel. Elk element dat daar staat, moet zijn plek verdienen door de bezoeker te helpen of het doel van de pagina dichterbij te brengen.
Een duidelijke kop die zegt waar de pagina over gaat of wat de bezoeker eraan heeft. Een ondersteunende zin of subkop die context of detail toevoegt. Een beeld dat de boodschap versterkt in plaats van alleen te versieren. Een call-to-action die de bezoeker een duidelijke volgende stap geeft als hij al overtuigd is.
Navigatie hoort above the fold. Bezoekers verwachten bovenaan de pagina een manier te vinden om de rest van de site te verkennen, en een verstopt of verborgen menu zorgt meteen voor frictie. Het artikel over wat websitenavigatie is laat zien hoe je menu's ontwerpt die op alle apparaten goed werken.
Wat er niet hoort te staan, is alles wat ruimte inneemt zonder bij te dragen aan het begrip of de beslissing van de bezoeker. Grote decoratieve afbeeldingen zonder informatiewaarde, roterende banners die het laden vertragen of blokken inleidende tekst waar de bezoeker doorheen moet scrollen voordat hij bij de kern komt: het verspilt allemaal de waardevolste plek op de pagina.
Hoe verschilt above the fold op mobiel?
Op mobiel is het above the fold-gedeelte een stuk kleiner dan op desktop. Een telefoonscherm in staande stand toont ongeveer 600 tot 800 pixels hoogte. Een desktopmonitor toont misschien 900 tot 1200 pixels. Hetzelfde ontwerp kan op desktop twee of drie secties above the fold laten zien, terwijl op mobiel alleen een kop en een afbeelding zichtbaar zijn.
Het gevolg is dat mobiele bezoekers hun keuze om te blijven of te scrollen maken met veel minder informatie dan desktopbezoekers in één oogopslag zien. Wat het belangrijkste is, moet in een kleiner venster passen. Hero-secties met grote achtergrondafbeeldingen en weinig tekst zijn een bekend probleem: ze zien er op desktop indrukwekkend uit, maar vullen op mobiel het hele scherm met weinig content voordat de bezoeker moet scrollen.
Test above the fold op een echte telefoon, want browserpreviews en desktopsimulaties geven niet precies weer wat mobiele bezoekers zien. Een volledige checklist voor mobiel vind je in het artikel over hoe je een website mobielvriendelijk maakt.
Beïnvloedt above the fold de laadsnelheid?
Direct. Het above the fold-gedeelte is het eerste wat de browser rendert, dus elk bestand dat de weergave vertraagt, schaadt de gevoelde laadtijd, ook als de rest van de pagina snel laadt.
Grote hero-afbeeldingen, webfonts die moeten laden voordat tekst zichtbaar is en scripts die draaien voordat de pagina wordt opgebouwd: ze duwen allemaal de content above the fold naar beneden. Voor de bezoeker laadt de pagina dan traag, ook als de technische laadtijd redelijk is. Een leeg of half geladen above the fold-gedeelte terwijl de rest van de pagina nog bijkomt, is een van de meest voorkomende oorzaken van een hoog bouncepercentage op verder goed ontworpen pagina's.
De meest effectieve oplossingen zijn de hero-afbeelding optimaliseren, bestanden voor above the fold voorrang geven bij het laden en niet-essentiële scripts uitstellen. Het artikel over wat websitesnelheid is behandelt de technische kant van laadprestaties en wat daar het meeste invloed op heeft.
Beïnvloedt above the fold je SEO?
Content above the fold is een signaal dat zoekmachines gebruiken om de kwaliteit van een pagina te beoordelen. Pagina's die veel reclame of content van lage kwaliteit above the fold zetten en de hoofdcontent naar beneden duwen, worden afgestraft. Dat was een specifieke algoritme-update gericht op sites die nuttige content onder grote advertentieblokken verstopten.
Los van die specifieke straf beïnvloedt above the fold je SEO indirect via gedragssignalen. Bezoekers die op een pagina landen en direct weggaan omdat het above the fold-gedeelte hen geen reden gaf om te blijven, zorgen voor een hoog bouncepercentage en een korte verblijfstijd. Na verloop van tijd laten die signalen zoekmachines weten dat de pagina niet voldeed aan de zoekintentie.
Een goed above the fold-ontwerp ondersteunt ook een betere opbouw van koppen. Een duidelijke kop above the fold, gevolgd door een logische paginastructuur eronder, helpt bezoekers en zoekmachines de pagina snel te begrijpen. Het artikel over wat webdesign is laat zien hoe opmaakkeuzes zoals de hiërarchie van koppen de bezoekerservaring bepalen. Voor het volledige plaatje over zoekresultaten behandelt het artikel over wat SEO is de technische en inhoudelijke factoren die het meest tellen.
Zo regelt WEMASY het above the fold-ontwerp
De templates van de WEMASY Websitebouwer zijn gemaakt met het above the fold-gedeelte in gedachten. Hero-secties zijn geoptimaliseerd voor snel laden en met de visuele editor zie je vóór het publiceren hoe elke sectie op verschillende schermformaten eruitziet. De mobiele preview toont precies wat bezoekers op een telefoon zien voordat ze scrollen, zodat je content en opmaak kunt aanpassen zonder te gokken.
Bekijk wat erbij zit op de WEMASY Websitebouwer of vergelijk de abonnementen op de prijspagina.
Veelgestelde vragen
Is above the fold nog relevant bij modern scrollgedrag?
Ja. Bezoekers scrollen gemakkelijker dan tien jaar geleden, maar het above the fold-gedeelte weegt nog steeds onevenredig zwaar. Bezoekers besteden meer tijd aan content bovenaan een pagina, hoeveel ze ook scrollen. Above the fold valt de beslissing om te blijven of weg te gaan. Het duidelijk, snel en aantrekkelijk maken is nu net zo belangrijk als altijd. Met de Websitebouwer van WEMASY stel je dit direct in op je website.
Hoe hoog moet een hero-sectie zijn?
Een hero-sectie moet genoeg content above the fold tonen om het doel van de pagina over te brengen, zonder het hele scherm in te nemen. Op desktop kan een hero die de volle schermhoogte vult met alleen een kop en een afbeelding indrukwekkend zijn, maar het vertraagt ook de toegang tot de echte content. Beter is een hero die hoog genoeg is voor een sterke eerste indruk en toch een stukje content eronder laat zien, als teken dat er meer te zien is als je scrolt.
Wat is een call-to-action above the fold?
Een call-to-action above the fold is een knop of link in het eerste zichtbare deel van een pagina, waarmee bezoekers die al overtuigd zijn direct kunnen handelen zonder te scrollen. Bekende voorbeelden zijn "Aan de slag", "Plan een gesprek" of "Bekijk de prijzen". Niet elke bezoeker is above the fold al klaar om te handelen, daarom bestaat de rest van de pagina, maar een duidelijke actie die meteen beschikbaar is, haalt frictie weg voor wie dat wel is.
Heeft elke pagina een sterk above the fold-gedeelte nodig?
Ja, maar wat "sterk" betekent, verschilt per paginatype. Op een homepage moet above the fold duidelijk worden wie je bent en wat je aanbiedt. Op een blogartikel moet de lezer bevestigd krijgen dat hij op het juiste artikel zit en een reden krijgen om door te lezen. Op een productpagina moet het product duidelijk zichtbaar zijn en de prijs makkelijk te vinden. Het principe is bij alle paginatypen hetzelfde: het eerste scherm moet de meest directe vraag van de bezoeker beantwoorden.
Hoe test ik wat er op verschillende apparaten above the fold staat?
Het nauwkeurigst is je eigen pagina's op echte apparaten bekijken. Gebruik een desktopmonitor, een tablet en een telefoon, zowel rechtop als liggend. De ontwikkelaarstools van je browser hebben een apparaatsimulatie die een redelijke benadering geeft, maar die houdt geen rekening met werkbalken, adresbalken en meldingsgebieden die op echte telefoons de zichtbare schermhoogte verkleinen. Wat er in een browserpreview goed uitziet, heeft op een echt apparaat vaak een merkbaar andere afsnijding.