Inside this Article
Put Your Primary Goal Above the FoldReduce the Number of Potential Actions for VisitorsWrite Simple and Clear HeadlinesBe Generous with White Space between ElementsHave a Call-to-Action Visible at All TimesUse Contrast to Direct User AttentionInclude Social Proof to Ease the Minds of VisitorsOptimize Images to Decrease Loading Time and Increase StickinessMake Your Homepage Mobile-ResponsiveHow Do You Build a High-Converting Homepage?
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.
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.
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.
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).
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.”
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.
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).
Pro Tips:
Take a look at the rule of thirds in action on the Snappa website:
- 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.
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.
Pro Tips:
![use-contrast-to-direct-user-attention1]()
- 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).
- 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:
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)
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
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.
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.
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.
