5 best practices for creating above the fold content that converts
5 best practices for creating above the fold content that converts

Grabbing a user’s attention on a website is just like how a newspaper grabs a reader’s attention, with enticing content immediately “above the fold”. In newspapers, above the fold refers to the content on the top half of the front page. For websites, it’s the first section of content where the user’s eyes first land, which is typically between 1000-1800 pixels on the page.

If the content above the fold is not engaging, loads slowly, and doesn’t provide a call to action – it can result in high bounce rates for your website, and inevitably lower conversion rates. If you’re noticing that your top landing pages (homepage included) are not performing well, the first place you’re going to want to look into optimizing is the above the fold content.

The first place you’ll want to look to begin your optimization is Google Analytics and any other reporting tools you use, such as HotJar heatmaps, to discover which pages have the lowest engagement and highest bounce rates. Once you implement the following best practices, we recommend you keep an eye on your analytics and A/B test messages and placement of design elements when possible to get the right strategy down.

Use a Call to Action that excites

Creating a call to action (CTA) to engage with your audience might not be as easy as you think. It is important to use language that your audience will react to. Instead of using simple call to action phrases like “Shop Now,” try something more enticing that offers a value proposition, like “Find Your Perfect Fit”. These CTAs should be in line with the goals you have set up for your website, and the messaging that you use in the CTA should be action-driven. Don’t drive users to perform an action that isn’t going to help you gain that conversion, work the sales funnel.

Support your message with strong visuals

Strong visuals are very important when it comes to grabbing the user’s attention. You only have 50 milliseconds to get your users hooked, so how are you going to captivate a user in 0.05 seconds? Key visuals are not only a great way to showcase your branding, but they can tell a story and lead a user to purchase. Video content is best practice for your above the fold content, as long as it loads quickly and doesn’t interrupt the user experience because it can offer a lot in a short amount of time.

Provide easy access to your social media

Having your social media badges above the fold is essential when building your brand following and loyalty. You want people to reach these pages from any place on your website, so keeping them in the navigation or eyebrow is best practice. Every industry can rely on social media, so you do not want these icons just sitting in your footer for very few users to find and engage with.

We have found that ecommerce brands benefit a lot from social proof.

Keeping this content above the fold provides a “safety net” for the user who might not be sold on the brand yet, but will be more trusting of the brand with proof of happy customers. To showcase social proof, include testimonials and reviews or user generated content as high up on the page as possible – for YumEarth, we infused social proof right in their key visuals.

Proudly show off your guarantees

Guarantees are what seal the deal for a new shopper with few reservations about buying a new, unknown product online. “100% Guarantee” makes someone more likely to purchase a product because it’s essentially a no strings attached deal. No one wants to regret a product that they buy, so offering guarantees will sell them in on further exploring your products and lead them to make that purchase. Guarantees are now seen as a right rather than a benefit and shoppers are expecting them, so keep this information available within your above the fold content so it cannot be missed.

Offer more content with the use of carousels

When you have multiple pieces of content you want to display, but can’t fit it all above the fold, some might resort to doing a carousel, or a similar design. The carousel doesn’t have to swipe side to side, there are plenty of unique design hacks to showcase multiple key visuals in one place. However you use this element, you don’t want to include any important information that is essential to the user or for conversion because not everyone will go through every slide. Limit this content to engaging visuals, news, and top product features so users don’t miss a vital piece of information that can help them convert. And remember, 84% of carousel clicks come from the first slide.

Listen to our episode of Ecommerce Disruptors, How to make a great impression in 50 milliseconds: Above the fold optimization to learn more about how the content you chose to put above or below the fold can impact bounce rate and conversions.

Looking for design assistance to improve your conversion? Contact us today to get started. 

selected projects
selected projects
selected projects
Big ideas. Bigger results. Let’s make it happen. Get an instant quote today.

sf-required

Manage recurring validation states.
sf-form_input
sf-required
Field Input (Required)
sf-form_checkbox-field
sf-required
Checkbox (Required)
sf-form_radio-field
sf-required
Radio (Required)
sf-form_input-select
sf-required
Select (Required)
sf-form_input-date
is-icon-left-right
sf-required
sf-form-icon-left
sf-required
Date Input (Required)
This is an error tag
sf-form_input-error-wrapper
sf-required
Error Tag (Required)
sf-form-icon-right
sf-required
Icon on Input Right (Required)
sf-form-icon-left
sf-required
Icon on Input Left (Required)
sf-form-icon-right
is-text-area
sf-required
Icon on Input Right Text Area (Required)

sf-checked

Manage recurring checked radio & checkboxes states.
sf-form_checkbox-field
sf-checked
Checkbox (Checked)
sf-form_radio-field
sf-checked
Radio (Checked)

sf-focus

Manage recurring focusing for button, radio and checkbox states.
sf-form_radio-field
sf-focus
Radio (Focused)
sf-form_checkbox-field
sf-focus
Checkbox (Focused)

sf-hide

Manage hidden states.
sf-skeleton
sf-hide
Loader Box (Currently Hidden)

sf-await

Manage awaiting states.
sf-button-child
sf-await
sf-button-await-child
sf-await
Awaiting Status of Buttons
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Step {Current Slide}/{Max Slides}

Project Details

Start by telling us about your project.
This field is empty
Enter a valid email
Select one option
Next Slide

Key Project Requirements

Tell us about the essential features and requirements for your project.
This field is empty
Select one option
Next Slide

Timeline & Budget

Tell us about your project's timeline and budget.
This field is empty
Select one option
Next Slide

Additional Information

Anything else you'd like to add?
This field is empty
Select one option
End
Thank you! Your submission has been received! A representative will be in touch within 24 hours.
Oops! Something went wrong while submitting the form.