What is "The Fold" in a Responsive Design?

One of the time-honored guidelines in web design is to keep the most important content "above the fold". Originally used to refer to the upper half of a newspaper page, the term came to mean "the part of the page visible without scrolling".

But just where is the fold? For computers made in the past several years, 1280 × 768 is the smallest common resolution. A full-screen browser window on such a computer is about 700 pixels high, depending on browser toolbars, etc.

On my 27" iMac, it’s about 1200 pixels high. But if you’re going to plan for the fold, you have to plan for the smallest common screen—thus the 700 pixel guideline.

The Responsive Fold

The central idea of responsive design is that there is no fixed layout, and content reflows to a screen of any size.

In this environment, does it have any meaning to talk about "the fold"?

The "fold" is in an entirely different place on a phone and a tablet—and, for that matter, on an iPhone vs. an Android phone, or one Android phone vs. another, or a tablet in landscape orientation vs. portrait orientation.

Nevertheless, the concept of "content that is visible on initial page load" is still meaningful. It is just that now you need to consider the "fold" separately for different kinds of devices.

The image on the left shows the desktop site with the "fold" at 700px; above is how the site appears on an iPhone 5.

You don’t need to put all important content above the fold. This part of the page, however, creates a visitor’s first impression, so it deserves special attention.

Do People Scroll? Yes!

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, 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 below, designs with calls to action well below the fold can do much better. It all depends on your content.

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.

The Fold is Real, But Complicated

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.

For More Info

The KISSmetrics blog post, Why “The Fold” Is A Myth – And Where To Actually Put Your Calls To Action gives a number of interesting examples of call-to-action placement.

ContentVerve offers a free ebook, 7 Universal Conversion Optimization Principles, with 17 case studies of split tests of landing pages. Most of the tests, while fascinating, don’t relate to positioning above or below the fold, but one does and is quoted above.

Life Above and Beyond the Fold, from Moz.com, has a good discussion of scrolling issues, as well as practical tips about working with varying mobile device resolutions.