above the fold

Above the fold refers the area of an email or web page visible without scrolling. It is a printing term used to describe the top of a newspaper. This is literally the area where the newspaper is folded in half.  But in web designing or digital marketing, “above the fold” refers to upper area of web page which is visible to you without scrolling. The good above the field means improved user experience and quality content.

The upper half a newspaper or magazine's cover is called the "fold". This is where interesting stories and photos are often found. Newspapers are normally displayed folded so the upper half is not visible. The center portion of the page is hidden. While this might be acceptable for regular newsprint, magazines can be read on a larger scale. It is important that the cover of a magazine contains all images. The top and bottom must always be visible.

The same principles of what should be above the fold apply to website design. An image-scrolling feature is often included in website design to provide attractive and simple navigation. This allows visitors to scroll through images in a page without having stop reading the page that they are currently on. Images that need to move are usually placed at or near the top of the screen.

Above the Fold Approaches and its technique

Reader’s Impression

Your website's content should contain some information about the pages below. This will encourage them to scroll. The content at the top of your website should not only provide an overview of what is expected, but also spark curiosity.


It is possible to get the reader to scroll by referring to the next page. The page organization and navigation will be clear for the user if there are arrows that point downwards or teasers that announce the next paragraph.

Table of Contents

To guide the reader to the content below, you can also add a table of contents to the top of your page. One-Pager sites use their navigation to map multiple contents at the top, and then guide users to the desired location by pushing a button.

Overlaying Content

Content that is clearly visible extends beyond the visible part of the webpage. This tells the user that additional content can be found by scrolling. The chosen content should inspire curiosity in the reader. To make it easier for users to scroll, many websites offer multiple columns that are offset.


Areas to Focus While Creating Above the Fold


Clickmaps are heatmaps that show clicks as well as mouse movements. While it's more difficult to interpret the data given that so many users move their mouse without thinking, there are some useful conclusions. You can use clickmaps and heat-to identify which buttons a user expects, as well as any incorrectly assumed buttons.

Scroll Movement

Scroll movements track how far users scroll down a page and how often they do it. Site operators can determine whether content needs to be optimized or placed higher up on the page by using a scroll movement.

Eye Focus

Although eye-tracking is complex, it can provide more reliable evidence than heatmaps/scrollmaps. They are less discriminating and track user behavior.

Difference Between Above the Fold and Below the Fold

As per the most web designers, the website is divided into two part which can be considered as “above the fold” and “below the fold”. The page immediately after the call is made visible above the fold.

These two areas play an essential role in web page design and how pages communicate. Many marketers and designers believe that content at the top of the page has more visibility than content below it. This is because most users don't scroll to the bottom. This is why they try to place important content and page elements as high as possible on a page.

Every website is unique. Each site has its own criteria and priorities. While there are some general rules for design and usability, it's difficult to decide what content is appropriate for where. While it is still important to place important content higher, many people suggest that longer sites and one-pagers are equally effective on multiple websites. There is no definitive way to identify which content belongs.

An optimization strategy is a combination of website analysis and measurement. It then optimizes in recurring cycles. This allows the website owner to analyze the content and structure a page, formulate operating hypotheses, modify it, and then test which variant performs best. This procedure is equally important when it comes to content above and beneath the fold.

Above the Fold in SEO

Successful SEO also relies on the above-the fold area. Google is committed both to user-friendliness and high quality content. The results of this search engine are often negative and display the result above the fold.

The first impression of a website is often what determines whether the user visits the site again or not. Google also considers the importance of content and design above this fold. There are no general rules about how content above the fold should look.


To conclude, it is important for websites to display images only when they are relevant to the content on that page. Images should be placed above the fold, i.e., they should appear immediately accessible to a visitor. Images are best displayed above the fold at approximately 100 pixels per picture height. This ensures that images do not take up significant bandwidth and are best suited for mobile devices. In addition, while having an image above the fold allows users to instantly access specific content, using large images in the Top Bar can slow down navigation.