De ‘fold’ is een essentieel element op elke website of webshop. Het is dan ook belangrijk dat de structuur van elke pagina goed zit op vlak van content boven en onder de fold. Maar wat is de fold, en waarom is dit zo belangrijk?
Wat is de fold?
De fold is de onzichtbare lijn die de inhoud van je pagina in twee deelt: de info die je meteen ziet als de pagina laadt (dit noemen we above the fold), en de info die je pas ziet nadat je naar onderen scrolt (dit noemen we below the fold). Zo kan je dus elke pagina in twee delen: een zichtbaar deel en een deel dat in eerste instantie niet zichtbaar is.
Waarom is de fold belangrijk?
Je moet bij elke pagina rekening houden met de fold. Dat geldt zowel voor contentpagina’s, zoals de homepagina en de contactpagina, als functionele pagina’s zoals een categoriepagina of productpagina. Het is namelijk essentieel dat de informatie above the fold interessant en duidelijk genoeg is om je lezer te overtuigen dat hij of zij op de juiste pagina zit.
Houd je hier geen rekening mee? Dan zal je lezer in veel gevallen wegklikken, nog voor hij of zij de informatie of de producten below the fold heeft gezien.
Een voorbeeld: de fold op categoriepagina’s
In onderstaand voorbeeld zie je het gevaar van een categoriepagina die niet geoptimaliseerd is op vlak van info boven de fold. Op een gemiddeld laptopscherm is onderstaande screenshot het enige wat je ziet op deze categoriepagina. De combinatie van een hoge header, een grote afbeelding en een lange beschrijving heeft als gevolg dat de producten op deze categoriepagina veel te ver naar onderen staan – en pas ver onder de fold tevoorschijn komen.
Als je beschrijvingen toevoegt aan je categoriepagina’s (en dat moet je zéker doen!), beperk dan de plaats die de beschrijvingen innemen boven je producten. Voeg best een heel korte tekst toe bovenaan, en de rest onderaan de pagina.
Zijn er meerdere folds per pagina?
In het voorbeeld hierboven hebben we het enkel over een gemiddeld laptopscherm. Het is belangrijk om dit ook te controleren op mobiele toestellen. Er zijn dus in feite voor elke pagina meerdere folds, aangezien dit afhankelijk is van het scherm. Uiteraard kan je de fold niet optimaliseren voor elk bestaand scherm. Wel is het belangrijk om dit niet alleen voor een laptopscherm te controleren, maar ook op smallere schermen, zoals een gsm.
Hieronder zie je dezelfde categoriepagina op een scherm van een gsm. De impact van een te lange beschrijving bovenaan is nog groter op smalle schermen. Je zal in dit geval al snel meerdere schermhoogtes volledig naar beneden moet scrollen voor je het eerste product ziet. En dat zullen veel van je bezoekers niet doen.
Het voorbeeld hierboven is maar één situatie, specifiek voor categoriepagina’s. Diezelfde denkoefening maak je best ook voor je productpagina’s, contentpagina’s, enzovoort.