Eight seconds. It’s not very long, but it's the average length of the human attention span. And if you're a marketer building a website, that's approximately the same amount of time you have to catch someone's attention once they arrive. That's no simple task, but we're going to tell you how to do it.
First impressions are crucial. If you're losing traffic and failing to keep your website visitor's attention, it could be because your “above the fold” content isn’t catchy enough. Your website may need a makeover to better order your information and put the most eye-catching products front and center. Most web designers focus their energy on making a website look great, but if it's not pulling readers further in, then you won't see meaningful growth. Moving your content around so the most engaging piece is above the fold can help to ensure visitors stick around, subscribe, and buy.
What Does Above the Fold Mean?
What is a “fold” in web design, and why is it so important? If you don’t know what “above the fold” means, you’re not alone. The idea goes back to the early days of publishing, before digital and e-commerce options were widely available, when newspapers were sold from newsstands on every corner. The newspapers were folded in half on display so passersby could only see the top half of the front page. What they saw had to catch their attention, or they wouldn't stop to purchase a paper. This is how publishers realized the most eye-catching headlines had to go "above the fold" to catch the eye of customers.
Although the concept of the fold started long before websites existed, it's still a useful standard for online marketing. Above the fold for a website refers to the content a viewer sees before they scroll down. It's prime real estate that receives the most attention from your visitors because it's the first thing they see, which is why it should immediately pull the reader in. Think about your favorite song. It probably has a really catchy or intriguing opening few notes; otherwise, you would've skipped it the first time you heard it. Your above-the-fold content is your website's hook, and just like any good song, it should get your customer's head bobbing.
Where Is the “Fold” On a Website?
The 'TL; DR' answer: the fold is the bottom of the visible page when it first loads and the point at which a user would have to scroll to see the content beneath it. However, it can become more specific depending on the device.
Many people use multiple devices every day — mobile phones, laptops, desktop computers, smartwatches, tablets, etc. With the number of various devices, screen sizes and screen resolutions out there, there are simply too many metrics to conclusively define the same fold across various platforms. Trying to design the perfect website to fit all these options is a game you just can’t win.
Luckily there's a rule of thumb you can use to help guide you: the fold line is approximately 1,000 pixels wide and 600 pixels tall. This can be helpful when it comes to design, but the important thing to remember is that engaging content needs to be higher on the page and optimized for usability. It can guide user behavior and encourage readers to scroll down the page.
Another thing to consider when determining the location of the fold is how often people use mobile devices for web browsing. This complicates creating a responsive design for content above the fold. The general concept remains the same, though. Important content still needs to be high on the page, but the decreased screen size should also be considered when deciding on placement.
At the end of the day, the fold is a guideline for designing a web page. It's essential, but its implementation varies, so be wary of any advice that deals in absolutes. Don’t overcomplicate things. Keep your design simple so users know where to look first, and make sure your content is search engine optimized (SEO). Do these things, and you'll start to see higher conversion rates.
You can even use the space “above the fold” to set the stage for future content and establish a quality standard. Some things many users wonder when they wander onto a new webpage include: Is this worth reading? Will it be helpful? Is the product or service interesting? Is there more content? Everything above the fold can help your visitors answer these questions and dive further into your products or services.
Best Practices for Above the Fold
Simple webpage designs are one way to keep your user's attention. If you're new to designing websites or feel your site could come down a peg or two, consider these easy guidelines to keep things simple, direct, and engaging.
Copy: Your homepage’s H1 and tagline should be clear, compelling and concise.
Users should be able to read your header text and know exactly what problem you'll solve. Your goal here is to show value to the consumer, and what better way than through a big, powerful statement on your landing page? "We Fix Cars" or "Stop Worrying About Your Investments" are two simple examples of how a header can clearly communicate your service.
After you deliver your power statement, create an explanation that shows customers they've found the right place. Your above-the-fold content should echo your brand voice, include a call to action, and utilize headlines and copy that delight your user. Keep it consistent and professional, and stick with a simple statement that summarizes how your product is their solution.
If you're stuck or can't find the right words, you might want to check out these tips on creating clear, compelling and concise brand messaging.
CTA: Tell the user exactly what you want them to do.
Your call to action (CTA) should be obvious and placed in the top right corner of your website’s navigation. This makes it easy to find and immediately lets customers know how to purchase your product. Ideally, this will be a button or link that is clickable and drives people to take action (hence call to action). Pair the header with a one or two-sentence statement that positions your brand as the guide who will lead customers to a solution. Your call to action must be hard-hitting, motivating, and unique.
Navigation: Less is more and 5-7 is max.
Your content should be easy to interact with and not include so much information that it becomes overwhelming. Think about the user experience and what you like about some of the websites you visit frequently. When it comes to navigation, less is more. Your website design should guide your visitor to exactly where you want them to go. Too many options can result in decision fatigue and confusion.
Keep your navigation visible, and ensure the menu bar redirects visitors to important pages on your website, such as the product or service you're offering, the about page, and a contact page with a phone number or email. The rule of thumb is to keep your navigation bar to a maximum of 5-7 items.
You also want to address the capabilities and functionality of your website. Fast download or upload speeds and a large bandwidth can make it easier for a larger group of prospects to explore your website at once. If there's anything people hate these days, it's waiting for a webpage to load. A homepage that takes too long to load could cause visitors to bounce, so be sure speed optimization is a top priority.
Remove distracting backgrounds: Background video can be cool, but is it distracting from the copy or enhancing it?
Above-the-fold content shouldn’t be too busy or distracting. If there's too much going on at the top of your webpage — text, photos, videos, pop-ups, sale banners — it might be overwhelming to visitors and cause them to click away from your website. Keep your page organized, simple, and user-friendly. Try using one image, video, or GIF to kick things off, then add a short headline to introduce your page and one or two sentences below it that describe what you offer in a bit more detail.
Put your best content at the top, not all of your content.
Don’t try to shove everything above the fold. The idea with above the fold is to put your best content at the top, not all of your content. Less is more, so use one enticing image or some clever copy and remove those background distractions to keep people scrolling.
Examples of Great Above-the-Fold Content
If you’re still unsure what great above-the-fold content looks like, here are a few examples to help you get started.
- SnackNation’s above-the-fold content shows exactly what they offer. There's an image of snack sampler boxes, and the content guides visitors to choose which box is right for them. This is a great way to get business leads. In fact, SnackNation gets 1,200 new leads each week with their fold design.
- OptimizeMyBnb.com has a personal approach to its website design. The site owner is featured as the image, and he appears to be looking directly at the reader. To the right of the photo, there’s a welcome headline that outlines the benefits of the site and buttons offering readers the option for more tools and information.
- Wistia’s content marketing introduces their services using short copy and videos to show off their capabilities. Users are prompted to watch a talk-show-inspired video that explains Wistia's services. When real people appear on a website, it's more inviting and compels users to explore further. The simple homepage makes the brand feel casual, but professional. Buttons entice users to click for additional information.
- InVision’s website includes a sleek design above the fold that overlays sharp copy on top of a video that features an overview of their company. This gives visitors a glimpse of the video and entices them to watch it. The design also features a vibrant call to action for a free version of their service.
- ProBlogger’s homepage has lots of calls to action. Join the Facebook Community! Subscribe! Listen to a Podcast! Look at the social media links. Although this may seem cluttered, for certain markets it may be okay to break the rule of one call to action. If you're a blogger and want to make it a career, this above-the-fold content clarifies you want to be a ProBlogger member and level up your blogging game. It features an image of Darren Rowse staring right into the reader's eyes to catch their attention.
- Missinglettr’s homepage works because the headline gets right to the point about what challenges they can solve for their visitors. Their single headline and one-sentence explanation gives details about the product with a visible call to action targeted to those who are ready to give their services a try. Their call to action offers a free trial and uses bullet points to show no credit card is required, and users can cancel at any time.
- SPI’s website achieves great above-the-fold balance. The content is clean, uncluttered and has plenty of space between text. The premise of their services is demonstrated in just four lines of copy and has a conspicuous call to action. Images of real people and social proof help the design connect with users and makes them want to learn more.
- Grammarly’s website has a very clear headline, followed by one simple sentence that explains exactly what challenges their software can solve for the user. It has an obvious, clickable call-to-action button to start using the program for free. Plus, it includes a video that shows the program in action so visitors can see how it will work if they decide to give it a try.
- Hubspot’s homepage headline shows you exactly how to get started with Hubspot. It gives the user four call-to-action options, each explained with simple statements and offers a clickable button to get a demo of one.
- Linkedin makes it clear what services are available if you join their community. The homepage includes options to search for a job, find a person you know, or learn a new skill. "Sign in" and "join now" buttons appear in the top right corner, and a colorful graphic helps explain their services even further.
Looking for more information on what is involved in a website redesign? Check out our article on why your website redesign costs so much (and everything that goes into one).