When discussing web design, I often hear clients refer to “the fold.” Generally there is some important element that they would like displayed prominently on a page, and they will request that the element is placed “above the fold.” As a frontend developer experienced in responsive web design, knowing that viewpoint sizes vary greatly, this concept of the fold is difficult to grasp. When we say “the fold”, what exactly are we referring to? How can we respectfully share our expertise with clients to arrive at a common understanding of how the fold applies to modern web design?
What is “the fold”?
The term “above the fold” originated in newspaper print design and refers to the content that is visible on the front page of the newspaper when it is folded. Usually this section of the page includes an intriguing headline accompanied by a large image. The goal of this content is to entice readers to pick up the paper and open it.
On the web, “the fold” similarly refers to the content visible on the page without scrolling. People who believe in “the digital fold” will say that the intention is the same—placing compelling content “above the fold” encourages visitors to read on and become more engaged with the website.
The Bottom Line
Content should be prioritized such that “above the fold” content demonstrates immediate value to the visitor, reaffirming their decision to visit the page.
That is not to say that all content, even the most important content must be placed above the fold. Simply that the first content which is displayed to the user should give them confidence that the page they are visiting contains relevant information to the content which they are seeking.
The Digital Fold
The main problem with the digital fold is that it is inconsistent. When a newspaper designer creates a layout for the front page, they know exactly how that content will appear to the reader—the medium is fixed. The printed broadsheet will always be 749mm by 597mm, and those physical dimensions will never change. This assumption cannot be made on the web. On the web, the fold will be very different on a hand-held device in landscape orientation when compared to an ultrawide desktop monitor in portrait orientation. A browser window may cover the entire screen, or just a portion of the screen. Simply put, the digital fold is unpredictable. With all of these various viewports (browser window sizes) being used to display the same content, it is impractical to believe that content which appears “above the fold” can be controlled.
Note: Modern browsers support viewport units which can allow designs to be created relative to the “above the fold” section. However, the usability of such a design may be questionable when presented within different contexts (viewports).
It’s easy to say “there is no fold.” Afterall, there is no fold. However, true as that may be, stating that fact does nothing to address very real concerns that the first content a user sees on a page is a determining factor in their assessment of the page’s credibility.
It is important to understand that everybody scrolls, as scrolling is a natural affordance of a webpage. However, the longer it takes a user to locate relevant content on the page, the more likely they are to abandon the page. For this reason, when conversations around “above the fold” content arise, it is important to steer the conversation towards a content planning and prioritization exercise rather than towards a design discussion, as the act of prioritizing content such that it is likely to quickly answer a visitor’s question will produce better results than attempting to perfect above the fold content/design across every viewport size.