Above the fold website: wat je nú moet doen

Above the fold is alles wat een bezoeker ziet zonder te scrollen: de eerste viewport van je pagina. Geen vaste pixelmaat, maar het deel van je scherm dat direct in beeld verschijnt zodra iemand jouw website opent. Dat eerste beeld beslist of een bezoeker verder leest of wegklikt.

Er zijn drie dingen die je vandaag nog kunt controleren. Open je website op je telefoon en kijk wat je ziet zonder te scrollen: staat daar een heldere headline die zegt wat je doet? Is er één duidelijke actieknop zichtbaar, niet verstopt onder een foto of slogan? En oogt het geheel rustig, of moet de bezoeker al zoekend door tekst en beeld?

Vergeet de oude vuistregel van 600 pixels. Die stamt uit een tijd van vaste schermformaten en zegt niks meer nu iedereen op een ander toestel kijkt. Een iPhone toont een andere fold dan een breedbeeldmonitor, en zelfs binnen mobiel verschilt het per merk en instelling.

• Doe de mobiele quick check: open je site op je telefoon en beoordeel wat zichtbaar is zonder scrollen.
• Controleer of je headline in één oogopslag duidelijk maakt wat je aanbiedt.
• Zorg dat er precies één primaire actieknop zichtbaar is, geen concurrerende opties.

Belangrijkste inzichten

Een effectieve above the fold website verdient de scroll met vijf elementen: heldere headline, subhead, één CTA, bewijzende visual en een trust-anker, mobiel-first getest.

Punt	Details
Geen vaste pixelmaat	De fold verschilt per apparaat; test op echte telefoons en laptops, niet op één vaste breedte.
Vijf elementen boven de fold	Headline, subhead, één CTA, bewijzende visual en een trust-anker werken samen als geheel.
CTA-plaatsing hangt af van paginatype	Landingspagina’s tonen de CTA direct; contentpagina’s herhalen hem verderop in de tekst.
Meet in plaats van aannemen	Gebruik heatmaps, sessierecordings en A/B-testen om te zien wat bezoekers echt doen.
Zazoutotaal bouwt volgens StoryBrand	Het bureau vertaalt je kernboodschap eerst naar heldere copy, dan pas naar design en mobiele tests.

Wat betekent above the fold website precies?

De term komt oorspronkelijk uit de krantenwereld. Kranten werden opgevouwen op de stapel gelegd, en de kop die boven die vouw stond, moest de lezer overtuigen om de krant te kopen. Dat principe heette letterlijk “boven de vouw”. Toen websites in de jaren negentig hun intrede deden, namen ontwerpers het begrip over: het scherm werd de nieuwe vouw, en alles wat je zag voordat je scrolde, was above the fold.

In de praktijk betekent dat vandaag iets anders dan twintig jaar geleden. Er bestaat geen vaste hoogte meer die voor elke website geldt. De fold wordt bepaald door de viewport, en die viewport verschilt per apparaat, per schermresolutie en zelfs per browserinstelling. Dat maakt oude ontwerpregels, zoals de eis dat alle belangrijke content binnen 600 pixels moest passen, ronduit misleidend voor moderne responsive layouts.

De meest bruikbare hedendaagse definitie luidt: above the fold is de eerste viewport die een bezoeker ziet, ongeacht apparaat, en die viewport moet in staat zijn de bezoeker te overtuigen door te scrollen. Dat is een fundamenteel andere opgave dan “alles belangrijks er bovenin proppen”. Het gaat om verleiden, niet om volledigheid, zoals ook blijkt uit recente analyses over wat above the fold in 2026 inhoudt.

Waarom is above the fold nog steeds belangrijk?

Ja, above the fold is nog steeds relevant, al is de rol ervan verschoven. Vroeger dacht men dat alles wat onder de fold stond, ongezien bleef. Dat klopt niet meer helemaal, maar het eerste scherm blijft wel het moment waarop bezoekers een relevantiebeslissing nemen: gaat deze pagina over wat ik zoek, of niet?

Onderzoek naar kijkgedrag laat zien dat een aanzienlijk deel van de aandacht van bezoekers, tot ongeveer 57 procent volgens sommige analyses van kijktijd, zich concentreert op het eerste zichtbare scherm. Dat cijfer moet je niet als exacte wet lezen, maar als signaal: de fold is waar de eerste indruk wordt gevormd en waar veel bezoekers besluiten of ze verder scrollen.

