Above the Fold

The phrase ‘above the fold’ comes from the print industry and literally does mean “above the fold”. It describes the section of a classic newspaper which lies above the fold – i.e. the horizontal bend in the newspaper. Generally, this is the first thing a customer will see when a newspaper is on the shelf. This area has traditionally been used to display content designed to make a potential customer curious, tempting him to purchase. This ‘above the fold’ principle has now been transferred to websites, where it also describes the first part of the page to become visible.

On a Web page the point at which users have to scroll down is not constant because many variables can affect the way a page displays. The size of a device's display, for example, changes what content appears above the fold. Other variables include the end user's choice of browser, browser toolbars, browser custom setting and the operating system (OS) the device is using. Because users engage more with the content above the fold than below the fold, key site functions and content related to business goals should appear at the top of the Web page. To understand how to work with “the fold, ” a Web designer should keep in mind the average screen sizes being used by a particular site's audience or explore responsive design techniques, an approach to Web page creation that makes use of flexible layouts, flexible images and cascading style sheet (CSS) media queries.

A 2006 study by Jakob Nielsen found that 77% of visitors to a website do not scroll, and therefore only see the portion of the website that is above the fold. There has been considerable controversy about this finding with other broad studies finding the 76% of visitors scrolled vertically to some extent and 22% of visitors scroll to the bottom of the webpage. In a more recent article by Amy Schade and NNgroup it is stated that there is a 84% average difference in how users treat the content above and below the fold, there is a big dropoff in attention below the fold. Most web design advice available today encourages designers to place important information at the top of the website, but also to prioritize usability and design. Nevertheless, many web advertising companies require ads be placed above the fold. Marketing research done by Google shows that the viewability of adverts is affected by its position in relation to the fold as there is a significant drop-off below the fold. Each company tends to use their own definition of the fold. The BlogHer advertising network, for example, defines the fold as the top 768 pixels of the page. The FoodieBlogRoll advertising network defines the fold as the top 1000 pixels.

A search engine result is said to be above the fold when it appears on the first page of search results and doesn't require scrolling to view. Search engine users are less likely to click on results that are "below the fold" (require scrolling). Where the fold appears depends upon the user's window size and screen resolution, but it is common practice to designate the fold as residing between positions 5 and 6. The second and subsequent pages exhibit dramatically lower performance than the first page, and the effects of the fold become negligible on these pages.

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.

Above the Fold - Do People Scroll - Yes!!
Despite its ever-changing position, the idea of "the fold" is important to keep in mind. The amount of space above the fold is different for each device and screen size, but it nevertheless merits careful thought. First and foremost, your content must be in an order that works, and the only way to determine that is through testing and iteration. Slavishly squeezing everything of importance into the top 700 pixels of the page is not a formula for success. The job of the above-the-fold content is to engage people enough to get them to take some action—something other, that is, than clicking the back button. The desired action might be clicking a button or filling in a form, but it can just as well be scrolling down to read the rest of the page. People do scroll, however, if they are interested in your content. Landing pages get the most testing of any type of web page. They have a simple metric that is easy to measure: the percentage of visitors who respond to the call to action. Many experiments have been done on every aspect of calls to action. Often, they show an advantage to being above the fold. In some tests, however, such as the one shown in the figure below, designs with calls to action well below the fold can do much better. It all depends on your content.

source: Webvanta

In this case, we’d guess that people didn’t feel confident enough in their interest to fill out the form when first viewing the page, but after reading down the page, they became motivated. Ultimately, the lesson here is that to reach an optimal design, you can’t entirely trust your instincts, or anyone else’s. You must run experiments with various alternatives, and let the real world of visitors’ behavior guide your decisions. Don’t hesitate to run experiments that test things contrary to conventional wisdom—that’s where breakthroughs often come from.

Above the Fold Webdesign - Focus on Usability
With the rise of mobile and tablet devices and the continued increase in desktop screen sizes, the fold has become increasingly inconsistent. Web designers simply cannot rely on a general rule of the location of the fold, as it can vary widely from user to use case.

source: Brolik

