DESIGNING ABOVE THE FOLD: A WEB DESIGN GUIDE
You may have heard the term Above the Fold and thought to yourself, what the heck are they talking about? If you have wondered why you should care what's above, below or on the fold, I've got you.
So, what exactly is Above the Fold? For those of you that have never worked for a media company or newspaper or haven't had much insight into this world, above the fold is a term that is used to describe the information on a newspaper that's above the crease (the fold).
This information, that is seen without having to unfold the newspaper is deemed to be the most important. Breaking news stories are typically placed here. Therefore the content that is front page AND above the fold is taking up the most valuable real estate of the entire newspaper.
This idea of prime real estate has carried into web design. When you think of building a successful website you should be cognoscente of designing above the fold.
The same principle of having the most important information above the fold is true. So, how do you determine what goes above the fold?
Don't worry, the process of determining your most important information is easier than you think. What you need to do is prioritize. Ask yourself the following questions.
1. WHO ARE MY TARGET PERSONAS?
HINT: The correct answer here is NEVER everybody. If you're focused on reaching everybody, you are focused on no one. It's impossible to develop any marketing tool without knowing who it is you are trying to reach/market to.
Targeting should be the first step in the web development process or any sales or marketing process for that matter. If you know who you are marketing to, you can move to question 2.
If not, let's get that sorted. Focus on developing your 3 top personas (fictional representation). The best way to determine your target personas is by doing research.
Who are your current customers? Describe them in detail. The easiest indicator of who will buy from you is to look at who has bought from you. For help developing your personas check out this article.
2. IF I ONLY HAVE 3 SECONDS, WHAT DO MY VISITORS NEED TO KNOW?
Think fast, because your site visitors do. In the first 3 seconds visitors are trying to determine who you are, what you do, and if you can help them.
If they can't find those answers quickly, your site doesn't answer those questions, or you aren't what they are looking for they are leaving. So, can you address the top three questions in 3 seconds? Absolutely!
Who are you? You address that with your company name, logo, relevant hero image above the fold. I'm sure you have your name and logo covered, but what do I mean by relevant image?
The image should relate to the page they are on. If it's the home page it should be general for your company, if it's the about page, it should showcase your company or team, if it's the services page it should be an image relevant to the services you provide, and if it's the contact page, the image should be of your building and that page should also have a map.
These things have become routine and they are what is expected.
What you do? You address this with your verbiage and imagery. A picture is worth a thousand words. Where possible you should use imagery including pictures and icons to tell the story. An image of a hardhat says construction just as much as the word does.
Can you help them? What better way to show someone you work with them then for them to read it or see themselves on your site. If you say something like "we help schools" and have an image of a school and I am a private school owner, I can self-identify as someone you may be able to help.
This can be done with images, icons, and/or testimonials. The quickest and easiest way to do this is to include we help ____with ____. This statement should be... you guessed it -- Above the Fold.
3. WHAT IF THEY DON'T SCROLL?
The last thing to consider when designing above the fold is what if they don't scroll. You should actually design your site as if they won't. Most first time site visitors don't.
You need to be able to tell your company's story in the area above the fold. It can be done. Here are some great examples of it done well.
Do you see the common theme here? In every site, you can see who the company is, what they do, and who they help above the fold.
Once you've made it past that test and survived the first 3 seconds, congratulations are in order. You've captivated your visitor. There is one more important thing to consider when designing above the fold.
Should your site visitor want to move forward, you have to address the call-to-action/how they should contact you, where they can find you, or how they can get help with next steps. Look again at the example sites. These sites get extra credit because their contact/location information is also... ABOVE THE FOLD.
Designing above the fold is all about capturing and captivating your audience while you have them. Now that you have that covered, click here to get information on how the rest of your website should be structured and the Anatomy of Successful Websites.
Looking to redesign your site? We can help. Click the button below to book a discovery and get the ball rolling or start here by reading our blog Web Design Made Simple: everything you need to know about web design.