Above The Fold

What Does Above the Fold Mean?

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, and 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 the user loads the page. It is the prime real estate that gets most of the 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.

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 are 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 entice users to scroll 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, and 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.