Best Homepage Practices – 9 Most Important Elements (+Examples)

Best Homepage Practices – 9 Most Important Elements (+Examples)

Dale Cudmore
Dale Cudmore
August 06, 2019
23

Whether you’re building a business or personal website, many questions probably come to mind. One of the biggest ones: How do you create a homepage that actually gets visitors to do what you want them to do?

If you want to get the most out of your visitors, there are some things you absolutely must do.

Throughout my career, I’ve created and optimized dozens of homepages across many industries, and studied hundreds of others. There are certain best practices that all the highest-converting landing pages share, and you’re about to learn them right now. Your website is going to have the best homepage possible.

Put Your Primary Goal Above the Fold

When someone visits your homepage, they’re interested in what your business has to offer. In many cases, you have only one chance to get your message across and give them a reason to stay on your website.

You’ll find some exceptions, but almost all great homepages have a CTA (call to action) above the fold (the content that shows up without needing to scroll).

There are probably multiple visitor outcomes you’d be happy about (e.g., they visit your blog, contact page, or product pages), but you need to pick the most important one to focus on above the fold.

The rest can go elsewhere on the page, or even above the fold with less emphasis.

Here are some typical examples of primary goals for different types of websites:

  • Blogs. Collect the visitor’s email address.
  • Software. Get the visitor to sign up for your tool.
  • E-commerce. Get the visitor to visit your store or a product page.

Let’s look at an example of each.

Backlinko is a well-known SEO blog. The primary goal of the homepage is clear: to get your email address.

Best Homepage Practices – 9 Most Important Elements (+Examples)

Wix is one of the most popular website builders for businesses, with templates for all types of sites (e.g., consulting, pets, real estate, etc.).

It happens to have a great homepage of its own:

put-your-primary-goal-above-the-fold1

The “Get Started” CTA gets you on the path to signing up and using the tool to create a website.

Finally, let’s look at an example of an e-commerce homepage.

The one below is a template offered by Weebly, which is another website builder more focused on e-commerce businesses.

put-your-primary-goal-above-the-fold2

There’s a clear CTA above the fold to get you to “Shop the Collection” and visit the online store.

Pro Tips:

  • Don’t use sliders and carousels. While they may look fancy, visitors don’t use them. You’re much better off moving the content down on the webpage so that a user can scroll to it.
  • Use images with human faces when possible. Humans are drawn to others, so these images grab your attention. We also follow the eyes of people in pictures, so if the face(s) in your image is directed to your CTA, even better.

Reduce the Number of Potential Actions for Visitors

People want to make the right choices, which is why having too many options can increase their anxiety.

British psychologist William Hick found that the more choices a person is given, the longer it will take them to make a decision. This is now known as Hick’s Law, and it’s common sense, really.

But how can you apply this principle to improving your homepage? Well, think about the number of possible actions your visitors can take:

  • For any given portion of the screen, allow for only one or two possible actions, max.
  • For your entire homepage, allow for only a handful of possible actions — rule of thumb, try to focus on no more than five actions.

If a certain link isn’t critical, but you’d like to include it, put it in the menu or footer.

Asana, the project management tool, does a good job of not overwhelming its website visitors with too many options:

reduce-the-number-of-potential-actions-for-visitors

Asana prioritizes the most important actions above the fold, and it places links to other important parts of the website lower on the page. These include CTAs to:

  • Watch a demo video.
  • See customers using Asana.
  • Explore the portfolio function of the tool.
  • Download a report about collaborative work management.
  • Try Asana for free (again).

In total, that’s five main actions highlighted on the homepage.

I wouldn’t recommend going much higher than that in most cases, although it depends on your type of business. A blog or magazine can probably get away with 10-20 links to content in other parts of their website.

Write Simple and Clear Headlines

Since the start of marketing, there has always been an argument about whether content or design is “king.” The truth is that both are critical for websites, especially on the homepage.

While most best practices focus on design, this one focuses on the most important text on your page: the headline (and possibly sub-headline).

If a visitor can’t understand what you offer within a few seconds of landing on your homepage, they’ll leave immediately. Those one or two sentences have a huge impact on the effectiveness of your homepage.

To illustrate this, let’s look at an example of a homepage that could use a lot of headline help. Check out the above-the-fold area on AAK’s webpage:

write-simple-and-clear-headlines

What do you suppose the company does?

I had no idea either.

Apparently, AAK sells sustainably sourced fats and oils.

Was that clear from “Together, let’s make moments of inspiration” to you?

So, how do you write a great headline? Cut the buzzwords and be clear. Clarity is more important than creativity, so focus on that first.

This is easier for some businesses than others.