Het is dus niet zo dat de fold alles moet bevatten. Het moet genoeg bevatten om de scroll te verdienen. Analyses die de “dood van de fold” tegenspreken, wijzen er terecht op dat bezoekers vaak al boven de vouw beslissen of een pagina de moeite waard is, zoals ook naar voren komt in kritische analyses van dit debat.

Pro-tip: Test niet alleen of mensen scrollen, maar ook hóe snel ze dat doen. Een trage, aarzelende scroll wijst vaak op twijfel; een snelle, directe scroll na een paar seconden duidt op interesse.

Paginatype	Belang van de fold
Landingspagina campagne	Zeer hoog: bezoeker moet direct de match met de advertentie herkennen
Homepage dienstverlener	Hoog: eerste indruk bepaalt vertrouwen en doorklikgedrag
Blogartikel of diepgaande gids	Gemiddeld: lezer accepteert scrollen voor waardevolle content
Interne informatiepagina	Laag: bezoeker zoekt gericht naar specifieke feiten

Bij betaalde campagnes en mobiele bezoekers weegt de fold het zwaarst, simpelweg omdat de aandachtspanne daar het kortst is. Bij een uitgebreide kennisbank of een diepgaand achtergrondartikel is de druk lager: bezoekers die daar terechtkomen, zijn vaak al gemotiveerd om te lezen.

Hoe verandert de fold per apparaat?

Er bestaat niet één fold. Er bestaan er honderden, afhankelijk van schermgrootte, oriëntatie en browser. Een laptop van 13 inch toont een andere hoeveelheid content dan een 27 inch desktopscherm, en een smartphone in portretstand laat weer een compleet andere uitsnede zien dan diezelfde telefoon in liggende stand.

Mobiel-first ontwerpen is daarom geen trend meer, maar een noodzaak. Google indexeert websites primair op basis van de mobiele versie, wat betekent dat de mobiele eerste viewport zwaarder weegt voor vindbaarheid dan de desktopvariant. Dat maakt de mobiele fold, hoe klein ook, het belangrijkste vlak op je hele website.

Mobiele browsers brengen bovendien technische complicaties met zich mee die op desktop niet spelen. De adresbalk van de browser neemt ruimte in, notches op nieuwere telefoons snijden in de zichtbare hoek, en zodra iemand een formulier invult, duwt het toetsenbord de helft van het scherm weg. Wie zijn boven-de-vouw-ontwerp alleen op een simulator test, mist deze problemen vaak volledig; test daarom altijd op fysieke toestellen, zoals ook wordt aanbevolen in praktische richtlijnen over mobiele weergave.

• Test je ontwerp op minimaal drie fysieke apparaten: een kleine telefoon, een tablet en een laptop.
• Houd rekening met de adresbalk die op mobiel tot 15% van de zichtbare hoogte kan innemen.
• Vermijd vaste hoogtes in je CSS; werk met flexibele eenheden die zich aanpassen aan de viewport.
• Controleer hoe je pagina eruitziet zodra het toetsenbord actief is bij een contactformulier.

De vijf elementen die boven de vouw horen

Een sterke eerste viewport bevat vijf onderdelen die samen één boodschap vertellen. Mis je er één, dan wankelt het hele fundament: een prachtige foto zonder duidelijke headline overtuigt niemand, en een sterke tekst zonder bewijs voelt onbetrouwbaar.

De vijf elementen zijn: een heldere headline die in één zin zegt wat je doet, een ondersteunende subhead die de belofte concreter maakt, één primaire actieknop, een visual die je boodschap bewijst in plaats van alleen decoreert, en één herkenbaar vertrouwenselement. Deze combinatie vormt de kern van een effectieve fold, zoals uitgewerkt in praktijkgerichte analyses van boven-de-vouw-elementen.

Element	Voorbeeld van goede invulling
Headline	“Wij bouwen websites die klanten opleveren, niet alleen bezoekers”
Subhead	“Voor zzp’ers en mkb-bedrijven die online eindelijk serieus genomen willen worden”
Primaire CTA	“Plan een gratis kennismaking” als enige knop in de fold
Bewijzende visual	Een screenshot van een echte klantwebsite, geen stockfoto van lachende mensen achter een laptop
Trust-anker	Een Google-beoordeling, logo van een bekende klant, of aantal jaren ervaring

