Homepage Best Practices – 9 Important Elements & Examples

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.

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:

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.

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

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:

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:

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:

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.

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.”

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.

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:

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).

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.

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

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

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?

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.

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:

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:

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.

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”):

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.

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

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 adjusts according to the screen’s size, effectively displaying content on screens of all dimensions. This adaptation is achieved using CSS and sometimes JavaScript.

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.