Wat zet je boven the fold?

Fold betekent vouw. Zoals bij een gevouwen krant waarbij de koppen die het meest aantrekkelijk zijn boven de vouw staan. Doe je dat niet, dan wordt je krant minder goed verkocht.

Bij een website is het gedeelte boven de fold het gedeelte dat je direct ziet zonder te scrollen.

Afhankelijk van het apparaat waarmee je een website bezoekt en de resolutie die daarop ingesteld staat ziet iedereen een ander gedeelte van je website.

In principe ontstaan er daardoor oneindig veel folds en kun je niet met elke combinatie rekening houden. Maar je kunt wel een gemiddelde fold bepalen per smartphone, tablet en desktop en hiervoor optimaliseren.

Niet alles moet boven de ‘fold’!

Helaas wordt het ‘above the fold’-principe soms verkeerd geïnterpreteerd en gaat men ervan uit dat alles wat belangrijk is boven de fold moet staan, maar dat is niet zo.

"Users don’t scroll for fun. They scroll for a purpose. So if talking about the fold puts the focus on what’s first on the page, let’s continue the conversation."

NN Group - The Fold Manifesto: Why the Page Fold Still Matters

Net als bij de krant is het niet nodig om alle ‘belangrijke’ elementen of content boven de vouw te plaatsen. Dat zou simpelweg niet passen. En het is ook niet zo dat mensen alleen de bovenkant van een krant lezen.

Het gedeelte boven de fold is er voornamelijk voor om je lezers in te lichten over de content die gaat komen en ze te verleiden door te lezen.

Prop je deze vol met zoveel mogelijk content, plaatjes en buttons, dan kan de bezoeker niet bepalen of de pagina het waard is om verder te lezen en haakt hij af.

Anders dan bij een krant hoef je niet op te vallen. Een gekke titel of kop werkt daarom minder goed bij een website. Iemand komt op je pagina met een bepaald doel of probleem en het is zaak zo snel mogelijk duidelijk te maken dat je de juiste informatie hebt of een oplossing biedt voor de bezoeker.

Uit onderzoek blijkt dat 94% van je bezoekers bepalen of ze je pagina gaan lezen op basis van hoe deze er uitziet. 6% bepaalt dit op basis van wat ze lezen. Wil je hier meer over weten, lees dan ook: Zorgt een goed webdesign voor betere SEO?

Maar wat zet je wel boven de ‘fold’?

Er is dus een fold en het is belangrijk de ruimte boven de fold nuttig te gebruiken. Er moeten daarom keuzes gemaakt worden. Een goed beginpunt is de smartphone. Deze bezit de minste ruimte. Lukt het je om de ruimte boven de fold hiervoor te optimaliseren, dan lukt het zeker ook op de tablet en desktop.

Binnen de webdesignwereld noemt men dit ‘designing for mobile first’. Hierbij gaat men ervan uit dat als je een webdesign ontwerpt voor een smartphone, je automatisch alle ruis (elementen die niet essentieel zijn) verwijdert en daardoor een beter webdesign creëert.

Er zijn geen vaste regels voor wat je boven de fold plaatst. Een zoekfunctie kan voor jouw doelgroep ontzettend belangrijk zijn, terwijl dit bij een andere website nooit gebruikt wordt.

Hetzelfde geldt voor een link richting een klantenportal, een slogan, een rating of een taalkeuze.

Per geval zul je moeten bepalen of een element ervoor zorgt dat je bezoekers verder gaan lezen.

Praktische tips voor de meest waardevolle ruimte van je website

Alles boven de fold zou ervoor moeten zorgen dat je pagina overkomt als betrouwbaar, informatief en dat deze voordelen biedt voor de bezoeker.

Op die manier overtuig je de bezoeker om verder te lezen. Dit zijn enkele tips om dat voor elkaar te krijgen:

• Creëer een rustig en overzichtelijk webdesign. De kleuren zijn hierin bepalend maar ook het gebruik van stijlelementen. Less is meestal more.
• Gebruik duidelijke en leesbare koppen. Zorg voor genoeg contrast en maak het fonttype groot genoeg.
• Besteed veel tijd aan je titel. Maak je titel concreet en richt je op het voordeel voor de bezoeker.
• Wat maakt jou uniek? De zogenaamde USPs (unique selling propositions). Belangrijk is dat deze verschillen van die van je concurrenten, anders zijn ze immers niet uniek.
• Social proof. Denk aan een rating of een quote van een klant. Je kunt zelf zeggen dat je erg goed bent, maar het werkt nog beter als iemand anders dat zegt.

