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.
👉 Make sure your website is optimized within your customer's experience with this customer journey template.
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.
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.
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.
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.
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.
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.
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.
If you’re still unsure what great above-the-fold content looks like, here are a few examples to help you get started.
👉 Keep Reading: 5 Things Every Website Strategy Needs