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 that is below the fold requires a user to scroll past the fold to view.

The fold was once a critical facet of our approach to digital strategy. 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 last few years the fear of scrolling has dissipated among clients, marketers, and especially web designers. The concept almost seems irrelevant today as we lean on analytics and optimization tools to inform design decisions rather than relying on past experience and rare pieces of meaningful research.

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 reset our design intuition and created opportunity for ikonic to create new experiences for our clients and their customers. 

A New Approach

The results from Huge pushed ikonic to commit fully to our current approach to engagement strategy. We no longer rely solely on past research but more importantly on modern anlaytics and optimization tools to inform us on real opportunities for improvement. 

This new approach has lead our designers to a new concept of the fold which includes each horizontal section of a page that becomes visible to a user as they scroll. 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 interaction.

Share This Post