Wat je vooral moet vermijden: te veel elementen die om aandacht strijden. Twee even grote knoppen naast elkaar dwingen de bezoeker tot een keuze die hij niet wilde maken, en het resultaat is vaak dat hij geen van beide aanklikt. Vage slogans zoals “uw partner in digitale groei” zeggen niets concreets en kosten je de eerste seconden aandacht die je juist nodig had.

• Vermijd meerdere gelijkwaardige actieknoppen in hetzelfde zichtveld.
• Schrap decoratieve afbeeldingen die niets bewijzen over je aanbod.
• Vervang vage taal door concrete, herkenbare woorden uit de wereld van je klant.

Moet de call-to-action altijd boven de fold staan?

Niet altijd, en dat is precies waar veel ontwerpers de mist ingaan. Het antwoord hangt af van het paginatype en van waar de bezoeker vandaan komt.

Op een landingspagina voor een betaalde campagne is de bezoeker al warm: hij klikte op een advertentie met een specifieke belofte en verwacht direct een manier om te reageren. Daar hoort de primaire CTA in de fold, zichtbaar zonder scrollen. Op een informatief blogartikel ligt dat anders. De lezer wil eerst begrijpen, overtuigd worden, en pas dan een actie overwegen. Een CTA die daar te vroeg en te opdringerig verschijnt, werkt eerder afstotend dan aantrekkelijk.

Een simpel beslisschema helpt hier verder:

1. Is de pagina een landingspagina met één campagnedoel? Plaats de CTA zichtbaar in de fold.
2. Is de pagina een blog of kennisartikel? Gebruik een korte teaser boven de fold en herhaal de CTA verderop in de tekst.
3. Komt het merendeel van je verkeer via mobiel? Geef de CTA extra prioriteit, want mobiele bezoekers scrollen minder geduldig dan desktopgebruikers.
4. Is de actie complex, zoals een offerte-aanvraag met meerdere stappen? Bouw eerst vertrouwen op voordat je de knop toont.

• Landingspagina’s vragen om directe zichtbaarheid van de actie.
• Contentpagina’s profiteren juist van herhaling verderop in de tekst.
• Mobiele bezoekers verdienen extra prioriteit vanwege hun kortere aandachtsspanne.

Hoe test en meet je wat boven de fold werkt?

Aannames over wat werkt boven de vouw zijn de snelste weg naar een pagina die niet converteert. Data vertelt een ander verhaal dan onderbuikgevoel, en gelukkig zijn er verschillende manieren om dat verhaal boven tafel te krijgen.

Heatmaps tonen precies waar bezoekers klikken, bewegen en scrollen. Sessierecordings laten je individuele bezoekbezoeken terugkijken, inclusief het moment waarop iemand afhaakt. A/B-testen vergelijken twee versies van je fold rechtstreeks tegen elkaar, en viewport-analyse in je analyticspakket laat zien hoeveel procent van je bezoekers daadwerkelijk verder scrollt dan het eerste scherm.

Testmethode	Waar het goed in is
Heatmaps	Visueel inzicht in klikgedrag en aandachtsgebieden
Sessierecordings	Begrijpen waarom iemand precies afhaakt
A/B-testen	Hard bewijs bij het vergelijken van twee headline- of CTA-versies
Scroll-diepte-analyse	Meten hoeveel procent van bezoekers voorbij de fold komt

Bij het testen draait het niet alleen om kliks. Meet ook begripssnelheid: hoe snel snapt een testpersoon wat je aanbiedt? Vraag iemand die je website nog nooit zag binnen vijf seconden te zeggen wat het bedrijf doet. Kan hij dat niet, dan schiet je headline tekort, ongeacht hoe mooi de rest eruitziet.

Test bovendien altijd op echte apparaten naast simulaties in je browser. Een simulator toont zelden hoe een adresbalk of toetsenbord de daadwerkelijke ruimte beïnvloedt, wat leidt tot een vertekend beeld van wat bezoekers echt zien. Combineer dat met technische checks zoals het uitschakelen van lazy loading voor afbeeldingen boven de vouw, zodat je hero-afbeelding meteen laadt in plaats van pas na een vertraging, een aandachtspunt dat ook terugkomt in technische optimalisatiegidsen voor boven-de-vouw-content.

• Gebruik heatmaps om te zien waar aandacht daadwerkelijk naartoe gaat.
• Zet A/B-testen in bij twijfel tussen twee headline- of CTA-varianten.
• Meet scroll-diepte om te bepalen of je fold genoeg overtuigt om door te gaan.
• Test altijd op fysieke telefoons naast een browsersimulator.

