12 Critical Elements Every Website Homepage Must Have [Infographic]

12 Critical Elements Every Website Homepage Must Have [Infographic]

This page serves as your company’s virtual front door and is responsible for attracting a large portion of your website’s traffic. Despite its notoriety, many companies struggle to optimize it properly.

As you can see, your homepage has to wear a lot of hats. Instead of treating it like a dedicated landing page centered around a specific action, it should be designed to serve different audiences from different origins. And to do this effectively, it needs to be built in a targeted manner. In other words, you need to incorporate elements that drive traffic, educate visitors, and encourage conversions.

To improve the performance of your homepage, check out these elements that every homepage must have.

12 Critical Elements Every Website Homepage Must Have

to save

12 Critical Elements for a Website Homepage Infographic

to save

Share this picture on your website

Please add the attribution http://blog.hubspot.com to this graphic.

12 Critical Elements Every Homepage Must Have

What to include in your website homepage design

1st heading

Within three seconds, a website has to tell visitors what the company has to offer. This is where your headline comes in. It might be just a few words, but it is one of the most important copies on your website.

Many types of people may visit your website and find it difficult to come up with a few words that will go down well with everyone. Instead, write your headline to target a third of the people who are most likely to be happy with your product.

Keep the headline itself clear and simple. Dropbox’s headline is a great example: “Everything you need to do for work, all in one place.” It’s simple, yet powerful – you don’t have to decode jargon to find out what Dropbox is really doing.

Dropbox website home page

2. Subheading

Your subheading should complement the heading with a brief description of what you do or what you offer. This can be done effectively by focusing on a common weak point that your product or service is solving.

Here is an example of a great subheading from Mirror: “Hide in Sight”. It is the main selling point of the Spiegel fitness studio: It is a complete home fitness studio, a personal trainer and a training plan, all from the comfort of your home, without burdening valuable equipment with equipment.Mirroring the website homepage subheading that says to hide in sight

Use larger fonts to optimize the headlines for mobile and give visitors a better experience. Small fonts can force mobile visitors to pinch and zoom in to read and interact with your website’s content. Our advice? Use the heading options in your page editor. H1 headings are perfect for page titles – there should only be one H1 on a page. Sub-headings should follow the order of the hierarchy, H2, H3 … H6, etc. You can have more than one of these headings, just make sure they are okay. For example, you don’t want to jump from H1 to H3 – choose H2 instead.

3. Primary Calls to Action

The goal of your homepage is to force visitors to dig deeper into your website and move them down the funnel. Add two to three calls-to-action above the fold that direct people to different stages of the buying cycle – and place them in places that are easy to find.

These CTAs should be visually eye-catching, ideally in a color that contrasts with the color scheme of your homepage and yet matches the overall design. Keep the copy short – no more than five words – and action-oriented so that visitors are forced to click on what you are offering. Examples of CTA copies are “Register”, “Make an appointment” or “Test for free”.

There are two CTAs on the Afterschool Headquarters website, both of which are aimed at program directors interested in promoting their after-school programs with families on the website. The note under the longer CTA “Create Your Free Profile” gives visitors the nudge they need to create an account – the first step in becoming an afterschool HQ provider.

4. Supporting picture

Most people are visual. Make sure you use a picture (or even a short video) that clearly shows what you are offering. Use images that capture emotion, drive action, and visually tell the story you are writing about.

To optimize your images for mobile users, use high-quality images with reduced file sizes. (HubSpot customers don’t have to worry about that as images uploaded to the HubSpot software are automatically compressed. Otherwise, tools like TinyPNG will do.) Also, always add alt text to your images to keep them safe for visitors Make the use of screen readers more accessible and increase your SEO efforts.

The 4 Rivers Smokehouse homepage is a great example of emotional imagery: it has a series of short, high definition, and delicious videos that loop around behind a simple heading, subheading, and primary CTA:

4 Rivers Smokehouse website homepage featured image with a cheese burger

5. Advantages

It is not just important to describe what you do, but why what you do matters. Prospects want to know the benefits of buying from you because that’s what compels them to stick with you.