Heb je vragen over wat je wel en niet boven de fold moet plaatsen? Ik beantwoord ze graag hieronder in het reactiegedeelte.

Welke elementen horen boven de fold?

Er is geen universele lijst, maar in de praktijk zie je bij goed presterende websites steeds dezelfde elementen terugkomen boven de fold. De specifieke invulling verschilt per type website en doelgroep, maar de logica is altijd hetzelfde: zorg dat de bezoeker in één oogopslag begrijpt wat je aanbiedt en waarom het relevant is.

• Logo en navigatie. Geeft direct context over wie je bent en wat de bezoeker verder kan verkennen.
• Een heldere H1-kop. Beschrijft wat de pagina biedt, afgestemd op wat de bezoeker zoekt.
• Een korte subkop of introductiezin. Zet de belofte concreet neer en beantwoordt de impliciete vraag van de bezoeker.
• Een primaire call to action. Één duidelijke actie die je wilt dat de bezoeker neemt, niet drie knoppen naast elkaar.
• Een relevante afbeelding of video. Ondersteunt de boodschap en geeft de pagina visuele houvast.
• Social proof. Klantlogos, beoordelingen of een korte quote die vertrouwen opbouwen.

Op een homepage passen al deze elementen doorgaans goed samen. Op een landingspagina of productpagina wil je het strakker houden: minder afleiding, meer focus op die ene actie. Bij een blogpagina draait het boven de fold om de koptekst, auteur en publicatiedatum, zodat de lezer meteen weet of het artikel relevant is.

Above the fold en de impact op SEO

Google let al jaren op wat er boven de fold staat. Pagina's die boven de fold overladen zijn met advertenties of weinig relevante content kregen in het verleden al een penalty via het zogenaamde Page Layout Algorithm. Maar ook los van straffen geldt: een slechte above-the-fold-ervaring leidt tot hogere bouncepercentages en kortere sessieduur, twee signalen die Google meeneemt bij het bepalen van je ranking.

Wil je weten hoe webdesign en vindbaarheid samenhangen? Lees dan ook hoe een goed webdesign bijdraagt aan betere SEO of bekijk welke 15 elementen elke website nodig heeft.

Een goede above-the-fold-sectie is ook een kwestie van laadsnelheid. De Largest Contentful Paint (LCP) in Google's Core Web Vitals meet hoe snel het grootste element boven de fold zichtbaar is. Laadt je hero-afbeelding of kopregel traag? Dan scoort je pagina slechter, ook al is de rest goed opgezet. Houd afbeeldingen licht, zorg dat lettertypen snel laden en controleer of de HTML goed gestructureerd is.

Veelgestelde vragen over above the fold

Wat is het verschil tussen above the fold en below the fold?

Above the fold is het gedeelte van je pagina dat direct zichtbaar is zonder te scrollen. Below the fold is alles wat pas verschijnt als de bezoeker naar beneden scrolt. De grens (de fold) verschilt per apparaat en schermresolutie, waardoor er technisch gezien geen vaste fold bestaat.

Hoe hoog is de fold gemiddeld op een smartphone?

Op een gemiddelde smartphone zie je de eerste 500 tot 600 pixels zonder te scrollen. Op een desktop is dat 600 tot 900 pixels, afhankelijk van de schermresolutie en de browsergrootte. Omdat mobiel inmiddels het grootste deel van het websiteverkeer vertegenwoordigt, is het verstandig om de fold te optimaliseren voor een scherm van 360 tot 390 pixels breed.

Moet ik een call to action boven de fold plaatsen?

Dat hangt af van de pagina en het doel. Op een landingspagina is een prominente call to action boven de fold vaak slim, omdat de bezoeker al weet wat hij zoekt. Op een informatieve blogpagina werkt een directe CTA boven de fold juist storend. Zorg altijd dat de CTA logisch aansluit op de belofte die je boven de fold maakt.

Is above the fold nog relevant nu mensen gewend zijn te scrollen?

Ja, zeker. Onderzoek van de Nielsen Norman Group laat zien dat inhoud boven de fold gemiddeld 57% meer aandacht krijgt dan inhoud eronder. Mensen scrollen wel, maar alleen als de eerste indruk goed genoeg is. De fold bepaalt of iemand überhaupt de moeite neemt om naar beneden te gaan.

Hoe test ik wat boven de fold het beste werkt?

A/B-testen is de meest betrouwbare methode. Je maakt twee versies van je pagina met een ander element of andere volgorde boven de fold en meet welke versie meer conversies oplevert. Heatmapping-tools laten zien waar bezoekers klikken en hoe ver ze scrollen, zodat je precies ziet welke elementen aandacht trekken.

