What Does Above The Fold Mean? And Why Is It Important?

Website Tips
Tyler Pigott
BY
Tyler Pigott
ON
06.03.2019

increaselandingpageconversion

f we go back to the early days of publishing, we get the term “above the fold” as a term used for content that appeared on the top half of the front page of a newspaper. Content above the fold appeared to readers as the most visible, with catchy headlines and vivid imagery commonly used to attract readers’ attention hoping that as they walked by the newsstand it would convince them to buy a paper.

Now fast forward to the transition from paper to digital as those same publishers moved their businesses from print to online. As web design has evolved since the early 1990’s, the term continued to stick. So what does above the fold mean for your homepage? And does it still matter in 2019?

Why Is Above The Fold Important To My Website?

Today, the fold no longer refers to an actual fold in a newspaper, instead it refers to the content that is loaded first when visiting a website, grabbing your attention and pulling you in.

In the world of web design, where you’re worried about content layout and placement because content that appears above the fold is what is first visible when the website visitor loads the page. That content is the prime real estate that gets most of the attention from visitors to your site and the user experience should reflect that. Jakob Nielsen estimates that, “…web users spend 80% of their time looking at information above the page fold. Although users are scrolling more today, they still only allocate only 20% of their attention below the fold.”

52d960f0bb5a25.99258720.jpg

First you’ve got to ask yourself, what is the most important content to help me achieve my business goals?

Once you’ve answered that question, you know what to place in that high visibility. The content should immediately grab the user’s attention and present them with the content that they are looking for so that they don’t bounce and visit another site.

Quick Tips to Increase Conversion Rates

  • Hero Image: Don't get too ethereal here. What do your happy customers look like? What are they experiencing? Display an image that evokes a positive aspiration.
  • Header Copy: Don't forfeit clarity for being clever. If you confuse, you lose. Stick to a simple message that displays exactly what you do or empathizes with the core challenge they're facing.
  • Call to action (CTA): Your primary CTA should be obvious and placed in the top right corner of the navigation AND in the hero section.
  • Tagline: Pair the clear header copy with a one or two-sentence line that positions your brand to help solve your customer's problem.
  • Navigation: Less is more. Great website design guides the user exactly where you want them to go. Too many options can result in decision fatigue.
  • Load Speed: Your homepage load time could be causing visitors to bounce!

increase leads with your website

[Advertising] Placing ads above the fold improves their visibility and generates more ad revenue than ads that are placed in less visible locations.

How Do You Measure “The Fold”?

In short, it is impossible to define exactly where the fold is placed on your website. The exactly location differs because of the variety of monitor screen sizes (desktop and laptop), screen resolutions, browser plugins and sizes of various mobile phones and tablets.

As a rule of thumb, most web designers agree that the fold line is roughly 1000 pixels wide and 600 pixels tall. This is the best estimate from the most common monitor/browser combination of 1024x768 pixels, with the browser window maximized and there are no installed toolbars at the top pushing the content down.

FoldGraph.jpg

If you are curious about how to learn more, check out your website’s analytics program (if you don't have one, Google Analytics is a great place to start) which should be able to tell you which are the most common screen dimensions for your visitors. While the common screen size of 1024x768 has traditionally been the right fit, new dimensions are gaining popularity such as 320x568 and 360x640, all from the rise in mobile viewing of websites.

52d96112ae2b34.33407826.jpg

Mobile Viewing And Responsive Design

Over the past couple of years, using mobile devices for web browsing has increased greatly and that further complicates the concept of optimizing web design for above the fold content.

One challenge is that mobile devices offer a large variety of screen sizes as well as, users on mobile devices mostly browse in portrait mode rather than in landscape mode. Again impacting the size a designer has to display important content.

Optimizely says, “With so many people accessing web pages across such a variety of devices, current web design practices entail using responsive design: making use of flexible layouts, images and cascading style sheets. In responsive design, there is no fixed layout for a page, and content reflows to a screen of any size. Responsive web pages react or “respond” to the environment in which they are consumed or browsed.”

While the important content still needs to be higher on the page, nowadays, the pages should be designed to entice users to scroll so that they don’t miss important content.

The fold will always be around as a concept, but it is a rule that can be changed or modified, especially over time. Since there are so many different devices and screen resolutions to browse websites, the fold differs far too much from user to user to be relied upon regularly. But by making sure to place only the most important elements and content above the fold, you can find a good balance between usability of your site and serving up the right content “Above The Fold.”

For more tips on homepage best practices or how to improve your website speed check out these blogs!

  1. 5 Homepage Best Practices
  2. 13 Ways to Increase Website Speed

Additionally, schedule a free strategy session with our team to talk about how you can improve your homepage experience!