What Is Above The Fold?

Date First Published: 18th December 2022

Topic: Web Design & Development

Subtopic: Web Design

Article Type: Computer Terms & Definitions

Difficulty Level: 4/10

Learn more about what above the fold is in this article.

Above the fold describes the upper part of a webpage that a visitor sees before scrolling down. The 'fold' is where the browser window ends, but the rest of the webpage can be viewed by scrolling down. The term 'above the fold' comes from the time when newspapers were sold, displayed on newsstands, and folded in half so that only the top half of the page could be seen and the headlines and the imagery that appeared above the fold was most visible. As web design evolved in the 1990s and content started to move online, the word 'above the fold' began to be used in web design.

Above the fold content should not be too distracting or overwhelming for visitors. If there is too much going on at the top of the webpage, such as lots of popups, videos, images, text, and sales banners cramped at the top, visitors might get overwhelmed and bounce off the website. Also, it is not recommended to try and fit everything above the fold as the goal is to put the best content above the fold, which could be the content that grabs the attention of visitors the most, not all of the content.

Importance

Above the fold is important to consider because it is the first thing that visitors see and pay attention to the most, which is the reason why it should grab visitor's attention. Because it is the most visible, content that appears above the fold should be the content that is most important for visitors and the content that they were looking for so that they don't bounce off the site. It is the most important part of the homepage.

What Is The Above The Fold Size?

There is no single above the fold content size for a website and it is not possible to define a single fold placement. This is because there are a wide variety of monitor sizes, screen resolutions, and sizes of mobile phones and tablets, so the exact location of the fold will constantly vary on different devices. Also, it is even harder to determine the exact location of the fold on mobile devices as users on mobile phones and tablets often browse in portrait mode rather than landscape mode, turning the page design sideways.

Most web designers believe that when determining an average fold placement, 1000 pixels wide and 600 pixels tall is the ideal size. Web analytics services, such as Google Analytics can determine the most common screen dimensions for visitors, which can help to optimise the fold size better for visitors, especially if most visitors use a certain monitor size and screen resolution to visit a webpage.

Examples Of Good Above The Fold Content

It is common for businesses to put a picture, a short and clear description, and a background above the fold. Below are three examples of businesses that have used above the fold content effectively.

Grammarly

Above, see how Grammarly's website has a very clear description along with an obvious button to start using the program free of charge and a video that shows visitors how the program will work.

Wistia

In the screenshot above, Wistia has added a mix of multimedia, including GIFs, videos, a brief description, and two clickable buttons that direct the visitor to the page to try it out for free and find out more details about their plans and pricing about their platform that allows users to create dynamic videos for marketing campaigns.

Mint

In the screenshot above, Mint has kept their above the fold content simple by only including a brief description and buttons that direct the user to a page that allows them to install their apps on iOS and Android and a clickable sign up button. The simple design shows how Mint can help customers and the description clearly shows what Mint does in as few words as possible.

Comments