Does 'above the fold' matter in WordPress website design?

August 9, 2019

WordPress-website-design-fold1This 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.

SEO impact

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

Additional notes

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.

7 Comments

  1. Jules
    June 16, 2020 Reply

    Well done for concluding that the fold does matter.
    Surely it should be obvious that the first" view" is critical.
    It should be inviting - and not "hard work".
    It should convey info about the site's Content - and Navigation should be distinct and not ambiguous.

    Of course it is possible to overdo content - but too many designers strip out useful Content and visually helpful details.

    Your list of "required" content and navigation should be mandatory.

    But what struck me was the omission. No mention of a Hero-Image.
    99% of these are a HUGE waste of space.
    A "pretty" picture that almost never conveys anything of substance.
    Instead, it pushes actual Content below the fold. i.e. forcing the Visitor to "work" for no pay-off.

    So well done for omitting Hero-images ;-)

    • EJ
      June 19, 2020 Reply

      Hi, Jules. I'm glad you found this article and thanks for your comments. I'm not sure whether hero images were a thing yet when we published this in late 2012, so thanks for mentioning it. Good points! If I may add, being an image it is also "invisible" to search engine crawlers/spiders (unless it has alt text).

  2. Desi Reuben-Sealey
    October 30, 2012 Reply

    Katie, this is a great article. You've given an excellent case for both with convincing argument but have explained how being one sided in ones thinking does not align with users behaviour anymore.

    This article a an excellent resource in assisting me in helping the uneducated within my organisation.

    • Katie
      October 30, 2012 Reply

      Hi Desi, thanks for your comment and for your phone call earlier. I'm really pleased the article was so helpful to you. Katie

  3. Katie
    September 11, 2012 Reply

    Thanks for your comment Robby. I love this sentence in the link you sent: "A client, overestimating the importance of the fold, may request everything and the kitchen sink to be squeezed and crammed into that relatively small space and the web designer will be left frustrated that they cannot demonstrate their skill for position, alignment and subtle use of white space."

    As usual, Google has provided much of the answer with their Browser Size Analysis Tool. This perfectly illustrates how the edges of the fold are fluid, but there is still an area that is visible on most browsers - so any website that doesn't put key content here is missing an opportunity. Viewing the Barn2 Media website using this tool (see image at the top of this post) shows how this should work - the vital elements such as the logo, strapline, navigation menu and main heading are above the fold on all screen sizes. The lower part of our portfolio screenshots falls beneath the fold on some screens, but this is less important and won't affect whether people scroll down.

    • RobbyDesigns
      September 11, 2012 Reply

      As you said, the vital elements should always be at the top but any good designer will know that already (as you and I do); the problem comes with clients asking for everything to be 'above the fold' (as per your comment).
      With the average website visitor taking around three seconds to decide if they want to read on - as opposed to eight seconds for someone browsing the newspaper stand (!) - it is important to grab their attention.

  4. RobbyDesigns
    September 10, 2012 Reply

    Excellent article and great argument both ways.
    I would agree that 'above the fold' is not a dead idea per say but where exactly is the fold today with responsive websites, varying screen resolutions etc? It's a tricky call but, as you say, the most important, attention grabbing 'what is this site about' HAS to be above the fold or people will simply click on by. Modern web design has changed / evolved the idea of the fold and you can see a great article over at WebTuts:
    https://webdesign.tutsplus.com/articles/design-theory/designing-for-the-new-fold-web-design-post-monitorism/

Please share your thoughts...

Your email address will not be published.