Above the fold content is an important part of website design and site building with Wordpress or ClassicPress. 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 is 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 scrollbar.
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 pixels 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 “templatization”, 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.
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. There is some more information on this in this article.
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 the 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 maximize ad engagement that you should flood the area with ads right? Well no. Google algorithms penalize 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 behavior. 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 wary 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 thankfully led to cramming, where 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 in store
A recent Google study showed that ads appearing above the fold had a 73% visibility, whereas 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. If you enjoyed this post, why not check out this article on CSS Flexbox In A Nutshell!
Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!
