The Last Word on the Fold

The Last Word on the Fold

There is no fold.” It’s a great little sound bite, and it’s something that the great majority of us in the industry know and agree on. Yet this short statement doesn’t really tell the whole story and many designers don’t look beyond this and instead just blindly follow it; to the detriment of their designs and their clients.

A more accurate statement would be “There is no fold, but don’t make users scroll to find important stuff”. Sure it’s a mouthful but it fixes the main problem that exists in the original statement.

The Last Word on the Fold

What is the Fold?

For those in the know the fold is a well explored concept but to fill out the word count here and bring any newbies up to speed, I’ll explain what the fold is. The concept of ‘The Fold’ like many design principals we use on the web comes from print design, and in this case more specifically newspapers. In newspapers it describes the point on the front (and possibly back) page where a newspaper is commonly folded whilst carried, stored or displayed. Its significance is that it can hide part of a headline or image in such a way that the meaning is either lost or misinterpreted.

Newspaper
Image credit: Newspaper

On the web we coined the same term to signify the point on a website where the browser height hides the remaining lower section of a website on initial page load. So as an example you would find your header always above the fold and the footer below it. Somewhere in the middle you would have a feature or some content that the fold intersects.

The Fold

An Impossible Concept

For years we’ve tried to put constraints on how we design for the web to make our lives easier, ‘The Fold’ is another example of us trying to apply a known quantity in an unknown situation.

It’s possible, if highly improbable, that you would never have two users visit a website with exactly the same browser height. Between multiple resolutions, screens, window sizes and devices the point in which the fold occurs is something we can never predict. Add into this Responsive Web Design where a website’s height is affected by the browser width and you make the difficult most certainly impossible.

This is why it’s now well accepted within the community that the fold does not exist, and this post doesn’t argue with this fact. The idea that you can designate and design around an infinite number of different browser heights is laughable.

But like most things it’s not so black and white.

The Problem

Back in 2011 I wrote the article ‘The Anatomy of an Effective Homepage’ and within this I highlighted that what elements we place above and below the fold still require some consideration, even though we can’t say where on the page this exists.

In response to the article one commenter wrote:

“Good article till I got to the ‘fold’ – there is no fold in digital media…”

This person missed the point. Yes the fold does not exist but an area of a website still exists that can be viewed without the need for scrolling. It’s this area that we still have to try our best to optimise. While we can never judge exactly the height of this area, there are still benefits in placing important elements as high on the screen as possible.

We cannot use the fact that users know how to scroll as an excuse for poor layout and design.

Most commonly these kinds of elements would include promotions, calls to action and unique selling points. All the things that work to make a website convert should be as high up the page as possible. We’re not always able to do this with a limited number of pixels but we have to design a page to follow a hierarchy of importance.

The Exception

But exceptions do occur where the primary actionable element on a page must appear lower down the page. This exists in instances where the user must first follow a specific process prior to continuing. This could be filling in a form prior to clicking a submit button or viewing a table of products in a basket page prior to proceeding to the checkout page.

Tinkering Monkey

In both instances there exists a commonly understood flow of information that the user will need to access or manipulate prior to achieving the goal of that page.

Combating the User Perception of the Fold

Though the vast majority of the population is now web savvy and will happily scroll around a website there are ways we can design against the fold.

Whitespace can be our greatest enemy here. If the bottom of a user’s browser window happens to intersect an area of whitespace it can appear as if no other elements exist below this point. For those users with less web experience they are less likely to scroll past this point. By staggering the cut off point of elements across the page so that different columns never finish at the exact same point you can ensure the user understands there is more information further down the page.

BBC News

The BBC news website does well to stagger the heights of the stories against features in the sidebar to leave few points where a user may think the page has ended at the same point as their browser window.

It’s not an approach I would say you should stress about adhering to, but in those instances where a client is pushing the idea of the fold, or clear data exists to show there is an issue with users scrolling then this is a more positive solution than trying to cram everything in the head of a website.

There is no Fold

So although there is no fold we still have to consider the hierarchy of a website, placing any important elements of our site within a region that is more likely to appear for all users no matter what the screen size. Think of it like this; would you place a logo somewhere a user would need to scroll to view it?

The goal of many websites is to generate a profit, this is done through conversions which are then increased by providing an easy to use website. The easiest to use systems are those which present users with the information they require as quickly and as obviously as possible. It’s for this reason that we can’t simply say that because users scroll we can hide important elements further down the page.

The Good, the Bad and the Ugly

Below are some examples of websites that are designed with or without an understanding of what’s most important on a page.

The Good

Basecamp
Basecamp is just so simple. The colour entry fields end up falling a little down the page but the primary actions of any user sit perfectly in the place where you’d find most primary navigation.

Basecamp

Mailchimp
Mailchimp isn’t a short page but quite easily you get two entries to sign-up high on the page, the first in a position that you could be pretty confident will appear instantly on a range of screen sizes.

Mailchimp

Ronin
Ronin shows us a clear call to action, some snappy information about the product and images of the application too. Then further down the page they move to reinforce the benefits of their app, understanding this information is not strictly needed by the user prior to them proceeding.

Ronin App

The Bad

MonsterBeds
Not only is the shopping basket button so shockingly designed but it’s so far down the page that it’s a surprise anymore manages to buy from this website. Almost every element around the most important action on this page is designed with greater focus.

Monsterbeds

Camera+
This one isn’t awful but could the buy now button be above the video? How about repeating it in the space above the image of the phone as well?

Camera+

Peter Nappi
A really nicely designed website but the product pages would benefit from moving the colour selection, price and add to cart buttons about the text. These elements are integral to the goal of the user and should be as clear to the user as possible.

Peter Nappi

Suck Yeah
This website simply has such a large header that everything is pushed down the page. To make matters worse the breadcrumb and product title take up a whole 200px from the height of the page. The space could be better managed to bring the product information and add to cart button further up the page.

Suck Yeah

The Ugly

Lings Cars
I’m not sure if this is an argument against or for the fold. There’s so much information crammed in the homepage not only at the top of the page but down the whole 13000 pixel height of website. The first occurrence of an email or phone number is small and half way down the page and with a site like this I’m sure many people would rather find any other form of hiring a car than through this website.

Lings Cars

Conclusion

Whether you see the ‘fold’ as existing or not in web page design, it is clear that placing the important elements high on the page and making them clearly visible will increase the probability of your viewers seeing and reaching the things you want them to.

Please share your opinions with us in the comments section below.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.