For example, a plumber has a business that’s easy to describe. Here’s an example of a pretty good headline for a local business’s homepage:

write-simple-and-clear-headlines1

If someone from Toronto lands on the page, they’ll know they’re in the right place for a “Toronto Emergency Plumber.”

Let’s look at some good headlines from online businesses.

write-simple-and-clear-headlines2

Codecademy: “Join the Millions Learning to Code…”

The headline is clear, and anyone landing on the homepage will immediately understand that Codecademy teaches people to program.

Here are a few other good ones:

  • Asana: “Asana is the work management platform teams use to stay focused on the goals, projects, and daily tasks that grow business.”
  • WordPress:Build a website, build a movement.”
  • Copyblogger:Words that Work for Smarter Digital Marketing and Sales.”

Pro Tips:

  • You can test the clarity of your headline by showing your homepage to someone who has never seen it before. If they can’t figure out what you do within five seconds, it’s not clear enough.
  • Aim to make headlines concise as possible (no more than two sentences).

Be Generous with White Space between Elements

White space is simply empty space on the screen that, when used right, can make your content:

  • Look better. White space makes content look more elegant.
  • Be more digestible. When content is spread out, it’s less overwhelming for readers and easier to know what to focus on.
  • Flow more clearly. With white space, you have clear sections, so you can lead visitors through a logical sequence of ideas that gives them valuable information.

All good homepages have plenty of white space, whether it’s between sections, or within the content itself (e.g., space around lines of text, headings, images, etc.).

Snappa, the image creation tool, uses plenty of white space on its homepage to create clear divisions between text, images, and sections of content.

be-generous-with-white-space-between-elements

Note that “white space” is just the common term for blank space. It doesn’t mean your background has to be white; it can be any color.

Have a Call-to-Action Visible at All Times

Different visitors are ready to take action at different times. Some need more information than others and won’t sign up or click through right away.

But you should make it easy to take action whenever they are ready.

That’s why you’ll see several CTAs on a single homepage. Many CTAs may be for the same purpose.

Don’t go overboard, but try to have at least one CTA visible at all times on your homepage (for a typical desktop screen).

Tesla’s homepage is a good example of this concept. It starts with a clear CTA to order a car:

have-a-call-to-action-visible-at-all-times

If you scroll down to the next section, there are two new CTAs, with emphasis on the more important one, which directs you to visit a store (instead of to order a specific product).

have-a-call-to-action-visible-at-all-times1

Scroll down again, and there’s a highlighted button to another line of products that Tesla sells, their solar panels and Powerwalls. There’s a secondary CTA if visitors need more information.

have-a-call-to-action-visible-at-all-times2

There are a few more screens on Tesla’s homepage, each with its own CTA (or two).

Pro Tips:

  • Use familiar CTAs. Visitors understand what “add to cart” and “try for free” mean because they’ve seen similar ones so many times before. You can be a bit creative, but familiar CTAs usually perform the best (so skip unfamiliar ones like “get inspired!”).
  • Use the rule of thirds. Divide a screen or image into nine sections. Viewer’s eyes are automatically drawn to the intersections of these lines (circled in green below). Put CTAs and headlines near those intersections to make sure they are noticed first.

Take a look at the rule of thirds in action on the Snappa website:

have-a-call-to-action-visible-at-all-times3

Use Contrast to Direct User Attention

A key part of effective design is contrast.

Contrast allows you to make important parts of your homepage stand out. These should generally be your CTAs, and possibly your headlines.

Consider the homepage of Moz below. What stands out to you the most?

use-contrast-to-direct-user-attention

My eye is drawn to the bright yellow buttons first, and then the large blue headline.

That’s because there’s a high contrast between the yellow button and the dark background image.

Pro Tips:

  • If you’d like to test the contrast of your current homepage CTAs, look up a contrast ratio calculator, and input the color of your buttons or links against the color of your background. The W3C says to have at least a 3:1 ratio on large text or elements (which buttons usually are), or a 4.5:1 ratio on small text (under 18 px).

use-contrast-to-direct-user-attention1

  • If you don’t know how to pick high-contrasting colors, the easiest way is to Google a “website color picker.” Any of the popular ones will do. You input a base color, and it will give you combinations of two-to-four other colors that go well with it.

Include Social Proof to Ease the Minds of Visitors

Social proof includes anything that shows other people like your company. Testimonials, users stats, reviews, case studies, and so on.

For the most part, people like things that others say are good.

Look at a section of HubSpot’s homepage for an example:

include-social-proof-to-ease-the-minds-of-visitors

They have quite a few impressive stats:

  • Number of visits to HubSpot blogs
  • Number of social followers
  • Number of integrations
  • Number of customers (and the names of big ones)