Welke fouten ondermijnen je above the fold?

De meest voorkomende fout is simpel: te veel proberen te zeggen in te weinig ruimte. Een fold volgestopt met drie boodschappen, twee knoppen en een carrousel van afbeeldingen verwart in plaats van overtuigt. Bezoekers hebben binnen enkele seconden een oordeel klaar, en verwarring leidt bijna altijd tot vertrek.

Een tweede veelvoorkomende misser is een headline die generiek blijft. Zinnen als “welkom op onze website” of “uw specialist in kwaliteit” zeggen feitelijk niets. Ze beantwoorden niet de vraag die elke bezoeker onbewust stelt: wat kan dit bedrijf voor mij doen? Herformuleer de headline zodat hij concreet het resultaat benoemt dat de klant zoekt.

Een derde fout is een gebrek aan message match tussen advertentie en landingspagina. Klikt iemand op een advertentie over “webdesign voor tandartsenpraktijken” en komt hij op een generieke homepage terecht zonder die specifieke boodschap, dan haakt hij binnen enkele seconden af. De boodschap boven de fold moet de belofte van de bron bevestigen, niet ontkennen.

Sommige optimalisaties werken zelfs averechts. Een derde extra actieknop toevoegen “voor de zekerheid” voegt geen kans toe, maar keuzestress. Meer opties leiden zelden tot meer conversie; ze leiden tot uitstelgedrag.

• Beperk je fold tot één kernboodschap in plaats van meerdere concurrerende boodschappen.
• Vervang generieke headlines door concrete, resultaatgerichte taal.
• Zorg dat de boodschap in de fold aansluit bij de bron waar de bezoeker vandaan komt.
• Voeg geen extra knoppen toe uit voorzichtigheid; kies er één en commit daaraan.

Welke lay-outpatronen werken boven de fold?

Niet elk bedrijf heeft dezelfde fold nodig. Het patroon dat past, hangt af van je doel en je doelgroep.

Een hero met tekst links en een primaire CTA rechts werkt goed voor dienstverleners die snel duidelijkheid willen bieden: de bezoeker leest de belofte en ziet direct de actie ernaast. Een hero met een productscreenshot past bij softwarebedrijven en tools, waar bezoekers willen zien hoe het product er daadwerkelijk uitziet voordat ze verder lezen. Een tekstgedreven hero zonder grote afbeelding werkt vaak sterker voor B2B-leadgeneratie, waar geloofwaardigheid en helderheid zwaarder wegen dan visuele flair. Een storygedreven hero, met een korte openingszin die een probleem benoemt, past goed bij dienstenpagina’s waar vertrouwen opbouwen de eerste stap is.

Patroon	Werkt het best voor
Tekst links, CTA rechts	Dienstverleners die snel duidelijkheid bieden
Hero met productscreenshot	Softwarebedrijven en digitale tools
Tekstgedreven hero	B2B-leadgeneratie en zakelijke dienstverlening
Storygedreven hero	Dienstenpagina’s gericht op vertrouwen opbouwen

Bij het documenteren van je eigen audit is het slim om screenshots te maken van je huidige fold op minstens drie apparaten, en die naast een concurrent of een voorbeeld uit je branche te leggen. Vergelijk niet alleen het uiterlijk, maar ook: staat de headline er even snel, en is de actie even duidelijk?

• Kies het patroon dat past bij je doel: verkoop, leadgeneratie of vertrouwen opbouwen.
• Documenteer je huidige fold met screenshots op minstens drie schermformaten.
• Vergelijk je eigen fold met een sterk voorbeeld uit je eigen branche.

Hoe pakt Zazoutotaal above the fold aan bij StoryBrand-websites?

Bij Zazoutotaal begint elke boven-de-vouw-beslissing niet bij design, maar bij boodschap. Dat is het uitgangspunt van de StoryBrand-methode: eerst helderheid over wie de klant is en wat hij zoekt, dan pas de vormgeving eromheen.

