First impressions matter! If a user lands on your website and they are not instantly compelled, they may leave the site. The “Above The Fold” content of a website is the first thing a user will see on your site, and it may very well make or break their user experience.
What Is Above-The-Fold?
In web design, above-the-fold refers to all the content that a user sees before they scroll down to the rest of the site. Generally, when we think of above the fold content, we might think of these common elements:
- Heading/Subheading: This is usually the company name or a bold statement followed by a catchy phrase or slogan that gives the user more insight on what the page or product is about.
- Call to Action: A button or phrase that gets the user to do something ie: go to a product page, scroll down, check out product pricing, or contact the company etc.
- An Image: A statement image or video that catches the user’s eye and says something about the product or page.
- Navigation bar: A list of links that help users navigate to other pages.
The above elements are a good example of what you might find above-the-fold, but you can have more or less items in this area, it really depends on your site, your product, and what your users find valuable.
History
The term ‘above-the-fold’ started well before the internet, and it originates from newspapers. Above-the-fold refers to the top half of the newspaper that people see when the newspaper is on display.
When you see a newspaper for sale, you will notice that it is folded in half and the most eye-catching news is at the top half or in other words “above-the-fold”.
Why is it important?
There’s no point in making a beautiful website if users leave as soon as they enter it. Above-the-fold content is significant because it gives the users an ‘elevator pitch’ about what the rest of the website will be like, what problem it will solve, and what action the user can take to get started. If done correctly, this content might be what makes a user either stay or leave the site.
In newspaper history, above the fold usually contained the most breaking news to get the buyers attention.
What Should I Include Above The Fold?
This varies from site to site, so we can’t tell you exactly what you need to do in this blog post. But we can give you pointers!
Let’s talk about some popular above-the-fold elements and how to correctly wield them.
Heading and Subheading
When a user comes to a site, they are generally looking for something that they need. If your heading or subheading communicates to the user that it has what they require, they will likely keep reading. If the user has to search for the solution, it’s not worth it for them.
You may choose to have both a heading and subheading, if so the heading should just be a couple words (2-5 words) and a subheading should typically be up to a sentence (but sometimes a paragraph!). You can also just have a heading and make it 2 words to 1 sentence. These are guidelines, not rules, so take it with a grain of salt, just maybe don’t put a novel of text here!
Sometimes a paragraph can work above the fold, all you have to ask is “does all this content provide value? Or is it messy?”, unsure? Ask a friend to view your site.
Some examples of useful headings: phrases like: “Fast and Fresh Food” or “We Teach Code” clearly state what solution the website is selling. Is the user hungry now? That’s a problem and fast, fresh, food is their solution. Perhaps the person wants to switch careers and learn to code, a site that clearly states that it teaches code sounds like it would be very useful for this individual.
Tips:
- Try to avoid headings and subheadings that are lengthy or vague. You want to communicate that you have what the user wants while keeping their attention.
- The heading can either be a phrase or the name of the company itself. If you choose the name of the company, then it is wise to use a catchy phrase for the subheading.
Call to Action
Once a user decides that the website has what they need, they might want to immediately take action. So make it easy for them! A call to action (CTA) is generally a link or button that drives the user to take action.
Is the website for a restaurant? The CTA might be a button that says “Order Online” which will lead to the menu and checkout. Is it a code school website? The CTA might be a button that says “Sign up” which leads to the admission forms.
Here are some other examples of what a CTA might say:
“Book my flight”
“Claim my free trial”
“Get 50% off”
“Sign-Up”
A good CTA isn’t just about the phrase, it’s also about the look. So make it pop! CTAs are often brightly coloured and tend to be one of the first things that a user notices when they look at a site.
The placement of your CTA really depends on your site, but the most common places are:
- The right most link on the navigation menu, this link will usually look different from the other links and it will usually be in the form of a button.
- Right after the heading and subheading in the form of one to two buttons
Tips:
- Keep it short and make it pop! Avoid CTAs that are over 5 words, and avoid colours that blend into the background.
- No more than two CTAs in the above-the-fold section, otherwise it will get crowded.
An Image or Video
Adding an image or video to your Above-the-fold area is a great way to show your visitors what you are offering.
For example, if you are a burger joint, you may want an image of your most popular burger. If you are a code school, maybe you want an image of students plugging in some code on their computers.
Common placement for your above the fold image: Either as a background image or it could also be placed beside any text content, or below if you are on mobile. Some websites even use image sliders, just make sure each image adds value to your website and keep the user experience in mind, ie: you don’t want the slider to be super fast!
Tips:
- Make sure any images are of high quality and optimized. A low quality image will look unprofessional, and an unoptimized image will slow your website down.
- If you are using a background image, make sure it does not muddy up the rest of the content. You want the image to compliment the text.
Navigation Menu
This is also called a navigation bar, or a hamburger menu on mobile. The navigation menu is a list of links that help the user navigate your website. Some common ones you’ll recognize are:
- About
- Shop
- Contact
- Pricing
- Blog
With navigation menus, less is more. Keep it under 7 menu items, somewhere between 4-7 is perfect! Do you have a huge site? Consider adding sub-menu items.
Tips:
- Use your company logo on the navigation menu to link to the home page, for example, our logo for Vancouver Island Works Project will always lead you back to our homepage.
- Add a CTA to your menu, all you have to do is make the CTA menu link look different from the rest of the menu items. We suggest you turn it into a button and add it to the far right-most side of the menu.
Conclusion
Above we listed some common elements you will find in the above-the-fold area of your website, but there’s so much more you can do! Social media links can be great above-the-fold, an interactive animation can be engaging, a popup could act as a supplementary CTA, and of course Covid-rule banners are a common occurrence nowadays.
Just as long as your above-the-fold content grabs the visitors’ attention, gives them a clear idea on how you can help them, and provides easy instruction on the actions they can take to receive that help, then you are doing great.
This article was only the tip of the web design iceberg.
Interested in learning more? At Vancouver Island Works Project, we offer courses for web designing with WordPress, have a look at the course here.
Already have a site, but it’s just not performing as well as you’d like? No problem, we offer consultation as well as web services. Contact us to learn about all of our services.
