Above the fold

What is above the fold?

Above the fold content is the part of a web page shown before scrolling. Any content you'd need to scroll down to see, would be considered 'below the fold'. The 'fold' is where the browser window ends, but the content continues underneath.

Where did "above the fold" come from?

In the early days of publishing, ‘above the fold’ was a term used for content that appeared on the top half of the front page of a newspaper. When newspapers were displayed on a newsstand, the headlines and lead stories that appeared above the fold were the most visible. Catchy headlines and vivid imagery were commonly used to attract readers’ attention, convincing them to buy the paper.

As publishers moved their businesses online and web design evolved in the 1990’s, the term continued to stick. Today, the fold no longer refers to an actual fold in a newspaper, but the bottom of a browser window or approximately 600 pixels from the top of the page.

Why is above the fold important?

Content layout and placement is important because content that appears above the fold is what is first visible when a user loads the page. It is prime real estate that gets the most attention from users.

Because of its high visibility, the content that you place above the fold should be the content that is most important to achieving your business goals. The content should immediately grab the user’s attention and present them with the content that they are looking for so that they don’t bounce and visit another site.

When it comes to advertising, placing ads above the fold improves their visibility and generates more ad revenue than ads that are placed in less visible locations. For B2B websites, placing key call-to-actions (CTAs) and other important information about product differentiation above the fold on the homepage or other landing pages usually leads to higher conversion rates.

How is above the fold measured?

It is impossible to define a single fold placement for a website. The precise location of the fold differs because of the variety of monitor sizes (both desktops and laptops), screen resolutions, browser plugins and sizes of various phones and tablets.

When determining an average fold placement, most web designers agree that the fold line is at approximately 1,000 pixels wide and 600 pixels tall.

This is the best-case scenario for the most common monitor/browser combination of 1024x786 pixels, with the browser window maximized and no installed toolbars at the top pushing the content down.

Your website’s analytics program should be able to tell you which are the most common screen dimensions for your visitors. While 1024x768 has traditionally been the most common, new dimensions are rising in popularity such as 320x568 and 360x640.

Considerations for mobile

The increasing usage of mobile devices for web browsing further complicates the concept of optimizing web design for above the fold.

Mobile devices offer a large variety of screen sizes. In addition, users on phones generally browse in portrait mode rather than in landscape mode, turning the traditional page design sideways.

With so many people accessing web pages across such a variety of devices, current web design practices entail using responsive design: making use of flexible layouts, images and cascading style sheets. In responsive design, there is no fixed layout for a page, and content reflows to a screen of any size. Responsive web pages react or “respond” to the environment in which they are consumed or browsed.

While the important content still needs to be higher on the page, nowadays, the pages should be designed to encourage scrolling more so that they don’t miss important content.

SEO considerations

Although it is often a good practice to place ads above the fold so that their viewability is maximized, going overboard with ads can have negative consequences as well.

Google has released several algorithm updates over the years that penalize websites that place so many ads above the fold to the point of forcing the actual content of the page below the fold. Sites that go overboard in placing tons of ads at the top of the page provide a bad user experience, and doing so can result in a steep reduction in free SEO traffic.

Optimizing for ad viewability requires balance, so that both the user experience and ad viewability are maximized.

Optimizing content & ad placement

Optimizing the placement of content and ads on a site is an iterative process that involves data analysis, testing and experimentation.

A good starting point for page layout optimization is to look at your analytics program to determine the demographics (browsers, screen sizes, device type) of your users as well as their actual behavior (scroll depth, bounce rate, engagement rate). This analysis will provide you with a set of baseline metrics with how your users are interacting with your site.

Once an initial site audit is complete, the next step is hypothesis generation and testing. You can come up with ideas for content and ad placements, use A/B testing software to move elements around on a page and test which one performs the best.

Once you have that data in hand, you can go back to your analytics data and generate new hypothesis for how to optimize your site.