Managing the fold is an important part of website design.
Which elements should be placed above the fold? What impact on organic search? What about the difference between mobile and desktop?
Often overlooked, the fold always requires consideration from website creators to offer a good user experience.
What is the fold?
The concept of the fold, "Above the fold" in English, goes back centuries to the beginnings of printing. "Above the fold" means "above the crease." Newspapers, because of the way they were printed on large sheets of paper, were folded once they arrived at newsstands. As a result, only the upper half of the paper was visible to passersby.
The press industry quickly realized that to capture readers' attention it had to present headlines, content and images that attract attention in the upper half of the page. This basic principle remains the same for digital content.
Of course, websites do not have a physical crease like newspapers. Here, the "fold" refers to the scroll bar. Anything not immediately visible and requiring scrolling is therefore considered below the fold.
Unfortunately, the concept of the fold is not as simple as its paper version. Indeed, how can you know where the fold is when, nowadays, no two screens are identical?
Since the advent of tablets and other smartphones, each site appears very differently depending on the user. Not to mention screen resolution issues, browser differences, and screen types (OLED, Retina, etc.).
Smartphones, which now account for a very large share of web traffic, come in different shapes and sizes, as do their screens and resolutions. Unlike a paper newspaper, the fold is a much less predictable concept.
Here is an example of a poorly managed fold, with content cut off.
How to manage the fold?
While it's true there are no strict rules for what to display above the fold, certain practices often serve as useful guidelines.
Some are common-sense ideas, such as ensuring the most engaging content is above the fold. You can also choose to design your site according to the most common sizes of each device – desktop – mobile – tablet. A responsive website, it's the standard today!
However, it is important never to take "best practices" literally. For many years, websites were designed like newspaper front pages, but that led to a kind of templating where most sites looked alike.
Innovations such as one-page sites, in particular, have begun to break free from the concept and provide a much more natural experience for the reader.
If you want to stick to a simple concept that won't change anytime soon, place your important information: striking image, punchline, call-to-action, as high as possible on your pages. The most important content first.
Be careful: keep a balance and don't put EVERYTHING, otherwise you risk making your page confusing.
Example of managing the fold
To understand how to intelligently manage a site's fold, let's analyze an example.
Example of the fold on desktop
For example, on our Codeur.com freelance platform, the most important elements are located above the fold:
- Navigation menu to sign up
- A strong hook
- A search-bar style CTA
- Trust signals
Anticipating a screen with smaller dimensions or an aspect ratio different from 16:9, there aren't too many elements across the width. Likewise, the white reassurance banner is discreet. When it is visible, it contrasts with the blue background and is noticeable, but it isn't missed and doesn't jar if it is no longer visible or gets cut off.
Example of the fold on mobile
On mobile, the content display is adapted to fit the format.
The search bar with CTA is split into two, but the same set of elements is present above the fold.
Managing a website's mobile version is crucial, because many users browse exclusively on mobile. It's important to check in your analytics tool (Google Analytics, Matomo, etc.) what share of traffic comes from mobile versus desktop and to verify that your site is well optimized.
Optimize content above the fold on your website
There are many online tools to help you, such as heatmap. A heatmap collects real-time data from users about how they interact with the website and displays results using different colors: dark red highlights frequently used parts of the page, yellow for moderately used areas, and light green for the least used sections.
This lets you see how visitors interact with your site's content. Poor placement of a CTA above the fold, for example, can reduce your conversion rate.
Don't neglect the fold
An abstract concept when you're unfamiliar with it, the fold will nevertheless never disappear.
With a responsive site and by placing only the most important elements on the first screen, you'll usually get an acceptable result. But it's essential to ensure your site performs well above the fold!
If you plan to do a website redesign or if you need to optimize your pages above the fold, hire an expert.
Post a project for free on Codeur.com to get support from a freelance web developer !
