“Above the fold” is a term used to describe the area of a web page, which is visible to the user at first glance, without having to scroll. For years, site operators have been trying to position anything of importance, such as navigation, specific links and other important content at the top of the page.
Previously, everything was packed into the visible area of a browser, but that’s no longer a beneficial practice today. But why? Through the use of smartphones and tablets, the behavior of web users has changed. They scroll more, and have learned to switch screens by swiping. Therefore, you now have to rethink your web design. The question remains, what role does the “above the fold area” (the immediately visible area of a web page) have?
The answer: The space “above the fold” is still important. Nevertheless, design and technical rethinking is called for. As a webmaster, you should not “clutter up” this area with all kinds of information, but instead try to attract the attention of visitors, encourage them to scroll down and look at the rest of the page as well.
The term “above the fold originated from the printing industry. Newspapers are folded in half and delivered to readers that way. At first glance, you only see the top of the title page. The fold line is called the “fold.” The editors of newspapers use the immediately visible area above this line to attract attention with current stories, interesting headlines and imposing images to get people to buy.
On websites,the section “above the fold” is the area that users can see immediately without having to scroll. Taking a 1366×768 pixel screen resolution as a basis (more about screen resolutions later), visitors will see your website initially in the area marked in red in the figure below.
Figure 1: Websites and the visible range
At the end of 2013, Peep Laja spoke at the SearchLove in London on the basics of convincing web design. He observed that the content “above the fold” still gets almost 80% of user attention. Nothing has changed in that respect even though users have become more accustomed to scrolling on the internet.
Figure 2: Distribution of attention on web pages
This proves that the upper section of web pages is still important if you want to attract the attention of users.
Nevertheless, something has changed. Users nowadays have less patience than they did before. This is due to the diversity of the content to which searchers now have access. Therefore, it is an even greater challenge to spark the interest of users.
Therefore, don’t fill the area “above the fold with too much information. This area should instead bring into the light the advantages of the web page, and tells users what they will discover on the page.
Because of different types of devices used today, the area which can be seen above the fold, has also changed. In each of the devices
How should you design for these requirements now? There is no universal model solution. Make sure, however, that the most important content can be found as much as possible at the top of the page and is adapted to the needs of most users.
If you want to find out which screen resolution the majority of your clients use, do the following steps:
Figure 3: Screen resolution in Google Analytics
To find out which sections of a web page are immediately visible on different devices, you can use a browser add-on. Here you can see the procedure Window Resizer for Google Chrome.
Figure 4: Windows Resizer
Figure 5: Using the Window Resizer
Figure 6: Formats in Window Resizer
Figure 7: OnPage.org website in different screen resolutions
Now we know that the space “above the fold” is still incredibly important to spark the interest of website visitors. But what about the rest of the beautiful content? A study conducted by clicktale demonstrates the following: If a website has a scroll bar, it will be used by 76% of website visitors – at least up to a certain point. 22% even scroll to the bottom of the page. So the space above the fold still gets most of the attention but users also scroll as proven by usability expert, Jacob Nielsen. Design the fold line in such a way that users want to continue viewing.
Figure 8: Different columns arranged at bnn.de
Content that is divided into differently arranged columns, shows users immediately, that there is more to discover. Because a portion of text or an image is almost always interrupted by the fold, users will scroll down to get more information. This style is often used by newspaper websites.
Figure 9: Predetermined path through Ryte’s website.
You can also animate users to scroll by integrating a path laid down on your website for website visitors. The fold separates this path, which users would like to follow.
Figure 10: Scroll instructions on Google
There is yet another way to draw users’ attention to the fact that more information is waiting at the bottom of the page for them. Just tell them!
Improve the area of your webpage “above the fold” with Ryte FREE
Published on 09/22/2015 by Irina Hey.
Irina Hey is a keynote speaker and an expert in the field of customer acquisition, lead generation and data driven marketing. Until April 2018 she worked as a Product Owner of Acquisitions and coordinated all strategic marketing activities at Ryte.
Become a guest author »
Get more traffic and customers by optimizing your website, content and search performance. What are you waiting for?
Register for free