This is a question that's been hotly debated in the Barn2 offices lately. The client for one of our current WordPress website design projects had stated a clear requirement that certain key content must appear above the fold. Our technical director is adamant that 'above the fold' is an outdated issue in WordPress website design and no longer applies. And our graphic designer is frustrated at the limitations that 'above the fold' is placing on the website's design elements. So who is right?
Of course, in many ways I should say the client is right - by definition. Fair enough, but I also believe that an important part of being a WordPress website designer is to use our knowledge of WordPress and website design issues to help them maximise the success of their website. Even if this means challenging them (in a constructive way) on occasion.
The case for 'above the fold' in WordPress website design
The origins of 'above the fold' came from the newspaper publishing industry. Newspapers were often sold or delivered folded in half, so it was vital to place the most important content literally above the fold.
This concept migrated to websites in general, and WordPress website design in particular. In this case, 'above the fold' refers to the part of a web page that you can see without having to scroll down.
First impressions count in WordPress website design
In the words of Google:
What is actually “above the fold” on a web page is a significant factor to conversion rates. If visitors have to scroll to see an “add to cart” button, or some other critical element, they may never get around to it.
The area above the fold is the first thing people see when visiting a website. It's vital in capturing attention and inspiring them to either scroll down, click on a call to action or browse to another area of the site. Thus increasing your conversion rate and reducing bounce rates.
It's obvious, really - if the content above the fold isn't enough to capture people's attention, why would anyone bother with the rest of the site?
This has led some people to think very carefully about exactly what should appear above the fold, and to design websites accordingly.
Search engines such as Google place more emphasis on keywords towards the top of the page. This has always been the case, but was made even more important with the page layout algorithm improvement of January 2012. This penalises websites that lack relevant content above the fold, particularly those cluttered with adverts at the top of the page.
But there is another side to the story...
'The fold is dead' argument
Firstly, what is 'the fold'?
It's not as obvious as it looks. WordPress website design experts will tell you that there's no such thing as a fold in modern web design. Modern web browsers come in many different shapes and sizes. There's no such thing as 'above the fold' because there's no such thing as a standard size web browser any more. Modern website design is fluid and you should design for all possible combinations of devices and screen sizes. Designing for above the fold is misleading and can distract you from this higher purpose - which is to design a great website regardless of device.
Important content versus unattractive clutter
It's possible to go too far with the 'fold' issue, at the expense of other factors. A website can be ruined by trying hard to cram everything into the area above the fold. It's tempting to add a few extra sentences or keywords or reduce the amount of white space, but all this can make the website look cluttered. It will confuse visitors and detract their attention from the content you've tried so hard to place above the fold - thus increasing your bounce rate, despite your best efforts. The 'less is more' approach can be more effective here.
People don't mind scrolling down anyway
In The myth of the page fold, Joe Leech cites evidence from eye tracking and user testing to argue that the fold is not a barrier. He discovered that people are happy to scroll down, unless there are some very specific problems with the website's design.
These deterrents included bold horizontal lines at the bottom of the fold which created the illusion that there was nothing underneath; and cluttered content above the fold. A well designed website will encourage exploration regardless of the fold.
So what's the answer?
The debate rages on. I would advocate a middle ground.
I agree that the fold isn't everything. At its worst, it's a distraction. But personally, I think the 'fold is dead' camp has got a bit carried away. In all the excitement about new techniques such as responsive website design - which tends to focus exclusively on web page width - the lowly fold has been forgotten. Often at the expense of SEO and user experience.
'The fold' simply isn't cool any more - admitting that you think about the fold is akin to admitting you still use frames! This attitude is leading people to overlook the ways in which the fold is still relevant.
Things are starting to change, though. Even those at the cutting edge of responsive design are starting to talk about vertical responsiveness, and the interest in the fold that comes with it.
I think the fold does matter - but it's not the be-all-and-end-all. Website visitors and search engines alike are attracted to website design that places key content above the fold. We should certainly bear this in mind as an important factor in WordPress website design. This should be balanced against other issues - one part of a much bigger picture.
The fact that screen sizes vary so much isn't an argument for ignoring the fold. Use Google Analytics' Browser Size Analysis Tool (shown in the image at the top of the page) to check what your website looks like on different screen sizes. It doesn't hurt to optimise a site with the majority in mind - so long as it's also effective for the minority.
Some practical suggestions
Don't get too caught up in forcing all your website's unique selling points above the fold. Instead, identify some key content that will capture your visitors' attention and encourage further exploration. As a general guide, it's a good idea to place the following elements above the fold for most screen sizes:
Type of content
|Logo||An instant way to convey your brand identity|
|Your slogan/strapline||This should clearly describe what the website's about|
|Navigation menu||This should be clearly worded and contain relevant keywords without looking spammy|
|Headline||If this hasn't already been covered by the website slogan/strapline, include a clearly worded sentence stating what the website is offering. Don't forget to include your main keywords|
|Call to action||Include a prominently placed call to action, e.g. signposting visitors to key content or encouraging them to click a button to sign up or find out more|
|Contact details||Many websites also benefit from including contact details above the fold, e.g. in the website header. If it's not obvious how to get in touch then people won't bother|
Including some or all of these things will ensure there's enough above the fold to make people want to learn more, while still allowing for visual content such as a slideshow or infographic. This will have much better results than trying to cram in whole bullet lists or paragraphs of text.
Most importantly, any attempt to place specific content above the fold should go hand in hand with good website design. If you've achieved these things, don't panic if people have to scroll down to find out more.