12 Critical Elements Every Website Homepage Must Have [Infographic]
This page acts as the virtual front door of your company and is responsible for collecting a large part 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 has to be built on purpose. In other words, you need to incorporate elements that will attract 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
Share this picture on your website
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.
2. Subheading
Your subheading should complement the heading with a brief description of what you do or what you offer. This can be effectively achieved by focusing on one general pain point that your product or service is solving.
Here’s an example of a great headline from Mirror: “Hidden 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 in the comfort of your home, without burdening valuable equipment with equipment.
Use larger fonts to make the headings more 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 an H1 to an H3 – choose an 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. Include two to three calls-to-action above the crease that guide people through different stages of the buying cycle – and place them in easy-to-find places.
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 “Try it 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.
![12 Critical Elements Every Website Homepage Must Have [Infographic] 1](https://www.prowell-tech.com/wp-content/uploads/2021/05/1622220341_497_12-Critical-Elements-Every-Website-Homepage-Must-Have-Infographic.png "12 Critical Elements Every Website Homepage Must Have [Infographic] 6")
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.
Use high quality images with reduced file size to optimize your images for mobile users. (HubSpot customers don’t need to worry about that as images uploaded to HubSpot are automatically compressed. Otherwise, tools like TinyPNG will do.) Also, always add alt text to your images to make them more accessible to visitors make use of screen readers 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:
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 shopping with 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 a great job of listing the benefits on its home page in a way that is compelling, visually appealing, and easy to understand:
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.
7. Navigation
The design and content of your homepage navigation can mean the difference between a website conversion and a bounce. 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:
8. Content offering
To get even more leads from your homepage, have a really great content offering, 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 are not 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 down as they scroll. For example, below the crease on the Spanx home page you will 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 for two different types of conversions: one on the far left for $ 20 off, and another, “Shop Now” to explore the online catalog.
10. Features
In addition to the benefits, list some of your key features. 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.
11. Resources
Again, most of the visitors to your website are not ready to buy. Provide people looking for more information with a link to a resource center where they can search relevant information. Not only will this keep them on your website longer, but it will also help 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.
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: gardener and Dropbox.
A homepage that is worth a visit
Your website home page is the first introduction that every visitor receives to your company. Before deciding to become a customer, check your home page to get an idea of what you are selling, why it matters 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.
