Above the Fold – How to Build Websites Right

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”

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 1366x768 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

How important is the area above the fold?

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.

How do you design for “above the fold” when there are so many different devices on the market?

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 Responsive Webdesign, the fold line appears at different positions of the web page. Which part of the page will be displayed depends on various factors (such as screen resolution, the width of the toolbar or whether the page is magnified).

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:

• Open Google Analytics
• Select “technology” in the “visitor” category and click on “browser and operating system”
• Under “Screen resolution” you can find the corresponding data

Figure 3: Screen resolution in Google Analytics

View page in different resolutions

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.

• Install the add-on

Figure 4: Windows Resizer

• By clicking the icon on the top right in the browser, you can now use the function and set the browser to different screen resolutions.

Figure 5: Using the Window Resizer

• You can select different formats and thus be able to verify what users see on various devices at first glance.

Figure 6: Formats in Window Resizer

Figure 7: OnPage.org website in different screen resolutions

Designing for the lower parts of the website

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.

Three ways to promote scrolling

1. Staggered columns

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.

2. Paths through the site

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.

3. Giving instructions

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!

The most important information

• The space “above the fold” is still very important. Earlier, webmasters tried to fit all of the important elements of the page there. Today it is more about getting the attention of visitors with this area.
• Due to the different types of screens on which we surf the web, scrolling has become commonplace. Through visual instructions, users can immediately recognize that there is more to see further down.
• Keep an eye on user behavior and find out what screen resolutions is most often used. That way you can ensure that the most valuable content is displayed above the fold.