De werkwijze verloopt in vaste stappen. Eerst brengen we de kernboodschap van de ondernemer scherp in kaart: wat lost het bedrijf op, en voor wie? Daarna schrijven we de copy voor de fold, headline en subhead voorop, voordat er ook maar één ontwerpkeuze wordt gemaakt. Pas als de tekst staat, bouwen we de visuele laag eromheen, met een bewijzende afbeelding en een enkele, heldere actieknop. Vervolgens testen we het resultaat grondig op mobiel, omdat het overgrote deel van de bezoekers via een telefoon binnenkomt. Ten slotte volgt iteratie: kleine aanpassingen op basis van daadwerkelijk gedrag, niet op basis van aannames.

• Strategie eerst: de kernboodschap staat vast voordat er wordt ontworpen.
• Copy volgens StoryBrand: headline en subhead schrijven we vóór het design.
• Mobiel testen op echte apparaten, niet alleen in een simulator.
• Iteratie op basis van echt bezoekersgedrag in plaats van onderbuikgevoel.

Ondernemers die twijfelen of hun huidige fold wel werkt, kunnen altijd binnenlopen of contact opnemen voor een vrijblijvend gesprek over wat er beter kan.

Waarom dit onderwerp mij persoonlijk raakt

Wat me telkens weer opvalt, is hoe vaak ondernemers hun eigen website onderschatten als verkoopmiddel. Ze steken uren in een goed gesprek met een potentiële klant, maar laten hun website het werk half doen omdat de eerste indruk vaag of overladen is. Dat is zonde, want die eerste paar seconden doen exact hetzelfde werk als een goed verkoopgesprek: vertrouwen wekken en duidelijkheid geven.

De discussie of de fold nog relevant is, vind ik eigenlijk een verkeerde vraag. De juiste vraag is: verdient jouw eerste scherm de scroll? Dat is een heel andere, veel praktischere opgave dan het najagen van een verouderde pixelregel. Heb je vragen over jouw specifieke situatie, of wil je een concreet voorbeeld bespreken? Neem gerust contact op.

Hulp nodig bij het optimaliseren van jouw eerste scherm?

Veel ondernemers proberen zelf te sleutelen aan hun headline of CTA-knop, maar missen de tijd en het overzicht om het structureel goed te doen.

Wat je kunt verwachten is een praktische aanpak zonder technisch gedoe: eerst brengen we in kaart waar bezoekers nu afhaken, daarna herschrijven we je boodschap en bouwen we een fold die daadwerkelijk overtuigt binnen de eerste seconden. Dat proces loopt hand in hand met bredere website-optimalisatie gericht op meer leads. Zo verbeter je niet alleen het eerste scherm, maar de hele conversieketen. Twijfel je of jouw huidige website de scroll verdient? Vraag een vrijblijvende website-analyse aan via ZazouTotaal en ontdek binnen een paar dagen concreet wat er beter kan.

Bronnen

Wil je dieper in de materie duiken of direct aan de slag met testen? Deze bronnen bieden een goed vertrekpunt.

• What Is Above the Fold in 2026 — and Does It Still Matter for Conversions?
• Wat is Above the Fold | Definitie van Above
• Paginavouw

Veelgestelde vragen

Wat is above the fold op een website?

Above the fold is het deel van een webpagina dat een bezoeker ziet zonder te scrollen, ook wel de eerste viewport genoemd. Dit gebied verschilt per apparaat, dus er bestaat geen vaste pixelhoogte die voor elke website geldt.

Is above the fold nog steeds relevant?

Ja, de fold blijft het moment waarop bezoekers beslissen of ze verder scrollen of wegklikken. De rol is wel verschoven van “alles erin proppen” naar het overtuigend presenteren van vijf kernelementen die de scroll verdienen.

Wat is de fold precies bij een responsive website?

Bij een responsive website verandert de fold mee met het scherm: op mobiel toont hij minder content dan op desktop. Daarom werkt mobiel-first ontwerpen beter dan uitgaan van één vaste desktopindeling.

Moet de call-to-action altijd boven de fold staan?

Niet altijd; op een landingspagina met een specifiek campagnedoel wel, maar op een informatief blogartikel werkt een teaser boven de fold met een herhaalde CTA verderop vaak beter.

Hoe helpt Zazoutotaal bij het optimaliseren van mijn eerste scherm?

Aanbeveling

• Website met heldere boodschap bouwen: stap-voor-stap – ZazouTotaal webdesign en online marketing Helmond
• Website onderhoud: houd je site veilig en snel
• Website maken stappenplan: snel en effectief online
• Website boodschap helder maken: de praktische gids – ZazouTotaal webdesign en online marketing Helmond