As you can see from the above graph, there is a wide discrepancy in screen resolutions. The vast majority of screen heights are in the 768-1080px range, while phones and tablets differ even more. The location of the fold is dependent on a wide variety of variables including screen size, screen resolution, browser size, and responsive design techniques, among many other factors. Therefore, it is impossible to pin down the location of the fold and it is important to focus on the rules of good usability rather than on a strict guide of where the fold is. Paying attention to the fold as a web designer is about making the website as usable as possible. The portion of the website that is above the fold is still the most valuable real estate on a website and the user experience should reflect that. Important brand imagery and messaging, site navigation, any important call to actions, and an intro or preview of the information on the page should be above the fold. But, it is crucial to have a good balance between this concept and the basics of good usability. Do not try to jam every piece of content above the fold. Group your pieces of content together into manageable chunks and spread them out with proper hierarchy and whitespace to promote easy skimming and scanning.

Above Or Below The Fold - Call To Action
One of the myths about above the fold designs is it is always best practice to have a Call To Action (CTA) clearly viewed instantly. This is, like much related to the topic, an over-simplification of the concept. Put simply, the call to action should be placed in a position whereby the visitor has been most persuaded to act upon it. Where to put the call to actions depends on several factors, most consequentially:

• Certain Visitors: Certain visitors are those who are likely to react to the call to action as they have largely made their mind up before visiting the site. This is where known brands have an advantage, as there is little for the “certain visitor” to learn about a product or service. In these cases, placing a call to action above the fold is only a matter of convenience.
• Uncertain visitors that are familiar with your product – or the proposition is simple: For uncertain visitors that understand the call to action simply or that have some knowledge of the product or service, placing the call to action above the fold is generally best practice for much the same reasons as those listed above, although informative content is also important.
• Uncertain visitors that are presented with a complex proposition:For uncertain visitors that are presented with a complex proposition, such as a product or service that isn’t obviously beneficial to them, placing the call to action above the fold will not suffice. What is required is a more in-depth explanation of why your call to action should be acted upon. In fact, placing your call to action up front can appear a little pushy.

Above the Fold Best Practices
Consider the three-part perspective below when it comes to approaching the “above the fold” issue.

• The "Fold" is Real but not that Real: The “fold” as a guiding design principle does exist and is important, but not in the way that many think it does. When designing a website, you do need to make sure that you design for "above the fold," but only in the sense that you need to make sure that whatever is up there is convincing enough to keep the user on the site, and encourages them to continue exploring by scrolling or clicking on what you provide them with. There are some that take this a little too far by insisting that the most important elements get displayed first, citing that the user needs to see it immediately — although this is only partially true. Users do need to see relevant content that appeals to them, or affirms that they are in the right place, but they don’t need to see the specific thing they are looking for right off the bat — that’s what good navigation is for.
• Cramming Content 'Above the Fold' does more Harm than Good: By putting all of the things you think your user wants to see “above the fold," you are actually doing more harm than good. You can affect how the user perceives your website with the combination of a few important design principles like color, proximity, and size, which can help them understand it in a clear, concise, and convincing way according to things we know about human interaction and design. For instance, if a user sees a page on a website that has a message saying "Do you want to learn more?" accompanied by a large distinctly colored button that says "Learn More," they will know what they need to do. That’s because instructions were presented in a clear, concise, and convincing way with the use of color (the button), proximity (the fact that the message and button were the only thing on the page) and size (the message was large enough to be seen and the button was large enough to click on). But what if there were 5 or even 10 messages just like that in the same space? Does the user now know which big red button to click on? Is the messaging clear enough to have the user feel confident enough about which button to click? You see the problem.
• No, Carousals are Not the Answer: Some web designers think they can sidestep these issues with a carousel or slider — a tactic that allows them to show messages scrolling or changing "above the fold." But in most cases, this approach just introduces a whole new batch of usability problems. If you show the user a message, and then take it away from them to show them another, how do they know which is more important? Did they have enough time to read the first message? How long does it take them to realize the message changed before reading the new message — and then a third one…. Based on these principles, it’s fair to say that in modern web design, sliders and carousels are synonymous with frustrating user experiences, and should be used sparingly — ideally "below the fold."

See Also

• Below the Fold
• Responsive Web Design

Further Reading

• The “above the fold” myth Chuck Pearson
• Designing ‘Above the Fold’ Necessary? Drew Coffin
• Above or Below the Fold: The Great Debate! UX Insights