For another example, Cloudways (a hosting company) has multiple testimonials on its homepage:

include-social-proof-to-ease-the-minds-of-visitors1

Pro Tips:

  • If you’re building a brand new website, you may not have reviews or user stats yet. If that’s the case, reach out to friends, former co-workers, or early users and try to get something you can include.
  • Set a Google alert for your website name (or business name if different) to monitor when you’re mentioned by others. You can say that you’ve been mentioned or featured by these other websites as social proof.

Optimize Images to Decrease Loading Time and Increase Stickiness

According to a recent report published by Google, 53% of mobile visitors will leave a page if it doesn’t load within three seconds.

It turns out that the average page load time on a mobile device is 22 seconds.

We build websites on desktops, usually with a great internet connection, so those sites usually load within a few seconds.

But not everyone has a great connection speed. Even my phone on 4G is frustratingly slow sometimes, and many people have a 3G connection or worse.

So, how do you make your homepage load fast? You need to consider two factors:

  • Quality of your hosting
  • Size of your homepage

If you use a website builder like Wix or Site123, the hosting is taken care of for you, and typically at a quality high enough that you don’t need to worry about it. That leaves the size of your homepage as the main issue to worry about.

While several things can make your homepage larger than necessary (e.g., uncompressed static files, unoptimized JavaScript), the most common issue by far is having unoptimized images.

The good news is that optimizing images is easy.

Let’s go through a hypothetical example of why this is so important.

I went to Pexels (a free stock image site), and found a great picture for my website’s homepage (shown below). The original picture is 2.02 MB, which will take several seconds to load by itself on a slow connection.

optimize-images-to-decrease-loading-time-and-increase-stickiness

I did a quick search for an online picture compressor and put the image through the tool. That decreased the size by 56%, with no noticeable quality decrease, and we’re down to 902 KB.

But it turns out that I don’t need a full-sized image on my homepage, just one that’s 1000 pixels wide.

So I searched for another simple online tool to help (i.e., “online picture resizer”):

optimize-images-to-decrease-loading-time-and-increase-stickiness1

We started at 2 MB, and are now down to 75 KB, with no significant decrease in quality (before and after below). The optimized image can be loaded in a split second, even with slow connections.

optimize-images-to-decrease-loading-time-and-increase-stickiness2

That’s a bit of an extreme case, but it’s not as rare as you might think.

Pro Tips: Optimizing your images is an easy win that can have a big impact on your conversion rate. This is all you need to do for images on your homepage. Do these in any order:

  • Resize the image to the smallest width that you’ll need for a visitor.
  • Run the image through a compression tool.

Make Your Homepage Mobile-Responsive

Take a look at any website’s analytics, and you’ll notice that the percentage of mobile users makes up a large chunk of visitors.

If your homepage looks weird on someone’s phone or tablet, you’re missing out on possible conversions.

A responsive website adapts to the size of the screen, and displays well on screens of all sizes. It does this through CSS and occasionally JavaScript.

make-your-homepage-mobile-responsive

If you’re not comfortable with those, I’d recommend using a website builder. Read our article on the best website builders for responsive websites.

How Do You Build a High-Converting Homepage?

If you already know how to build websites, we now have a nice little checklist of the most important parts of a high-quality homepage:

  • Primary goal is above the fold.
  • Visitor isn’t overwhelmed with multiple CTAs.
  • Main headline is easy to understand.
  • Sections are divided with white space.
  • Multiple CTAs throughout the page.
  • Contrast used to make CTAs stand out.
  • Social proof included.
  • Images are optimized.

But if you don’t know how to build a website, or code one from scratch, the easiest way to get one up and running within a few hours is to use a website builder.

There are many good ones, each designed for different purposes. Here are the simplest ones I’ve used in the past and would recommend:

  • For an e-commerce website, use Weebly.
  • For a website for a specific industry (e.g., real estate, art, restaurant), use Wix.
  • For the simplest possible website builder, use Site123.
23 claps
Clap for the post if you found it useful!

Any comments?

0 out of minimum 100 characters
Required Field Maximal length of comment is equal 80000 chars Minimal length of comment is equal 100 chars

Get just one email a month and take your skills to the next level.

Sign up Now!

We check all user comments within 48 hours to make sure they are from real people like you. We're glad you found this article useful - we would appreciate it if you let more people know about it.

Share this blog post with friends and co-workers right now:

We check all comments within 48 hours to make sure they're from real users like you. In the meantime, you can share your comment with others to let more people know what you think.

Once a month you will receive interesting, insightful tips, tricks, and advice to improve your website performance and reach your digital marketing goals!

So happy you liked it!

Share it with your friends!

© 2019 WebsitePlanet.com. All Rights Reserved.