Has “Above the Fold” Gone the Way of Phone Books?

Close your eyes. Think back to the time of simple web pages. A time before responsive design, and everyone had their mobile phones practically glued to the palms of their hands.

Before people scrolled down pages, if AOL would even allow it, web analytics showed us that people were less likely to engage with content below the “fold” of standard desktop devices. Because of this, designers would recommend that important content and calls to action all be placed “above the fold.” Now, the phrases “above the fold” and “below the fold” are as foreign to the digital world as the phrases “VHS tape” and “landline” are to my children.


What the Term “Above the Fold” Means

Above the fold” is a term used in digital design that refers to the content displayed on the upper half of the website, visible before you scroll down the page. Its origins are from what you could see on the front page of print newspapers– even when the paper was folded in half.

Audience eyes will run down a website on all screen resolutions as long as there is a good design flow. Below are a few key points to consider, as well as a few recommendations for where designers should focus their efforts in the future.


    Above-the-Fold Considerations

  1. 1. There Are Too Many Folds.

    With so many screen sizes in use for phones, tablets, desktops, and wall monitors, the fold is different on each one. At this point, there are literally 30+ screen sizes used in offices. Look at your Google Analytics account; the number of screen sizes used to view your content on a daily basis will surprise you.

  2. 2. Don’t Assume.

    Just because you place an important element at the top of the page doesn’t necessarily mean that your audience saw it. We are a culture of scrollers (just look at the way our thumb joints are starting to protrude from our hands).

  3. 3. Free Your Mind, Man.

    It’s not them, it’s you. As an interactive web designer, you need to change the way you think about getting your audience to engage with the CTA the way you want them to. Push yourself to design your layout so they consume your content and click on your calls to action, because just putting it at the top of the page won’t work.

  4. 4. Don’t Expect Too Much.

    A common trend for blogs is to immediately put the social sharing buttons at the top of the article, directly below the headline and hero image. To be honest, I’ve never read a title and thought to immediately share the content before reading it. A share is a representation of the user, and for me, I need to read the entire piece of content before I reach a level of affinity. Users are more likely to share something on social media if the share icons are at the end of the piece, which often times are way below the fold. Another solid design option is having sticky social icons that follow you, as Medium does. This way, at any point they’re right there for you to conveniently click.

  5. 5. Less Will Lead to More.

    You don’t need to cram everything into the top of a web page. Whitespace is your website’s friend. Consider leading with a full-width image and fewer elements on the top of the page. It will encourage audiences to scroll, and become more invested in your content.

  6. 6. Sticky is Better Than Fixed.

    If you have important elements that must always be easily accessible, such as cart options and booking flows, use the sticky navigation to house these CTAs. They don’t need to be a big button or section of real estate above the fold, but keep them with your audiences so that whenever they’re ready to check out, the cart is right there on their screens.


Where Designers Should Focus Their Attention

Function Over Fashion

Even more important than the way a site looks is the way it performs. Sites with too high a load speed will never be seen in the SERPs, and will face even lower rankings by social media platforms like Facebook. Designers should partner with front-end developers to make sure that as many scripts as possible are bundled to improve site speed. Take the time to make your web pages Accelerated Mobile Pages (AMP) certified by Google.

Bigger Screen Resolutions

Not only should you be designing sites from a mobile-first approach as they work their way to standard desktop dimensions, but you also should be focusing on how the designs look on much bigger screens. It’s important that when audiences are looking at the site on a huge monitor—in a boardroom, for example—that there isn’t too much forced border on the left and right side of the screen, and that the font size is big enough for people to read at the far side of the table.

The Use of Iconography

Audiences don’t like the thrill of the hunt as much as they used to. Because of this, designers should focus on being as clear as possible about what audiences will find when clicking on digital elements. Icons should clearly relay that clicking here leads to a video, an article, an infographic, a slideshow or gallery, etc. We have also seen some strong metrics indicating that displaying estimations of how many minutes it’ll take to read an article has increased click-through rate.

It’s a big bad world, and right now there’s more content on the web than the search engines will ever be able to crawl. So, relax about the fold and focus on fast sites that serve strong content experiences. I’m not saying to throw years of experience and best practices to the wind, but you shouldn’t worry that placing content lower on the page will do harm to your metrics. Have confidence. Serve comfortable amounts of whitespace and let the design compel your audiences to scroll and migrate throughout your site.

Keep reading in Design & Development