Boven de vouw
‘Above the Fold’ verwijst naar het gedeelte van een website dat direct na het laden zichtbaar is, zonder dat gebruikers hoeven te scrollen. Welke inhoud daar verschijnt, kan de eerste indruk, de oriëntatie en de gebruikersnavigatie beïnvloeden.
Het gaat hierbij niet om een vastomlijnd gebied met een bepaalde pixelhoogte. Afhankelijk van de schermgrootte, het browservenster, het apparaat en de pagina-indeling bevindt de zogenaamde ‘fold’ zich op een andere positie. De term beschrijft daarom altijd het op dat moment zichtbare gedeelte van een website.
Het belangrijkste over ‘Above the Fold’ in het kort
- 'Above the Fold' is het gedeelte van een website dat zichtbaar is zonder te scrollen.
- De term is oorspronkelijk afkomstig uit de krantenwereld.
- Er is geen vaste 'fold' in pixels, aangezien schermformaten en viewports variëren.
- Centrale inhoud, zoals de kop, de context van de pagina en de navigatie, moet zo vroeg mogelijk begrijpelijk zijn.
- Voor SEO is ‘Above the Fold’ geen op zichzelf staande rankingfactor, maar kan wel relevant zijn in samenhang met gebruikerservaring, toegankelijkheid en prestaties.
Wat is 'above the fold'?
De Engelse uitdrukking „Above the Fold“ betekent letterlijk „boven de vouw“. In webdesign verwijst deze term naar het gedeelte van een webpagina dat bezoekers direct na het openen zien. Alles wat pas zichtbaar wordt door te scrollen, bevindt zich dus „Below the Fold“.
Voor websites is dit onderscheid vooral relevant omdat het eerste zichtbare gedeelte de eerste inhoudelijke oriëntatie biedt. Gebruikers kunnen daar zien op welke pagina ze zich bevinden, welk onderwerp of aanbod aan bod komt en welke verdere inhoud ze kunnen verwachten.
‘Above the Fold’ is geen afzonderlijk ontwerpelement, maar een deel van de huidige viewport. Het kan bijvoorbeeld een navigatiebalk, een kop, toelichtende tekst, een afbeelding of een call-to-action bevatten.
Waar komt de term ‘Above the Fold’ vandaan?
De term stamt oorspronkelijk uit de krantenwereld. Opgevouwen kranten worden vaak zo neergelegd of gepresenteerd dat alleen de bovenste helft van de voorpagina zichtbaar is. Belangrijke koppen en afbeeldingen werden daarom bij voorkeur boven deze vouw geplaatst. Dit principe werd later overgenomen op websites. Ook hier krijgt het direct zichtbare gebied bijzondere aandacht. Terwijl de vouw van een krant fysiek vastligt, verandert de 'fold' van een website afhankelijk van het apparaat en de betreffende viewport.
Above the Fold en Below the Fold – wat is het verschil?
'Above the Fold' en 'Below the Fold' verwijzen niet naar verschillende soorten inhoud, maar naar de positie ervan op een pagina.
- 'Above the Fold' omvat alles wat gebruikers bij het eerste laden zien zonder te scrollen.
- 'Below the Fold' begint daar waar verdere inhoud pas zichtbaar wordt nadat er is gescrolld.
Belangrijke informatie hoeft niet uitsluitend in de eerste viewport te staan. Uitgebreide teksten, productdetails, referenties of veelgestelde vragen hebben meestal meer ruimte nodig. Het is van cruciaal belang dat de inleiding voldoende houvast biedt en dat de rest van de pagina-inhoud daar logisch op aansluit.
Waarom is het ‘above-the-fold’-gedeelte belangrijk?
Het eerste zichtbare gedeelte bepaalt hoe snel bezoekers de inhoud van een website kunnen overzien. Binnen korte tijd moet duidelijk worden waar de pagina over gaat en welk doel deze dient. Dat betekent niet dat ‘above the fold’ zoveel mogelijk informatie moet bevatten. Te veel tekst, knoppen, afbeeldingen of navigatie-elementen kunnen de oriëntatie bemoeilijken. De selectie en weging van de inhoud is daarom belangrijker dan de hoeveelheid ervan.
Aandacht en eerste indruk
'Above the Fold' vormt vaak de visuele en inhoudelijke ingang van een website. De vormgeving, de kop, de navigatie en de beeldtaal geven al een eerste indruk van het thema en de structuur van de pagina. Een groot hero-gedeelte vervult deze taak echter niet automatisch. Een visueel opvallende afbeelding is geen vervanging voor een begrijpelijke boodschap. Als een afbeelding veel ruimte in beslag neemt zonder extra context te bieden, kan de daadwerkelijk relevante inhoud verder naar beneden worden verschoven.
Oriëntatie en conversie
Op landingspagina’s of dienstpagina’s kan de eerste viewport ook relevant zijn voor de conversie. Een duidelijke kop, een begrijpelijke belofte van toegevoegde waarde en eventueel een passende call-to-action kunnen daarbij helpen om mogelijke volgende stappen te herkennen. Een knop hoeft echter niet per se op elke website volledig ‘above the fold’ zichtbaar te zijn. Bij complexere aanbiedingen of aanbiedingen die uitleg behoeven, kan aanvankelijk aanvullende context nodig zijn. De zinvolle positie hangt daarom af van het type pagina, de inhoud en de gebruikscontext.
Wat hoort er ‘above the fold’ op een website te staan?
Welke inhoud in de eerste viewport zinvol is, hangt af van het type pagina en van de betreffende zoek- of gebruiksintentie. Een lemma in een woordenlijst vereist een andere inleiding dan een onlinewinkel, een B2B-dienstpagina of een landingspagina voor een campagne. Doorgaans moet een duidelijke kop al vroeg aangeven welk onderwerp of aanbod de pagina behandelt. Daarnaast kunnen een korte toelichting, navigatie-elementen of een actieoptie zinvol zijn.
Kop en belofte van meerwaarde
De kop is vaak een van de belangrijkste tekstelementen in de eerste viewport. Deze moet zo concreet mogelijk aangeven wat bezoekers op de pagina kunnen verwachten.
Op commerciële pagina’s kan een aanvullende tekst helpen om het aanbod of de voordelen ervan beter te duiden. Het is vooral belangrijk dat de boodschap begrijpelijk blijft en niet pas uit meerdere ontwerpelementen moet worden afgeleid.
Call-to-action
Een call-to-action kan ‘above the fold’ zinvol zijn als gebruikers op dit punt al voldoende informatie hebben om actie te ondernemen. Dit kan bijvoorbeeld het geval zijn bij duidelijk omschreven verzoeken, bekende aanbiedingen of gerichte landingspagina’s.
Bij inhoud die uitleg behoeft, is een onmiddellijke oproep tot actie daarentegen niet per se noodzakelijk. Een zichtbare knop is geen algemeen geldend kenmerk van een goed ‘above the fold’-gedeelte.
Andere mogelijke elementen
Afhankelijk van de website kunnen beoordelingen, certificaten, logo’s van klanten of andere oriëntatie-elementen in de eerste viewport verschijnen. Ze zijn echter geen noodzakelijk onderdeel van ‘above the fold’ en mogen de centrale boodschap van de pagina niet overschaduwen.
Ook afbeeldingen en grafieken kunnen de instap ondersteunen. Een hero-afbeelding is echter evenmin een vereiste. Een visueel element is vooral zinvol als het de inhoud aanvult, een product toont of een onderwerp sneller begrijpelijk maakt.
Hoe groot is het ‘above-the-fold’-gebied?
Voor het ‘above-the-fold’-gebied bestaat er geen algemeen geldende hoogte in pixels. Al twee desktopgebruikers kunnen, vanwege verschillende monitorformaten, schermresoluties of browservensters, verschillende delen van dezelfde website zien. Daarnaast beïnvloeden browserbalken, kopteksten, cookie-meldingen en andere interface-elementen de daadwerkelijk beschikbare ruimte. Een universele waarde zoals „600 pixels zijn above the fold“ kan daarom niet zinvol worden toegepast op alle websites en eindapparaten.
Op grotere desktopschermen is er meestal meer horizontale en verticale ruimte beschikbaar. Toch gebruiken niet alle bezoekers dezelfde resolutie of dezelfde grootte van het browservenster.
Ook op de desktop is de vouw daarom variabel. Responsieve lay-outs passen de inhoud en indeling aan verschillende viewports aan.
Op smartphones is het beschikbare gebied smaller. Tegelijkertijd kunnen browserbalken, cookie-meldingen of uitgebreide kopteksten een deel van de zichtbare viewport in beslag nemen.
Daardoor kunnen bijvoorbeeld grote afbeeldingen of navigatie-elementen met meerdere regels ervoor zorgen dat centrale inhoud pas na het scrollen verschijnt. Op kleine viewports is daarom een bijzonder duidelijke prioritering van de inhoud noodzakelijk.
Is ‘above the fold’ belangrijk voor SEO?
"Above the Fold" is geen op zichzelf staande SEO-rankingfactor waarmee de positie in de zoekresultaten uitsluitend door de plaatsing van bepaalde inhoud kan worden verbeterd. Zoekmachines houden rekening met de gehele pagina en niet uitsluitend met het eerste zichtbare gedeelte. Toch zijn er verbanden met andere kwaliteitsaspecten. De belangrijkste inhoud moet goed toegankelijk zijn en mag niet worden verdrongen door storende elementen. Ook laadsnelheid en visuele stabiliteit kunnen de gebruikerservaring van een pagina beïnvloeden. Met name grote afbeeldingen of andere media in de eerste viewport kunnen technisch relevant zijn als ze veel laadtijd vergen. In dit verband kan onder andere de Core Web Vitals-maatstaf Largest Contentful Paint (LCP) een rol spelen.
Voor SEO is het daarom niet doorslaggevend of een bepaald trefwoord of een knop ‘above the fold’ staat. Het is wel van cruciaal belang dat centrale inhoud begrijpelijk, toegankelijk en technisch betrouwbaar wordt weergegeven.
Veelvoorkomende fouten in het ‘above-the-fold’-gedeelte
- Onduidelijke kernboodschap: bezoekers zien een zorgvuldig ontworpen startpagina, maar kunnen het thema of het aanbod niet eenduidig plaatsen.
- Zeer groot hero-gebied: een afbeelding of video neemt een groot deel van het weergavegebied in beslag en verdringt essentiële informatie naar beneden.
- Te veel gelijkwaardige elementen: meerdere knoppen, aanwijzingen of boodschappen strijden om de aandacht.
- Alleen ontworpen voor grote schermen: op kleinere viewports verandert de volgorde of zichtbaarheid van belangrijke inhoud aanzienlijk.
- Gebrek aan prioritering: navigatie, afbeeldingen, aanwijzingen en teksten krijgen een vergelijkbaar visueel gewicht, hoewel ze verschillende functies vervullen.
Niet elk van deze patronen is per definitie problematisch. Of een ontwerp werkt, hangt af van de inhoud, het type pagina en de gebruikscontext.
Welke kenmerken kunnen bij 'Above the Fold' van belang zijn?
Welke elementen in het eerste zichtbare gedeelte zinvol zijn, hangt af van het type pagina, de inhoud en de gebruikscontext. Er bestaat dan ook geen algemeen geldende checklist die voor elke website in gelijke mate van toepassing is. Bepaalde kenmerken kunnen echter helpen om het ‘above-the-fold’-gedeelte in te delen. Hiertoe behoren met name:
- Herkenbaarheid van het thema of het aanbod: gebruikers moeten zo snel mogelijk kunnen begrijpen waar de pagina over gaat.
- Begrijpelijkheid van de hoofdkop: de kop moet het centrale thema of de inhoud van de pagina op een begrijpelijke manier benoemen.
- Visuele hiërarchie: koppen, teksten, afbeeldingen en andere elementen moeten zo worden gerangschikt dat hun respectieve betekenis herkenbaar blijft.
- Functie van afbeeldingen en grafieken: visuele elementen kunnen de inhoud ondersteunen, maar mogen essentiële informatie niet onnodig verdringen.
- Weergave op verschillende apparaten: Aangezien het zichtbare gebied varieert afhankelijk van de viewport, kan dezelfde pagina er op een desktop en een smartphone anders uitzien.
- Toegankelijkheid van centrale inhoud: Belangrijke inhoud moet bereikbaar zijn zonder onnodige visuele of technische barrières.
- Laadgedrag in de eerste viewport: Grote afbeeldingen, video’s of andere media kunnen van invloed zijn op hoe snel het zichtbare gebied volledig wordt weergegeven.
Deze kenmerken zijn geen vaste kwaliteitscriteria. Welke weging zinvol is, hangt af van de functie die de betreffende pagina vervult. Een artikel in een woordenlijst stelt andere eisen aan de eerste viewport dan bijvoorbeeld een landingspagina, een webwinkel of een redactionele startpagina.
Conclusie: Above the Fold zorgt vooral voor oriëntatie
'Above the Fold' verwijst naar het eerste zichtbare gedeelte van een website en vormt daarmee een belangrijk onderdeel van de gebruikerservaring. Het doel ervan is niet om zoveel mogelijk inhoud weer te geven zonder te hoeven scrollen, maar om essentiële informatie op een begrijpelijke manier prioriteit te geven.
Een duidelijke kop, een begrijpelijke context van de pagina en een herkenbare visuele hiërarchie zijn doorgaans belangrijker dan de starre plaatsing van afzonderlijke elementen. Tegelijkertijd moet de weergave op verschillende apparaten goed werken, aangezien er geen universele ‘fold’ bestaat.
Voor SEO is ‘Above the Fold’ geen directe factor voor de ranking. Voor gebruikersnavigatie, conversie en technische prestaties kan de vormgeving van de eerste viewport echter wel relevant zijn. Een begrijpelijk ‘above the fold’-gedeelte beantwoordt vooral drie vragen: waar ben ik, waar gaat het hier over en wat kan ik nu doen?
Veelgestelde vragen over 'Above the Fold'
Op websites verwijst ‘Above the Fold’ naar het gedeelte dat na het laden zichtbaar is zonder te scrollen.
Dat hangt af van het type pagina. In de regel moeten het thema, het aanbod of het doel van de pagina zo snel mogelijk herkenbaar zijn. Daarom horen er vaak een duidelijke kop en een korte, toelichtende tekst bij.
“Above the Fold” is geen op zichzelf staande rangschikkingsfactor. Een goede toegankelijkheid van de belangrijkste inhoud, de gebruikerservaring en de technische prestaties kunnen echter wel van belang zijn voor de algehele kwaliteit van een website.
Er is geen vaste pixelwaarde. De schermgrootte, het browservenster, het apparaat en het responsieve ontwerp bepalen welk deel van een website zichtbaar is zonder te scrollen.
Nee. Een CTA kan daar zinvol zijn, maar is niet in alle gevallen noodzakelijk. Bij inhoud die uitleg behoeft, kan aanvankelijk extra context nodig zijn.
Nee. De hero-sectie is een ontwerpelement in het bovenste gedeelte van een website. ‘Above the fold’ verwijst daarentegen naar het gehele zichtbare gedeelte van de viewport. Een hero-sectie kan dit gedeelte geheel of gedeeltelijk vullen.
