The Quiet Death of ‘the Fold’

Back in the late 80’s/early 90’s, the record industry had a problem. The CD market was flourishing, but record stores (remember them?) were still mostly configured to display and sell vinyl records in record-shaped ‘buckets’. Store owners were reluctant to invest in refitting their stores for the shorter, deeper CD format.

The record industries’ response was to invent the ‘longbox’– a tall, lightweight cardboard box that contained the classic CD jewelcase and a lot of air, while re-fitting its shape for exactly half the width of a vinyl bucket. Two longboxes fitted nicely side-by-side into a bucket.

Although this was obviously a horrendous waste of cardboard, shelf space and freight volume, the longbox became the industry standard for about 5 years. It stayed that way until somebody noticed it was actually cheaper to simply pay for ‘one-off’ store re-fits than to continue producing these longboxes year after year.

In other words, the record industry bent over backwards to keep the vinyl bucket alive, long after they stopped being truly useful — as much out of habit as anything else.

So, what’s that got to with ‘the fold’?

One of the first things you learn in web design is that you need to put the important bits of your page, such as logos, menus, calls to action, etc. in the most visible places. Traditionally, the top most visible place was a magical land spoken of in reverent tones – the land of above the fold.

In the late 90’s early online marketers and their clients sometimes struggled with many of the new technical ideas in web marketing — impressions, click-thru’s, uniques — but ‘the fold’ was one concept that was easy to understand and explain.

“I don’t care where you put it – as long as it’s above the fold” was a common refrain.

However, in a 2014 ecosytem of screens that may vary between 300px phones to 4k displays, is this whole concept of ‘the fold’ now redundant?

What IS the Fold?

First, let’s clarify what the fold is. I suspect most of you know anyway but in order to avoid any confusion, the term needs to be defined.

The term fold actually arose from the newspaper industry. Since newspapers usually sell folded in two rather than displayed full-size, the upper half of the first page – i.e. the half above the fold is often seen first by the potential buyer.

It didn’t take long to discover that if this top half of the first page contained interesting headlines or photos, sales increased. Because of this, editors would choose to put the most interesting and important stuff in an issue on the first page, above the fold.

Similarly, in Web design it is believed that the topmost part of a page attracts the most eyeballs. Although websites can’t ‘fold’ like paper, the idea of the fold is alive but is more accurately described as to the scroll or above the scroll.

For many years the fold was a dogma in Web design – clients and advertisers made us cram the above the fold space with everything they deemed important. However, fortunately technologies evolve and now this pressure is decreasing simply because the fold has turned into a moving frontier and even if you want, you can’t always follow it.

WHERE is the Fold?

The location of the fold at different resolutions varies drastically. Here is what About.com gives as approximations for some of the most popular resolutions:

• 640 x 480 fold is around 310 pixels down

• 800 x 600 fold is around 430 pixels down

• 1024 x 768 fold is around 600 pixels down

• 1200 x 1024 fold is around 850 pixels down

• 1600 x 1200 fold is around 1030 pixels down

You will notice that some popular resolutions are missing but even without them, it’s obvious that the size of the smallest screen (on this list only, not in real life) is more than 3 times smaller than the size of the largest screen (again, on this list only, not in real life). If you are under pressure from a client to put particular items strictly above the fold, show them this list and explain this simply isn’t possible anymore.

If you are curious to see where the fold for your site in particular at different resolutions is, this tool helps a lot.

Again, these are just approximations and you can’t follow them blindly. What is more, this data is applicable only when your site is viewed at full screen and what makes you sure your users will have their browsers at full screen?

The Fold’s Gone! What’s Next?

When the fold is (almost) gone, the only thing you can do is design foldless pages. This might seem pretty hard but in fact it’s not much different from what most of us have been anyway doing for the last couple of years.

You might be designing foldless pages without being aware of it. Though the recommendations differ depending on what you are designing – corporate pages, magazine site, blog, ecommerce site, here are some tips how to design foldless pages.

If You (or Your Clients) Can’t Live without the Fold, Design for Most Popular Resolutions

The fold is dying but try to communicate this to some of the stubborn clients anyone of us has had! Sometimes it’s easy to convince a client that the fold is ancient history but in other cases they won’t even hear about this.

If you have such clients, one of the compromises you could make is to design your site in such a way that for most popular resolutions (at the moment, this is) the important content is above the fold. With so many screen resolutions, as seen below, this is not an easy task but if you believe the client is always right, there is nothing else to do.

I myself won’t be too keen about following this advice. Rather, if the client is too stubborn to understand the latest developments about the fold, we’ll part ways but I’m perfectly aware that in practice this can’t always happen.

Leave the Logo and the Navigation at the Top

The fold is slowly becoming history but this isn’t a reason to turn your layout upside sown. Fold or no fold, first things first!

This is why you should leave the logo and the navigation at the top. After all, this is the first thing users see from your page on any device and screen resolution.

It’s true that for smaller devices the above the fold area might accommodate only the logo, the menu, and possibly a line or two of the headlines only, but these must be absolutely visible in any case.

Place References

Similarly to logo and navigation, references to longer pieces should also be in the top part of your site. These references could be just the title and a sentence or two, followed by Read More and a hyperlink to the piece itself.

Put Ads at the Bottom/Near Relevant Stuff

It might break your heart that you can’t fill your first 600-1,000 pixels with ads and get rich but actually it might be much better to put ads at the bottom of the page or somewhere else (sidebar, page body near relevant stuff).

I know most of you will recall data from Jacob Nielsen that only 20% of users scroll and my advice may sound like killing your income but actually many Web masters report better conversions when the ads are at the bottom or anywhere near relevant stuff.

The explanation is simple. When your ads are at the bottom or near relevant stuff, they convert better. How’s this so?

For instance, take a look at where our own ads are. The free download box is right after the end of the article. There it won’t be seen by all the random visitors to the site but it will be noticed by those, who managed to finish reading the article.

At the bottom or near relevant stuff your ad might be seen by times fewer people but those who see it are the ones who are really interested and they tend to convert much better than the general audience. You might lose some random conversions from above the fold ads but if you are serious, you’d never bet your income on random conversions alone.

Test What Converts Best

As always, you can never be sure you are right till you test your layouts. You can do A/B split testing to compare how two different layouts are performing.

Conclusion

While the fold is not completely dead (yet) and it will hardly ever be totally forgotten, thanks to the availability of so many diverse screen sizes, its importance slowly but surely fades away.

Without the fold, you have more freedom where to put important items but on the other hand with this freedom come bigger responsibilities. In a sense, it was much easier when you had to cram all the important things in the first 600 pixels, while now you need to think more and test more to see the best location for this important stuff.

I, myself, am way too happy that the death of the fold will likely decrease the number of sites that had a logo, a menu, and one huuuuuge image (or ads, ads, ads) above the fold only. While images do attract attention, for me, this approach was a big waste of space and now, when the fold is getting more and more blurred, I just hope these oversized images will become history as well!

Don’t mourn for the fold. Its quiet passing might be the best thing that has happened to design and usability for quite some time!