Above the fold: How to build user-friendly websites

Just a few years ago, as much information as possible was packed into the visible area of a browser. Today, that is no longer so advantageous. But why? The use of smartphones and tablets has changed user behavior enormously. They scroll more or have learned to change the screen view by swiping. All this has led to a rethinking of web design. What remains to be seen is what role the immediately visible area of a website still plays.

The answer: “above the fold” is still important for content. Nevertheless, design-technical rethinking is called for. As a webmaster, you should not “stuff” this area with all the information, but rather try to attract visitors’ attention, encourage them to scroll, and encourage them to look at the rest of the page as well. In this article we will give you helpful tips on how to effectively design your above-the-fold area.

What does “above the fold” mean?

The expression “above the fold” comes from the printing industry. Newspapers are folded in the middle and are placed in the sales racks or displayed in this way. At first glance, only the upper part of the title page is visible. The line of folds is referred to as the “fold”. Newspaper editors use the immediately visible area above this line to attract attention with topical stories, interesting headlines and impressive pictures and to drive people to buy.

On websites, the “above the fold” area is the section that users can see immediately without having to scroll. Assuming a 1366×768 pixel screen resolution (more on screen resolutions later), visitors to your website will usually first see the area highlighted in red in the figure below.

Image 1: The area visible without scrolling on en.ryte.com

What is the importance of the visible area?

In late 2013, Peep Laja spoke at SearchLove in London about the fundamentals of compelling web design. He observed that “above the fold” content still reaps almost 80% of users’ attention. This has not changed, even though users have become accustomed to scrolling on the web.

Image 2: Distribution of attention on web pages

This proves that the upper part of web pages (visible area) is still important if you want to attract users’ attention.

Nevertheless, something has changed: Users have little patience. That’s why it’s even more of a challenge to keep users interested.

Therefore, do not fill the “above the fold” area (especially for Google and SEO) with unnecessary information. This area should instead highlight the benefits of the page and explain to the user what there is to discover on the page.

Design “Above the fold” responsively

Due to the use of a wide variety of devices, the area that can be seen above the fold has also changed. Through Responsive Design, the fold line appears at different positions on the web page. Which area of the web page is then displayed to the user depends on various factors. (For example, the screen resolution, the width of the user’s toolbar, and whether the page is zoomed in).

How should one now design for these requirements? There is no one-size-fits-all solution. In any case, make sure that the most important content is located at the beginning of the page and is adapted to the needs of most users.

Since the majority of internet users are now mobile surfers, your approach here should be “mobile first” and your “above the fold” area should be optimized for smartphones.

Three ways to promote scrolling

1. offset columns

Image 3: Differently arranged columns on bbc.com.

Content that is divided into differently arranged columns immediately shows users that there is more to discover here. This is because a section of text or even an image is then almost always interrupted by the fold and this leads users to scroll further to get more information. This style is often used on newspaper news sites.

2. Paths through the page

You can also encourage your website visitors to scroll by integrating a pre-drawn path on your website. The fold breaks up this path, which users will want to follow.

3. Give hints

There is another way to make users aware that there is more information waiting for them at the bottom of the page. Just tell them and add an appropriate sign (arrow etc.) on the landing page!

How relevant is content “above the fold” for Google?

In a Hangout, Google’s John Mueller answered the question about the importance of content in the visible area this way:

“So the main thing is that we want to see some content above the fold. Which means… a part of your page should be visible when a user goes there. So for example if a user goes to your website and they just see a big holiday photo and they have to scroll down a little bit to actually get content about a hotel, then that would be problematic for us. But if they go to your home page and they see a hall of fame photo on top and also a little bit of information about the hotel, for example for a hotel site, that would be fine. So it’s not purely that the content has to be above the fold. But… some of the content has to be.”

So Google evaluates above all that content should be found in the visible area at all, to give users (ed. note not search engines ☺) an indication of what they will find on the page.

Conclusion

The space “above the fold” (visible area) is still important. In the past, webmasters tried to place all the important elements of the page there. Today, it’s more about attracting visitors’ attention in this area.

With the different types of screens we browse the web on, scrolling has become something commonplace. Use visual instructions to ensure that users immediately recognize that there is more to see at the bottom.

Keep an eye on user behavior and find out what screen resolutions they use most often. This way, you can make sure that the most valuable content is displayed above the fold.