The ultimate guide to your website’s homepage
What to put on the homepage of your website?
Written by Nadin Thomson
Have you been on a website that says “Welcome to our website” or “Great to see you here”? Have you been on a website that carries a strange big headline such as “Stern solutions for savvy businesses”? If someone showed you this headline, what do you think the business offers?
Many website owners put a lot of effort in their website’s homepage (i.e. the page that’s displayed when someone enters your domain without navigating anywhere else), but they completely miss the point of the homepage:
- Strong but precise summary headline which confirms that the visitor has arrived at the correct website
- Clear call to action to visit another page
Especially when you start out with your website, you might be inclined to spend most of your time on the development of your website’s homepage.
Design is often the biggest thing, it needs to be appealing, or clean, or fresh, or inviting, professional, you name it!
However, people want information, and they want it fast.
While design and look and feel are important, information needs to be key.
Let’s dive into the structure of a good homepage. A homepage that’s great for your visitors AND for Google, so that your site can be found.
- Logo & navigation
- Website header
- Photo or no photo?
- Slideshow or no slideshow?
- Above the fold
- Call to action
- You have a few different services
- You have one main service
- Social Proof
- Why should people buy (features vs benefits)
- What is a feature
- What is a benefit
- Blog Posts
- Newsletter Signup
- Website Footer elements
- A word about social media icons
- A word about text size and colours
- Keeping things simple (your services)
- You vs me
- Professional speak
1. Logo & Navigation
Put your logo at the top left (that’s where people expect to see it) and link it to your homepage.
Make sure your logo is visible, but don’t make it huge.
Give your logo enough white space, so it doesn’t look squashed inside the navigation.
In the first example, the logo is too big, in the second example, it sits better within the navigation.
Use short and descriptive words in your navigation.
- Florist example navigation: Home, Weddings, Funerals, Bespoke, About, Blog, Contact
- Personal shopper example navigation: Home, Book, How it works, About, Blog
- Hypnotherapist example navigation: Home, Weightloss, Give up smoking, Anxiety, About, Blog, Contact
Make sure your navigation fits into one line on a normal computer browser. Also check that your navigation turns into the burger icon on mobile devices and pages are still accessible as expected.
The first navigation is really hard to read in the handwritten font. Use easy to read fonts, not too small or hard-to-read handwriting fonts.
2. The top header of a homepage (hero section)
The first headline your website visitors (and Google) see should confirm what your main service is.
Don’t use flowery words, say exactly what it is, where it is and who it is for.
Also make sure that any text on an image is absolutely readable. Please check these two examples – the first one is not readable at all.
I live just outside Edinburgh and have worked as a wedding photographer for many years. So I chose a bagpiper who is based in Edinburgh. His website header is (almost) perfect: https://thepickledpiper.co.uk (the one thing I would change is “More Info”, but more on that later).
He clearly states he’s an “Edinburgh Piper”, leaving no room to guess where he offers his services and what his service is.
In the navigation, he also clearly shows the events you can hire him for: weddings, funerals and events in general.
Photo or no photo in the header?
That’s entirely up to you and the type of products / services you offer. Some businesses offer many different products and to include them all in one image would make the homepage immediately look messy.
- If you’re keen to include a photograph, make sure it supports what your business offers.
- If you include text on the photograph, make sure it’s readable. I have illustrated below how to make text on an image easier to read.
- If you are the product, make it a photo of you.
Here’s a good example of a public speaker and presenter Mel Sherwood:
If you offer different services, you don’t need a photograph as long as your headline is strong, such as on Neil Patel’s website:
There is no rule, but if you’re in doubt, ask yourself: How can I give my visitors the information they are after the quickest way?
Slideshow or no slideshow?
Many websites still use slideshows. They haven’t been a thing for many years. People don’t sit back and watch them and marvel at the animations of the text.
Read this blog post to find out the Top 5 reasons why you should not use a slideshow on your website.
If you feel the urge to include a slideshow, here are the main reasons why you shouldn’t:
- They slow down your website.
- Quite often, they are not mobile friendly.
- We’re so trained by ads that we often equate moving pictures with advertising and blank them out and scroll past them immediately.
You may wonder how you can show your website visitors that you offer different services. At this point, a slideshow seems the obvious choice.
But I urge you to withstand the lure of the slideshow.
Above the fold – and why this is important
What does “above the fold” even mean?
Remember when people bought newspapers? They would normally be folded in half and the top half is the one that needs to entice passers by to buy the newspaper.
It was and still is vitally important that the information and image “above the fold” grabs people’s attention.
This term “above the fold” is also used for websites, however it translates to “before the scroll”.
Make sure you grab your visitor’s attention before they scroll down on the page.
Put the most important headline and information BEFORE the scroll
Don’t make your header image so big that all the people see is the image. Include a short introduction below the header image which is easy to read, but at the same time includes keywords for Google to scan.
3. Call to action (how to use Call to action on your homepage)
A call to action is basically a button or a link that tells the visitor what to do next.
Make sure you include a strong call to action in the header of your website. Avoid using labels like “Find out more” or “Read more” but be precise, such as “Visit the gallery”, “View my portfolio”, “Book your seat”.
4. How to show different services on your homepage (without a slideshow)
If you offer different (related) services, show them in columns below your main headline.
For example, if you’re mainly a wedding dress designer, but you also design and create mother of the bride outfits as well as bespoke tailoring, show them beside each other.
If you’re a photographer specialising in weddings, but you also offer family and new-born photography, add a photo box with a small bit of text and call to action to each specific service page.
The UK insurance company Direct Line does an amazing job with that.
- Create three (or more) boxes on your homepage.
- Give each box a clear product / service headline (on the Direct Line website they are “Home Insurance”, “Car Insurance”, “Business Insurance”
- Include a small bit of text and a call to action for each service
Check out the Direct Line Insurance website. They do an amazing job!
- The insurance company has a gradient colour header (no stereotypical photograph with a happy family…).
- Their main headline “Coming direct could save you money” is a benefit rather than a feature (see more on that below). They know people’s painpoints when it comes insurance. People want to get good cover but save money while doing it.
- They have several call to actions (the green buttons).
- They invite existing customers to do one of two things: Either manage their policy or make a claim.
- The new visitors can see their three main products. The buttons are clearly labeled so that the visitor knows exactly what will happen when they press it.
5. Highlighting your main services on your homepage
If you offer mainly one type of product or service, you could include a video here. You could also have a small clickable portfolio gallery with a few thumbnail images. People can get an overview of your work and click into the image to see an enlarged version.
6. Social proof
Here I don’t mean social media icons! You should have them in the footer of your website (see below). In this section, include things like this:
- Logos of companies that use your service
- Any awards you may have won
- Have you been mentioned in the press?
- Are you a member of a professional organisation?
Include one or several testimonials of people or companies that rave about your product or service. Include (with permission!!) the logos of the companies who love working with you, or a photograph of the person who left you a fantastic review.
You could also include something like “join our 3000+ membership”, or “As seen in the best hotels in Edinburgh” (but only if this is true!).
7. Why should people buy?
Ok, so this might seem obvious to you, but if you work in a highly competitive market, you need to convince your website visitors what’s different about your way of work, your product and/or service.
Different types of people want different kinds of information. Some people are facts driven, other people want to be convinced by the benefits. Either way, it’s best to include both, features and benefits.
What’s a feature?
If you sell a particular family photography package, the features might be:
- 90 minute photo session
- At your preferred location
- 10 prints are included
- 50 photos available for download
What’s a benefit?
When you look at the points above – you can turn each feature into a benefit:
- No rush, we will have enough time for a variety of family photographs
- No need to travel to a studio or strange location, I will join you in your favourite park
- Too hard to choose just 1 or 2 photos? We will give you ten. They make amazing gifts for grandparents.
- No need to worry that your images are limited. You will receive at least 50 photos for you to download and keep.
8. Blog Posts
Include a few blog posts on your homepage which show an image and an introductory text for each as well as a call to action to link through to the full blog article.
In WordPress, there are many options to inclue a list of recent blog posts on your homepage. You can limited them to 3, 6 or any number you want. You can include an image, the first paragraph and so on.
Here I have used the standard Divi Blog post grid display. It provides everything you need. You can also style it easily.
How to get a business email address? Should you stop using your Gmail Email address for business?9 Sep 2022Why it's time to ditch your personal gmail account for a business email address... (such as firstname.lastname@example.org) Do you use your personal gmail email address...
Trailblazing Ecommerce Entrepreneur awarded MBE In recognition of her services to both Women in Business and the Economy, Scottish based entrepreneur Ann-Maree Morrison has been awarded an MBE in Her Majesty the Queen’s Platinum Jubilee Birthday Honours List 2022. In...
In order to have a chance to rank in Google, you need to have a solid website foundation. This article will help you understand the building blocks that are required for good Search Engine Optimisation.
9. Newsletter sign up
In WordPress it’s super easy to include a newsletter signup that syncs with your favourite mail provider. Invite people to sign up to your mailing list.
I created a super simple example in ConvertKit. This literally took me 20 seconds! Sign up and you can see how it works.
10. What to include in the website footer
- Your (business) name
- Your telephone number
- A business address or at least the town and area you operate in (e.g. Richmond, Virginia)
- A link to your contact page
- Links to your data protection & privacy pages
- Links to blog posts
- Social media links
- Logos of organisations you’re associated with or a member of
11. A word about social media icons
Don’t include the social media icons to your profiles in the header, but only as one-colour icons in the footer.
You don’t want people’s first reaction to click on your social media profiles and leave your website as soon as they have arrived. You want to keep them there for as long as possible.
12. Use text size and colour to guide your visitors
People will read bigger text first. You don’t need to be an experienced designer to include some basic design features on your website.
The bigger a text is for one of your services, people will subconsciously understand that this is probably the service you sell (or want to sell) most of.
13. Keeping things simple (your services)
I worked as a wedding photographer for many years (and still do occasionally), but I also offered family and new-born photography.
When I started out, my website was too busy with all the different things I offered: Wedding, family, new-born photography, corporate photography, product photography, event photography, portrait photography, boudoir photography. I was on a journey of discovery in my business!
After years of experience in the different areas, I decided which ones I wanted to focus on most – the ones I enjoyed the most: Wedding photography and family lifestyle photography.
I removed ALL the other types of photography from my website and when you go to my photography website now (www.nadindunnigan-photography.co.uk), you will have no doubt that my main service is wedding photography.
I still do corporate photography (products, people, architecture occasionally), but I removed this from my wedding photography website and created a new website for my business services: web design, SEO, digital marketing & photography.
- If your main business is hypnotherapy for weightloss, say so.
- If your main service is pain relief solutions for cancer patients, say so.
If you are a hypnotherapist, you will treat many different conditions. However, if you are a specialist in helping people improve a certain condition, talk about that A LOT on your homepage and website in general.
You can of course talk about other hypnotherapy areas you treat, such as giving up smoking, weightloss, anxiety etc. However, if your main focus is sleep improvement, make this the biggest (visual) element on your website.
14. You vs me
Stop talking about yourself. Sorry for being so blunt.
No-one cares (sorry for being blunt again).
Make EVERYTHING about your website visitor.
- Why are they here?
- What info are they after?
- What problem do they want to solve?
On your homepage (and on any other page on your website), the words you, your etc. should outweigh me, I, my substantially.
Any sentence you start with “I”, or “My services” – rethink it. How can you rewrite this sentence to make it about your visitor rather than yourself?
15. Professional speak – bin it
Depending on your industry, use industry-specific terms that are most commonly used, but don’t flower up your website to make it look more professional.
The use of passive sentences is something for grammarians, but not for your website.
You should not use passive speech on your website.
If you have a WordPress website, use the Yoast Plugin. This plugin gives each page a reading score and tells you if your website text is too complicated.
And here's my call to action 🙂
Did you find this blog post useful? Why not sign up to my newsletter and be the first to be informed about new articles.
Nadin Thomson started developing websites in 1999 as a hobby and started her business as a web developer in 2004. She has 18+ years of experience in helping businesses of all sizes to create an online presence and improve their website. She's also worked as a photographer in Scotland for 15+ years. The majority of her customers found Nadin through Google as she's continually optimised her website for SEO.
Nadin Thomson has a University Business degree and a Postgraduate Diploma in Digital Marketing.