Keep the copy light and easy to read, and speak your customers’ language. Evernote does an excellent job of listing benefits on its home page in a compelling, visually appealing, and easy-to-understand way:

Evernote Website Home Page Benefits

6. Social proof

Social evidence is a powerful indicator of trust. Your product or service could be the best in the world, and it’s okay to make that claim – it’s just that people may not believe you unless they hear from other people too. And that is exactly what the social proof does.

Only add a few of your best (short) quotes to the homepage and link to case studies if necessary. Adding a name and photo will add more credibility to these testimonials. Lessonly nails this on their homepage with glowing testimonials from actual customers.

Testimonials and reviews from the Lessonly website home page

7. Navigation

The design and content of your homepage navigation can make the difference between a website conversion and a jump. Right from the homepage, give your visitors a clear path to the pages they need to reduce their bounce rate. Make the navigation menu visible at the top of the page and organize the links in a hierarchical structure.

Nobody knows your website better than those who helped create it. So be sure to conduct user tests to ensure that visitors to your website can find what they are looking for easily and intuitively. Include a search box if you can. (For more helpful website navigation tips, check out this blog post.)

Here is an example of a clean, well-structured navigation design on Slim & Husky’s Pizza Beeria homepage:

Navigation on the homepage of Slim and Huskys

8. Content offering

To generate even more leads from your homepage, offer a really great range of content, such as: B. a white paper, an e-book or a guide. People who may not be ready to buy may prefer to download an offer that gives them more information on a subject they are interested in. If you need inspiration, there are several types of content to choose from.

9. Secondary Calls to Action

Include secondary CTAs on your homepage to provide additional conversion opportunities to potential customers who aren’t interested in your primary goal. Think of them like the contingency plan: they provide another avenue for visitors who aren’t ready for something as engaging as you want them to be.

While your primary CTAs should be above the fold, place secondary CTAs below the fold so visitors can click on them as they scroll down. For example, on the Spanx homepage, under the fold, you’ll find three clearly labeled calls-to-action that give people who have scrolled this far a few more options to click. These secondary CTAs are designed for two different types of conversions: one on the far left for $ 20 off and another that “shop now” for exploring the online catalog.

Secondary CTAs from the Spanx website home page

10. Features

In addition to the advantages, name some of your most important functions. This gives people a better understanding of what your products and services offer. Again, keep the copy light and legible. Dropbox for Business, for example, is not afraid to display a function matrix directly on the homepage below the crease.

Dropbox for the homepage functionality of corporate websites

11. Resources

Again, most of your site visitors won’t be ready to buy … yet. Provide people looking for more information with a link to a resource center where they can search relevant information. Not only does this keep them on your website longer, but it also helps you establish your credibility as a thought leader in your industry.

Lovesac adds a resource link to the footer below the fold. Notice how each of these secondary CTAs cover multiple stages in the buying cycle: a credit card link that customers can use to easily purchase their furniture, a fabric swatch guide for those looking for the perfect color before they buy, and an online catalog for people who who are in the new furniture market but not ready to make a purchase.

Lovesac website home page with resources and CTAs in the footer

12. Success indicators

In addition to customer success stories, both awards and recognitions can help make a great first impression. Is your company a critically acclaimed restaurant? Were you voted the best new app this year? Inform your homepage visitors about your services. Like social proof, it gives your company more credibility to those you don’t know.

For example, on the Calendly home page, you can find the names of famous organizations that recognized them, such as Gartner and Dropbox.

Calendly website home page

A homepage well worth seeing

The home page of your website is the first introduction any visitor has to your business. Before you decide to become a customer, check your homepage to get an idea of ​​what you are selling, why it is important to you, and how you can benefit from what you offer.

Make a brilliant first impression with a homepage that includes the elements described above. For more inspiration, check out the following home page examples by downloading the free lookbook below.

Editor’s Note: This post was originally published January 2012 and has been updated for freshness, accuracy, and completeness.

Examples of brilliant homepage, blog and landing page design