As Above So Below The Fold

In case you forgot..."the fold" is an invisible line on a webpage drawn at the bottom edge of the browser window. Content which is above the fold does not require scrolling to view. Content which is below the fold requires a user to scroll past the fold to view.

Its funny how much we used to discus the fold among design and marketing teams. Past experience informed us that above-the-fold content yielded more interaction, prompting strict design restraints that often led to top-heavy pages. But over the past couple years the fear of scrolling has dissipated among clients, marketers, and especially designers. The concept almost seems irrelevant as analytics and optimization tools have become so powerful and largely replaced this type of presumptive thinking.

Adopting Modern Web Design Standards

New standards for modern web design have played an important role in freeing the scroll bar. As HTML5 standards, responsive design, and mobile-first were adopted, it became much easier to develop dynamic experiences across devices and screen sizes. Developers rapidly adopted new workflows, pushing out some of the earliest deep-scroll and single-page websites as far back as 2011. By 2013 it wasn't a niche anymore and every creative team - some simply following a trend - were building with modern web standards.

The Results Are In...

According to Chartbeat, "66% of attention on a normal media page is spent below the fold." Other sources report as low as 20% of a user's time is spent below the fold, however, those studies rarely provide context critical to understanding their results. Our, "Design intuition" tells us that if a website is designed with cues that suggest more information lies below the fold, then a user will most definitely scroll down to view that information. Likewise, if the page is designed to provide critical information above the fold then we assume users will be less likely to scroll any further.

In December, 2014, Huge tested a similar theory using four variations of the same design:

  •  A control image, with no visual cues to scroll below the fold.
  •  A scroll arrow that cues users to scroll down.
  •  A short image, where users had to scroll to see above-the-fold content in entirety.
  •  An animated image with a moving element to lead viewers below the fold.

The results were clear, and Huge learned that not only did participants almost always scroll down the page, they did so regardless of how they were cued to do so. These findings even make our "Design intuition" look conservative in approach. And the results from Huge influenced both our marketing and design teams.

A New Approach

Our designers have expanded on the concept of the fold to include each additional section of a page as it becomes unveiled to a user through scrolling. We like to think of a web page as a storyboard, revealing more of the narrative as the user scrolls through each frame or, "fold". The first fold on the screen still plays a critical role in setting up context and hierarchy but each fold revealed thereafter plays an important role informing the next user interaction, be it a click, a swipe, or another scroll.