Why It’s Still Important To Design “Above The Fold”

Posted: 22 May 2014 05:30 AM PDT

When I was first learning to design websites, a frequent topic of conversation was the fold. I remember it being part of the very first class I took and it found it’s way into the discussion of several that came after. Is it still relevant? I think so.

Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. You can also subscribe in iTunes

Like I said it doesn’t get talked about as much as it used to. Somewhere along the way the general consensus seemed to be that there’s no such thing as a fold on the web so let’s stop talking about it. While technically true, when you dig a little deeper the reasons why the fold was so important still exist on the web and they’re just as important.

I’d like to take a few minutes to discuss those reasons in the context of web design and more specifically responsive design. Responsive design is a paradigm shift from static to dynamic, from fixed to flexible, from absolute to relative. The fold is ultimately just one more thing that’s shifting and changing with it.

This shouldn’t be seen as maintaining the literal implementation of a folded newspaper on the web as it is about understanding why the fold was important, whether the reasons still apply, and assuming they do, figuring out the best way to design for those reasons inconsideration of the new medium and the context the web provides.

What is the Fold and Why is it Important?

I’m assuming most of you are familiar with the concept of the fold and while that’s probably true, I shouldn’t make the assumption. Let’s spend a moment or two talking about where the the fold comes from.

Before the internet many people got their news from one or more daily newspapers. Some still do, but hardly as many. A common place to buy the day’s paper was at the newsstand or in one of those vending machines where you could drop in some change to open the machine and grab a paper.

The paper had a couple of jobs to do while sitting at the newsstand or inside of those vending machines. It needed to convince loyal customers that they should by that day’s paper and it needed to convince everyone else to buy the paper over all the others they might buy.

The paper had to attract attention and then quickly communicate what’s inside and why it’s worth picking up. Non-visually it would do both by getting a scoop on the other papers. Every paper wants to break the big story and be the only paper covering it if possible.

Some newspapers are folded vertically in half. The top half of the front page would be visible when the paper was in the rack or sitting on a table. Anything printed on the front page and above the fold was visible to passers by. Everything else wasn’t.

Because the area above the fold was all anyone would see at first glance, it was essential to place the most important information, the information that would convince someone to buy in the available space.

For most papers what you typically see above the fold are the paper’s masthead, the most important headline of the day, another lesser headline or two, some text, and probably an image or part of one.

The masthead (like the header of a web page) became a recognizable shape so people can find their favorite paper. Hopefully the headlines were enough to convince you to buy that day. Enough information should be above the fold for someone to decide at a glance whether or not to pick up the paper and read more.

Google image approximating the fold for various resolutions

How Can You Fold a Web Page?

The web is different from print. One obvious differences is we don’t literally fold web pages. The screens that deliver us digital content don’t like to be folded. I have no doubt that someday we’ll fold all sorts of screens and put them in our pockets, but right now folding digital screens tends to break them.

Another difference is how near the competition is. On the web it’s only a click or two a way, but that’s a long time in comparison with the newsstand where the competition is only a glance away.

There used to be an assumption that people didn’t scroll web pages. The thinking was they either didn’t know they could scroll or they just didn’t look beyond what was immediately in front of them. I highly doubt either is true today for the majority of people.

With print everything is a known and fixed size prior to design. On the web you don’t know in advance the size of the canvas that will hold your design. That raises a big question. How can you place information above the fold when it’s impossible to know where the fold is?

Years ago designers discussed what might be the best resolution to use and we did the same thing we did in general at that time. We’d assume the most common resolution and check the next couple or three most common to see what did and didn’t show initially.

Designers used to rely on Google’s browser size tool for an image (the one at the top of this section) that could be overlaid on any web page to show how much information would be visible at different resolutions. You could then adjust elements if you needed to.

We weren’t so accepting of what the web was back then. In truth worrying about the exact size of a browser window misses the point. The reason for designing above the fold was to make sure the most important information was seen at a glance. We can still do that without knowing the exact dimensions of a browser.

On the web we can know that the top/left corner (top/right where reading is right to left) will always show no matter the device and resolution used. We can think of this point as the origin. The further something is from the origin, the more likely it won’t be seen initially.

Visual Hierarchy

When you think about it, it’s all just visual hierarchy. Make your most important information and elements the most visible. Attract attention to them and have them hold interest.

With newspapers that meant placing the information above where the paper is folded, because the space above the fold is going to be the space that’s most visible. On the web you place that information as close as possible to the top/left (or top/right) corner.

Your most visible information should do a few things. It should let people know where they are. It should let them know they’re in the right place. It’s letting them know they’re buying the paper they want. You should also let them know what else they can find on the site. If they aren’t on the right page now, maybe the right page is nearby. And you should let people know how to get to the right place once they know it exists.

The specific page in question should answer a few questions.

Who are you?
Why should I care?
Can I trust you?

Information that answers these questions likely belongs above the fold or as close to the top of the page as possible.

Ultimately you have to decide on the hierarchy of the page. You have to determine the priority of the content. Keep in mind if something is placed 1200px to the right of the top/left corner then only people who are viewing the page in a browser at least 1200px wide will see it. Decide how important the content is and if it’s ok for people viewing in something less than 1200px to not see it initially. Not everything needs to be seen right away.

People visit your page for a reason. They’re looking for something. You want a main headline immediately visible that tells people what the page is about. This headline should probably match well enough to keywords or anchor text of incoming links to keep the scent and let people know they’re in the right place.

While there’s no literal fold on a web page, the reasons why the fold was important for newspapers still exist for webpages. The information above the fold should attract attention. hold interest, and convince viewers to take action. The information should quickly communicate what the page is about and why visitors should say on it.

The term above the fold may not make sense online, but the concepts behind it do. They just need a different implementation on the web.

Download a free sample from my book Design Fundamentals.

The post Why It’s Still Important To Design “Above The Fold” appeared first on Vanseo Design.