Welke rol speelt mobile first bij de fold?

Mobile first betekent dat je eerst ontwerpt voor het kleinste scherm. Zo dwing je jezelf keuzes te maken over wat echt boven de fold past. De elementen die het op een smartphone redden, werken bijna altijd ook goed op een groter scherm. Meer weten over webdesign en conversie? Bekijk ook hoe Emble Drupal-webdesign aanpakt of lees meer over de kenmerken van een succesvolle website.

Vergelijking: wat hoort wel en niet boven the fold

Je hebt boven de fold maar een paar seconden om duidelijk te maken waar je bezoeker terecht is gekomen en waarom het de moeite waard is om te blijven. Deze vergelijking helpt je kiezen welke elementen die ruimte verdienen en welke je gerust lager kunt zetten.

Wel boven de fold

• Een heldere titel die meteen vertelt wat je organisatie biedt, in maximaal tien woorden.
• Een subtitel of kernzin die de doelgroep en de belofte concreet maakt.
• De primaire call-to-action, bijvoorbeeld "Vraag demo aan", "Bekijk cases" of "Plan kennismaking".
• Een visueel anker: productbeeld, klantenfoto, platformscreenshot of korte videoloop.
• Een vertrouwenssignaal, bijvoorbeeld een klantlogo, Google-score of persvermelding.

Niet boven de fold

• Een uitgebreide uitleg van je geschiedenis of missie. Die hoort op de over ons pagina.
• De hele productcatalogus. Toon de hoofdcategorie en laat de rest onder de fold volgen.
• Lange testimonials of reviews. Een korte quote of cijfer werkt boven de fold, het verhaal lager.
• Vier verschillende CTAs naast elkaar. Dat verwatert de focus. Eén primaire en hooguit één secundaire.
• Uitklapbare cookie- of pop-up-lagen die de fold overnemen. Dat kost bezoekers en Core Web Vitals.

Twijfel je of een element echt boven de fold hoort? Loop dan het stappenplan voor de perfecte over ons pagina door. De principes daar gelden ook voor je homepage.

Zo test je of jouw boven-the-fold werkt

Je kunt eindeloos discussiëren over welke tekst en welk beeld het beste werkt. Meten is sneller. Met een paar tools die je in een middag opzet, zie je binnen een week of twee wat bezoekers echt doen.

Scroll- en heatmaps via Hotjar of PostHog

Scrollmaps laten zien hoe ver bezoekers komen. Zie je dat 60 procent al afhaakt voor de fold, dan weet je dat je titel of visueel niet pakt. Hotjar werkt goed voor kleinere websites en PostHog is handig als je open source wilt blijven. Meer over de tool lees je in onze review van Hotjar.

A/B-testen met twee varianten van je hero

Zet twee versies van je boven-the-fold live, een per helft van je verkeer. Laat ze minimaal twee weken draaien zodat je weekend-, werkweek- en campagneverkeer meepakt. Meet niet alleen clicks op de CTA, maar ook of bezoekers doorgaan naar de tweede pagina en of ze converteren.

Mobile first meten

Op mobiel is de fold drastisch kleiner dan op desktop. Kijk in Google Analytics of Matomo naar mobiele scrolldiepte apart van desktop. Wat boven de fold zit op een MacBook hoort op een iPhone soms al onder het zichtbare gedeelte. Ontwerp de mobiele variant als eerste en kijk of de boodschap daar al landt.

Core Web Vitals checken

Elementen boven de fold wegen zwaarder in Largest Contentful Paint en Interaction to Next Paint. Een gigantische hero-video is zichtbaar mooi maar kan je LCP-score halveren. Check na elke aanpassing PageSpeed Insights en Search Console Core Web Vitals zodat SEO meegroeit met de conversie.

Veelgemaakte fouten boven the fold

• De titel vertelt wat je organisatie doet maar niet voor wie. Voeg de doelgroep toe.
• De CTA is vaag ("Meer weten") in plaats van concreet ("Plan demo van 20 minuten").
• Het hero-beeld is een stockfoto zonder relatie met wat je verkoopt. Gebruik liever een productscreenshot of klantfoto.
• De fold is zo vol dat er geen witruimte overblijft. Laat elementen ademen, bezoekers lezen dan ook echt.
• Een cookie-banner dekt de fold af. Los dit op met een kleinere banner onderaan of met een dialog die niet het hele scherm vult.

Wil je dit samen met ons oppakken? We doen dit soort herzieningen regelmatig als onderdeel van onze Drupal webdesign trajecten en kijken dan naar de homepage, de landingspagina's en de productpagina's als één geheel.

Deel dit artikel