Above the Fold vs. Below the Fold: Does it Still Matter in 2018

Above the fold remains an important part of website design, although the notion has become more and more complex with each passing year. While it may not be seen as consequential as it once was, it still requires understanding and consideration for all websites seeking to present an engaging experience for their visitors.

What Is Above The Fold?

The concept of above the fold goes back centuries, to the beginnings of the printing press. Newspapers, due to the way they were printed on large sheets of paper, were folded once they hit the news-stands. This led to only the top half of the paper being visible to the passer-by.

The newspaper industry quickly worked out that to garner an audience, they must present attention grabbing headlines, content and imagery on the top half of the page. This basic principle remains the same for digital content.

Of course websites do not have a physical fold like newspapers, the fold in this regard relates to the scroll bar.

Anything that isn’t visible immediately, that requires scrolling, is considered below the fold. Unfortunately, the digital version of above the fold isn’t quite as simple as the print version.

Dimensions

The first consideration for a website is how its dimensions appear to the reader. Not all screens are the same. What’s more, with the proliferation of pads and phones, each site presents in vastly different ways. That’s not to mention issues regarding screen resolutions and browser plug-ins.

Phone dimensions have become arguably the most important area to consider carefully, with its use eclipsing desktops in 2016. Mobile phones come in various shapes and sizes, as do their screens, so unlike a broadsheet newspaper, the fold line is a far less predictable concept.

Online Tools For Defining Above The Fold Placement

There are many free online tools you can use to visually test and place different aspects of your website relating to its “Fold”. While these are extremely helpful to help you get a physical idea of the layout, they can only provide a superficial presentation of the website, and not an in-depth analysis. For this reason, it is recommended that a full website optimization is carried out.

Best Practices

While it is true there are no hard and fast rules for above the fold placement, some best practices often work as helpful guidelines. Some of these are common sense ideas, such as ensuring the most engaging content is above the fold. Other practices relate to the previously mentioned dimensions, such as the standard 1,000 pixel wide – 600 pixels tall fold size of 1,024 by 768 pixel screens. Most screen sizes are higher than this in 2018, however, so adjusting your website accordingly is important.

It is also important to never assume best practices means orthodoxy. For many years, websites have been designed like newspaper front pages, but this has led to a kind of “templatification”, whereby the majority of sites look the same. Innovations, such as vertical scrolling (or clicking) means the concept of above the fold is literally flipped, and the experience feels a lot more natural to the reader as a result.

Some websites, in fact, have done away with the fold altogether, designing pages with no below the fold content and eliminating the problem entirely. These “Compact” designs are aesthetically pleasing the eye and are able to fit all screen sizes.

The New Rules for Scrolling in Web Design

One of the worst things a website can do is present a “False bottom” to the page. This is where a site has further information that requires scrolling, but its existence is not apparent to the visitor. This is the worst of all worlds. A fold need not be an obstacle, it should flow naturally and draw the visitor in.

Call To Actions Above Or Below The Fold?

One of the myths about above the fold designs is it is always best practice to have a Call To Action (CTA) clearly viewed instantly. This is, like much related to the topic, an over-simplification of the concept. Where to put the call to actions depends on several factors, most consequentially:

  • Certain visitors
  • Uncertain visitors that are familiar with your product – or the proposition is simple
  • Uncertain visitors that are presented with a complex proposition

Certain visitors are those who are likely to react to the call to action as they have largely made their mind up before visiting the site. This is where known brands have an advantage, as there is little for the “certain visitor” to learn about a product or service. In these cases, placing a call to action above the fold is only a matter of convenience.

For uncertain visitors that understand the call to action simply or that have some knowledge of the product or service, placing the call to action above the fold is generally best practice for much the same reasons as those listed above, although informative content is also important.

For uncertain visitors that are presented with a complex proposition, such as a product or service that isn’t obviously beneficial to them, placing the call to action above the fold will not suffice. What is required is a more in-depth explanation of why your call to action should be acted upon. In fact, placing your call to action up front can appear a little pushy.

Put simply, the call to action should be placed in a position whereby the visitor has been most persuaded to act upon it.

Placement Of Ads

It should always be understood that most of the attention, no matter how tactically you design your site, will still be focused above the fold. Therefore, it stands to reason that to maximise ad engagement that you should flood the area with ads right? Well no. Google algorithms penalise this practice severely and you could ruin your website’s ranking immeasurably if you are not careful. What’s more, you can push important information not just below the fold, but beyond the patience of your visitor.

Ad placement is a complex balance that requires knowledge of bounce rate, engagement analysis and user behaviour. These decisions are best made with the right data to hand.

The Importance Of Above The Fold

As should be apparent at this stage, the importance of above the fold design is essential, but complex. As a result it’s wise to be weary of any advice that deals in absolutes. It is certainly true to say that user habits have changed enormously from the early days of the Internet. During the 90’s, due to slow connection speeds and ponderously slow websites, it was common for most “Surfers” to rarely read anything below the fold. These days people are far more likely to use the scroll wheel on their mouse.

This has mercifully led to cramming, whereby information was stuffed above the fold, largely dying out. It is far more common these days to be greeted with minimalist and elegant designs that allow the visitor to discover what the site has to offer.

A recent Google study showed that ads appearing above the fold had a 73% visibility, where as those below it had just 44%. But this should be weighed up with the fact that content that draws the viewer in narrows that gap considerably, and ads can be an obstacle for that. As ever with this subject, context and balance are key.

Anthony Brebion

Anthony is Product Marketing Manager @ABTasty. He was previously SEO consultant and worked several years in digital ad houses. He’s now an A/B testing and optimization evangelist.

Related Posts