In the digital world, capturing (and keeping) our audience’s attention is no easy task. That’s why first impressions are so critical, and it’s something that every business owner should keep in mind when designing content to represent your brand.
I like to think of websites as the digital storefront for your business. And like any good storefront, it needs to look professional and speak to your target audience in order for them to “come inside” and learn more about your products or services. This is where the concept of above the fold comes into play for websites.
What Does Above the Fold Mean?
Above the fold originated in the publishing era when newspapers were sold folded in half. Editors quickly learned that captivating content needed to be put “above the fold” in order to spark interest in picking up a copy.
Your website is no different! Only “the fold” is a little trickier to define. Above the fold essentially means anything that can be seen when your website first loads without needing to scroll. It’s important to keep in mind that screen sizes vary, so you’ll want to look at your site on mobile, notebook, and desktop versions to determine what content shows “above the fold” on each.
So now that you know what above the fold means, the big question is what information to include above the fold on your website!
Captivating Heading
Your header text or banner text should be clear, concise, and powerful. You want to immediately speak to your target audience and convey what problem you will help them solve.
Focusing on the solution, or value proposition of your business, is key here. This is where having a strong brand identity and messaging strategy comes into play.
Under the headline text, you can also add some additional copy with more details about your business and the problems it helps to solve. This copy should support the headline and be short and concise.
Eye-Catching Image
Along with your heading text, your banner image or featured image above the fold on your website will be the first thing that visitors see when they land on your site. Steer clear of just using your logo here, and instead use an image of yourself or your target customer to represent your brand.
You may opt to have a slider or rotating image at the top of your site instead of one static image. This strategy can work well to showcase different aspects of your business, as long as it isn’t distracting to visitors.
Call to Action
Your Call to Action, or CTA, supports your headline text and helps to draw users deeper into your site. Steer clear of generic CTA’s like “learn more” and instead use text specific to the action you want users to take.
Clear Navigation
The other key component that will be above the fold on your website is your navigation. Your navigation should direct users to the most important content on your website, and avoid presenting too many options which can be overwhelming to users.
A typical navigation menu will include your business logo and 5-7 navigation options. Icons for shopping carts, logins and social media can also be useful to add to your navigation for easy user access.
Optional: Ribbon Banner
If you have a specific offer running like a limited time sale or just a key product or service that you are promoting, it can be helpful to add a ribbon banner to the top of your site. A ribbon will typically go above your navigation menu and it will be visible on every page of your website.
This can be a great way to draw attention to an important campaign or offer. Text for your ribbon should again be clear and concise, with a link or button to take action.
Want to see it all put together? See below for an example from my own website. You can see the heading, image and call to action that I choose to put above the fold, along with my topline navigation and ribbon banner.
Can you see how in such a small space, it’s possible to convey a lot of meaning and value to your target audience? I hope these tips were helpful, and that you spend some time reflecting on your own website to see if you are incorporating these best practices!
