If you’ve ever done research on how to improve your website, you’ve probably come across articles that discuss placing certain types of content “above the fold,” or “under the fold.”
In this article, I will explain what the fold is, and why it is important to make the most of the information that appears above the fold. I’ll give you some tips on how to optimize your website with the fold line in mind, and get into why we view web pages the way we do.
Hold on … What does “fold” mean?
Talking about the “fold” in a web page is a transition from the newspaper world. Newspapers come to us folded into a neat package, making it easy to carry a bundle of large printed pages.
The part of that package you see first is the top half of the front page. The section is “above the fold.”
Back in the grand old days of the twentieth century, most sizable cities had more than one local newspaper. That led to competition, and the newspapers correctly assumed that you were most likely to buy the paper that caught your eye.
This would be the one with the information that most appealed to you. And to catch your eye quickly, they put that information above the fold.
Much of what the newspapers learned about making an attractive presentation above the fold a hundred years ago applies to your website today. Because even though times, and news delivery, have changed, there are many things we still do in the same way.
When we first encounter a page, whether that page is on paper or on a screen, we all have the same “visual center.” The visual center is the upper left part of the page or screen *.
Apart from gravity to the top left when we look at a first page, if we stay on that page, our continued attention also veers to the left. Knowing where people look gives us a good idea of where to focus our most important message on a page.
Above the Fold Content
If you are not convinced that focusing your efforts above the fold is important, think about this: many early web users did not scroll at all. Their resistance to scrolling was not necessarily the same as the resistance you could run into today, but for all practical purposes, it is.
Those early users thought that what they could see when landing on a page was the entire piece of content. Today, a potential visitor to your website knows that they probably are and assume they will have to scroll.
But when they land, they make a decision: Is this page worth my time and attention?
Your visitor today has more to deal with in terms of distraction. So not only do you have to convince them that your page is worth their time, you need to persuade them quite quickly. In a previous article, I talked about the fact that you only have ten seconds to grab a visitor’s attention.
Depending on who you believe, that number could be significantly less. Regardless of the number, it is quite clear that you must make your point as quickly and efficiently as possible.
Okay, I Want All the Important Stuff Above the Fold, How Do I Do It?
One could take “above the fold” advice to make the ideal web site above the fold. There is potential for a site where everything is clearly visible at first glance. That is not possible, nor is it a good idea as you will see below, unless your entire website contains only a few sentences.
So let’s look at what should be above that fold.
Before deciding what should be displayed at the top, we need an idea of where that fold is. General wisdom considers the area above the fold on a web page to be the top 600 pixels of your page. Now 600 pixels may not sound like much, but this is what it looks like.
That’s a lot of room. But what does 600 pixels look like on a tablet or phone or that screen embedded in your new refrigerator door? I can’t really show you here, but the answer is, it’s not the same as they look on a desktop monitor.
You read an article about website design as it relates to getting your message across, so I assume your website is responsive. Or you are working on making it mobile friendly. So you know, once you shrink the screen, there are dozens of other factors at play. And often our ideas of what we want our pages to look like go out the window.
Instead of thinking of the area above the fold as a specific size or space, think of it as whatever a visitor sees when landing on your page. No matter what type of device or screen size they use.
What Yes Be Above the Fold
No matter how much real estate is available to occupy, these are the things they have to live above.
1. Educational Title (Headline)
Sounds obvious, doesn’t it. And yet there are still websites, many websites, that surrender title and launch right into a clever tag line designed to attract visitors. That’s fine if they’re likely to recognize your clever tag line or slogan. But if there is a chance a visitor may not already know you, tell them who you are. Make it obvious, plain and clear.
2. Educational, Engaging Subtitle (Subheading)
This is where the meat of your message should be or that clever tag line. The single most compelling reason for a visitor to stay on your page should sit squarely in the visual center, top left of your page.
What Yes Be Above the Fold
Wait, there are only two things you must be above the fold?
If both of those things are done right, the incentive to stay or scroll will be there. But to be fair, those cases are not the norm. Most of us need more than a tile and a sentence or two to force visitors to spend their time with us.
So in addition to a nice clear title and subtitle, your most powerful weapons are:
3. The Call to Action
A call to action is often a call to buy or to learn more with the ultimate goal being a purchase. But the secondary idea is to engage the visitor by getting him to interact with the page.
If someone is trying to sell you something expensive, they’re probably not going to put a “BUY NOW” button above the fold. You will need to make some conviction. So the call to action could be a value proposition, or a customer story – something to get you into buying thinking.
On the other hand, if they sell something that is relatively cheap, such as an impulse item, or something they know you’ve bought in the past, a “BUY NOW” button is exactly what they want it above the fold. They probably don’t have to spend time trying to convince you. The developer needs to direct you to a way to buy the item as soon as possible.
“Acting” is not always equal to “buying.” If you run one of those rare and mysterious websites that aren’t trying to sell anything, you’ll still benefit from a call to action.
If your site is focused on art, literature or culture, you still need to convince visitors that it is better than other industry or niche sites. Use your call to action to attract the visitor, get him started and show them what you have to offer.
As you can see, a call to action is not a one size fits all. It must be tailored to the purpose of the page. It could be something as simple as commenting on a blog post or telling readers to follow social media profiles.
4. Answering the Visitor’s Questions
Sometimes it’s hard to boil your message to a title and a couple of descriptive lines. But above the fold thinking requires you to do just that.
Look at you above the fold message objectively. Ask yourself if what you say might raise any questions in the mind of someone unfamiliar with what you make or sell.
If so, tailor your message to answer those questions. If you can’t answer the questions with a short message, create a clear action that will take the visitor directly to those answers.
Almost every day I come across at least one website that was obviously built by professionals. People who know what they are doing. Sites that probably cost a lot of money and time to produce. They are things of beauty.
Yet somehow I have no idea what the website is about, what the company does or why I should care.
As I am always curious as to why people build things the way they do, I will take the time to look around and see what happens. But be aware that most visitors don’t care why your website is informal.
Don’t be ambiguous, cozy, enigmatic or confused. Put your cards down on the table and let your visitors see your hand.
5. Use a Compelling Image
Humans are visual creatures, and the web is a visual medium. Sometimes a striking image can do more to convince a visitor to stay than words can. If you can combine the right words with the right image, you have a powerful tool at your disposal.
Images can be photographs, photos or any kind of graphic element that represents the purpose of the page or website. This article from Smashing Magazine does a great job explaining the power of the right image.
An image is not right for every application, but few websites can benefit from a well-chosen graphic.
6. Coupon Offer or Discount
If you sell goods, saying “we want your business” is nothing more than offering an instant discount. How you present the coupon or offer is important.
For example, many websites use popup windows that hide the page and its content.
Those popup windows can work against you if the visitor hasn’t had time to find out what you’re selling. Make sure you allow enough time for your message to sink in before covering your page with a popup menu.
Better yet, work the coupon or offer into your content above the fold so that it is visible alongside your message.
7. Don’t Flaunt Conventions
Web conventions, that is, not society conventions although some products rely on doing so too…
- Do not present a graphic to a visitor that looks like a button but does not behave like a button.
- Never underline non-link text.
- Try not to display text in a fixed size font that may become too small to read on a small screen.
The same website usability guidelines that you generally follow when designing with a page plugin should be followed.
8. Make sure Your Overhead of the Fold Environment Doesn’t Look Like an Advertisement
Even if it is, it’s best not to make it clear that content at the top looks like an ad. Most of us have “flag blindness“, And we automatically ignore anything that looks like a page ad.
Use the area above the fold to make your pitch, but don’t frame it in the same way you would frame an ad.
9. Avoid the “Virtual Completeness” Trap
Above the fold thinking can be taken too far. Some websites present a design that completely fills the browser window and designed in a way that gives the impression that there is nothing below the fold.
Your message above the fold does not have to stand apart from the rest of the page. If you need an icon pointing down that indicates a visitor can scroll, you’re doing it wrong.
When you do it right, your message above the fold becomes an organic part of a larger page. The visitor does not even realize that you are using your knowledge of their behavior to deliver your message.
10. End of High Note
It’s worth remembering that it’s good to focus on the fold, but don’t forget the rest of the page.
In particular, the bottom of the page.
If your pages are informative and engaging you can also put a call to action at the bottom of the page. Once you connect with a visitor using relevant, interesting content that they find valuable, you can spread the main elements we’ve been talking about throughout your pages.
Always focus on engaging visitors, and the one sure fire engagement method that will never fail is relevance.
If you can provide relevant, useful content, Google will reward you with better search results placement, and your visitors will stick around long enough to hear your story.
Here We Are at the Bottom of the Page
And you’re still with me! Thank you.
To summarize our above-the-fold optimization tips, here’s a handy top ten list.
- Educational Title (Headline)
- Educational, Engaging Subtitle (Subheading)
- The Call to Action
- Answering the Visitor’s Questions
- Use a Compelling Image
- Offer Coupon or Discount
- Conventions discussed Flaunt
- Make sure Your Overhead of the Fold Environment Doesn’t Look Like an Advertisement
- Avoid the “Virtual Completeness” Trap
- End on High Note
More than 500 years ago, Johannes Gutenberg developed a mobile type to print books. The Chinese had been using mobile type for 500 years before the “Gutenberg device,” but Johannes probably had a better PR company, so that’s your name you’re reading now.
Shortly after the invention of the press, people started publishing newspapers. Today, ink-on-paper newspapers are nearing extinction. But the insight gained by newspaper publishers as they learned about how we read is still useful.
* Flip everything we talked about here horizontally to apply these ideas to right-to-left languages. For example, for an Arabic reader, the visual center of a page is the top right.