If you’ve spent any amount of time in online marketing and web design, you would most surely have come across the term ‘above the fold’. Conventional digital wisdom dictates that you never put calls to action or any important information below the ‘fold’
But is the fold a ‘fixed’ point on the screen? More importantly, is it as important to you and your business as some experts say it is?
Historically, the phrase “above the fold” has its roots in the print industry. Long before the internet turned the media industry on its head, and the newspaper was still king, editors placed their most important content and headlines on the top half of the front page of the newspaper. This was because at the point of sale, newspaper vendors would fold these papers in such a way that exposed this top half. Placing your best headlines and content on the top half, thus helped to attract reader attention and drove sales.
Editors deemed content ‘above the fold’ if they thought it had the potential to entice the most attention. Most often it was the most important headline of the day.
Fast forward two hundred years and in comes the internet; a different sort of content other than newspaper content is king, but as is common in all industry disrupting innovations, all the old jargon is still in use despite the monumental change. Today ‘above the fold’ is one of the most important terms in web design and digital marketing.
How ‘The Fold’ Is Defined in Web Design
There is no clear cut definition for the fold in web design or the digital space. Based on perceived reader behaviour, different web designers arrive at their own definition. However, most descriptions range between 600 pixels to 768 pixels from the top of the browser page. It is common to have what is considered the most important content placed in this top space of a website. This usually includes the catchiest headlines, calls-to-action, and engaging copy.
The problem with this definition of the fold is that it only takes desktop screens into consideration. This can prove problematic for the simple reason that what sits above the fold in a desktop may not sit above the fold on mobile, or tablet.
In many parts of the world, the use of mobile to surf the web has already outstripped the use of computers. To further compound the problem, mobile devices offer a range of screen sizes, and mobile users are more likely to go for the portrait viewing mode which turns the traditional page design sideways. With so many different viewing options, it is very difficult to predict the way your content is displayed.
It therefore stands to reason that there can be no true fixed point for a fold that fits all screens.
However, there is a way around this problem: design that embraces all types of visitors to your website so that all important features and news are clearly visible, no matter the device they are using.
Enter Responsive Design
With responsive design there is no fixed layout. The content reflows to fit any screen of any size. Rather than a fixed fold, there is a responsive fold that is completely different from what exists for desktop displays and changes from device to device.
It allows your most important content displayed clearly before the reader so that they can take action in the form of clicking a call-to-action, or scrolling on further down the page.
Conclusion
According to studies, there is no ideal universal location that guarantees that the reader will take action. In other words, there is no true fold as far as web design and digital marketing are concerned. Don’t get it wrong: it’s still important to showcase your most important content before the reader at strategic locations on the page. But a web design that is responsive to different devices, and guarantees a pleasant user experience is much more important.
Contact us today to discuss the best strategy to turn your website into your very best investment.
Further Reading:
The myth of the page fold: evidence from user testing →
Blasting the Myth of the Fold →
Unfolding the insights into webpage scroll →
The Extinction of the Scrollbar →
Scroll Behavior Across the Web →
