Above The Fold Content Checklist & 51 examples

Mastering the above the fold element is vital to design, seo and conversions.

Learn how to improve your above the fold elements with these examples and checklist.

Or download the guide NOW and continue reading.

The term “above the fold” derives from the top part of newspapers; when a newspaper was folded on a newspaper stand the most important stories and headlines appeared at the top of the paper.

Above the fold is basically all the content that will be visible without scrolling down into other parts of a web page.

We can say that everything from top left corner to bottom right corner belongs to Above-the-Fold area.

This includes header, footer, navigation bar, logo, images, videos, text boxes, buttons, links, menus and forms.

There are hundreds of different devices and screen dimensions; desktops, laptops, tablets and phones.

The most common screen resolution is 1920 x 1080 pixels which is typically a laptop or desktop computer.

However with over 63% of Google traffic coming from mobile phones, designers need to design responsively to accomodate all screen sizes.

I’m currently using the iPhone 7 Plus with dimensions of 414 x 736 pixels but there 28 other iPhone models all with different dimensions.

And there are another 50 plus mobile phone brands each with multiple models and different screen sizes.

From July 2019, Google started using mobile first index ranking for websites.

They use the mobile version of your page content for ranking.

https://developers.google.com/search/mobile-sites/mobile-first-indexing

Whilst this guide is technical in nature, you can do a simple above the fold check. 

Enter the page URL into your mobile phone browser and DO NOT SCROLL.

1. Can you read the page title or header of the page?
2. Can you read the first sentence of your page ?
3. Is there a clear benefit to scroll down the page ?

If you answer NO to any of these questions, then you could have a problem with click through rates, your rankings and users hitting the back button.

From a technical perspective these elements need to load first and fast.

For further information about above the fold elements, please refer to Google’s UX Playbook guides.

You might get lucky choosing a theme or template for your website but in most cases you are going to have to customise your web page layouts to ensure important elements appear above the fold.

Tools such as Figma, Draftium and Sketch have been embraced by UX designers and developers to mockup or wireframe prototypes of web pages before they move into production.

Whilst this is an expensive process, consider the traffic value of ranking organically on page 1.

Most people are impatient and use the content above the fold as a quick check “I’m on the right page” or “this page may answer my question“.

According to CrazyEgg, this is the 15 second rule; if you’ve not capture the user’s attention quickly they will leave the page and your bounce rate will soar.

So the right content above the fold can encourage user to scroll and skim down the rest of the page where they can read, watch or take action.

Going as far back as 2012, Google wrote “users want to see content right away” and “If you click on a website and the part of the website you see first either doesn’t have a lot of visible content above-the-fold or dedicates a large fraction of the site’s initial screen real estate to ads, that’s not a very good user experience.

Such sites may not rank as highly going forward”.

I have randomly chosen websites to critique home pages, category, product, service and blog post pages to provide you with good and bad examples of above the fold content on a mobile device.

I have used the checklist against each page for you to learn from these examples.

Summary

Use the checklist to ensure these 3 main content elements appear above the fold to help improve rankings, click through rates and the user experience.