Does the Fold Matter?

Neil McKay

Yes, it does! If you aren’t paying the “fold” careful attention, it could be losing you money by severely reducing the number of visitors you convert into customers.

Don’t expect website users to scroll down to the bottom of your webpage to do or find what you are selling. They are too busy. Their eyes will generally remain above the fold – that area of a website that is in immediate view.

If they can’t see what they want, they’ll generally leave quite quickly and you’ll lose them and their money.

Aggregate heatmap showing  57,453 eye-tracking fixations across a wide range of pages, excluding search and search results pages. Red indicates where users looked the most; yellow where they looked less. White areas got virtually no looks. The top black stripe indicates the page fold in the study; subsequent black stripes represent each additional screen after scrolling. (Nielsen Norman Group)

In fact, 80% of all content placed above the fold catches our attention – so you have to make that 80% information meaningful because you want your users to read and act on it!

Remember that percentage and think of it in terms of website ratio 80:20 – 80% important, 20% other stuff that you deem less important (and you should be pretty certain your users think so too).

Look at this website outline layout

Website users treat everything beneath the fold with less interest and give it lower priority, simply because they can’t see it.

Think for a minute about broadsheet newspapers. Where are the most important stories? Above the fold in the paper! So if you have something important to say, it should be within immediate view.

In practical terms, the fold on a webpage varies according to the device, screen resolution and monitor size (this includes LCDs on smartphones and tablets), and the number of toolbars open in the browser.

Importantly, you should consider the most common screen resolutions for your visitors and how the fold will dictate the effectiveness of your website.

The following table lists the most common screen resolutions – but be aware that this is an evolving area as new devices appear and users change their habits.

Resolution Display Usage Screen size/type
1366×76816:919.1%14-inch Notebook/15.6-inch Laptop/18.5-inch monitor
1920×108016:99.4%21.5-inch monitor/23-inch monitor/1080p TV
1280×8008:58.5%14-inch Notebook
320×5689:166.4%4-inch iPhone 5
1440×9008:55.7%19-inch monitor
1280×10245:45.5%19-inch monitor
320×4802:35.2%3.5-inch iPhone
1600×90016:94.6%20-inch monitor
768×10243:44.5%9.7-inch iPad
1024×7684:33.9%15-inch monitor
1680×10508:52.8%22-inch monitor
360×6409:162.3%Android smartphone
1920×12008:51.7%24-inch monitor
720×12809:161.6%4.8-inch Galaxy S (and other similar size Android phones)
480×8003:51.1%Android smartphone
1360×76816:90.9%720p TV
1280×72016:90.9%720p TV

Designing the fold out of the website

Humans generally have binocular, wide-angle vision, which we put to most use when we are walking around.

But when we look at websites on a device, we view them generally in landscape mode, focusing on what we see presented on a rectangular screen – that includes your tablet PC and in some cases your smartphone (because there is a tendency to turn these on their side to get a wider, bigger and clear view of what we’re looking at).

Therefore, our brain subconsciously tells us what we can’t see isn’t important; it’s out of our field of vision and that’s that.

Argos technology catalogue homepage. Does it work for you? Does it encourage you to scroll?

Less Is More

Less is more is a good way to think about it. A webpage full of what the user perceives to be useless or irrelevant information won’t encourage them to scroll down to find something more interesting further down or on another page.

Indeed, the content above the fold helps the user to decide to continue scrolling, navigate to another page, try another site, or abandon the task altogether.

Okay, as screens get smaller, we scroll more because in most situations we have to. But users don’t scroll because they like doing it.

Today, we tackle website design by applying responsive design so that the website will work equally well on any device, which means we need to think carefully about fold and where it will fall – note the above screen resolution table – because resolution and device type will define where the fold falls.

Rethink the Design

In many ways we should design the fold out of the design, if you will! So pay attention to those designs your website designers are showing you. Is everything you want on the page easy to see, impactful and readable? Is there a fold? If there is (and it’s likely there will be) – it should only be there if there really is a practical need for it.

But, what information is hidden below it? If it’s important, look again at the design. Can you rethink the design for your users so that fold issues become less and less?

So for the time being, keep on treating fold with high importance. Its definition will continue to evolve as devices/user habits change but the principles of applying that 80:20 rule will continue for some time I believe.

And, continue to place your most important information above the fold (wherever the fold is) and that should motivate your visitors to act, which ultimately should make you more money.