Homepage Elements: What You Need to Include (Or Not) and Why

About six months ago someone suggested I should write a post about what should be included on a homepage.

So I captured my homepage into a jpg, took a good look at it, compared it to a load of other blogs and websites, and decided it was rubbish.

Even though Fairy Blog Mother® had just won the Organisation Digital & Technology Category of the National UK Blog Awards 2014, I still shuddered whenever I looked at my blog. Something desperately needed to be done.

I really felt I couldn’t write such a post when my own homepage was so awful. So I’ve been busy since then, investigating, creating and trialling many versions, and this is what my blog’s homepage looks like at the end of October 2014:

And the jury is still out. If you are reading this post in the future, it will probably have changed again!

I know I use my own graphics within a DIY theme, but that is what gives it its charm. Being a Graphic Designer turned Digital Marketer, I wanted to implant my own slant on web design, and be able to apply anything new I had Iearned about digital marketing, which includes what should go into a homepage.

Think of your visitors first

One big mistake some people make is that they think they need to include EVERYTHING on their homepage.

This is a bit like setting up a car boot stall and displaying all your goods all in one go. But this will result in confusion, your visitors won’t be able to understand or appreciate exactly what the business is about, they won’t know what they should do next, and more than likely will leave as rapidly as they came.

What a wasted opportunity. The last thing you want is for your homepage to put your visitors off; you need to encourage them to stay.

Give them something to do

Actually there are three things a visitor to a homepage needs to do:

• Recognise and be reassured they’ve come to the right website
• Immediately understand exactly what the website is about, or what the blog post trying to say
• Do something constructive that helps both the visitor and the website’s owner’s objectives. This could be as simple as deciding to read what’s in front of them, before clicking to read your latest blog post, browsing via the navigation bar, or signing up to your newsletter.

And this all has to happen within a second, even with the third point. It’s certainly not three seconds any more, because people can turn away well within that time.

And if there is any confusion at all, which can even occur due to the design or ambiance of the website, you will have lost your visitor, who will more than likely never return.

Let’s start from the top

The area ‘above the fold’ on a website’s homepage is extremely important, as it is what people see first. This needs to include as much information you can give your visitors before they have to scroll down. Also you also need to be aware that laptop screens are much shallower than PC screens, therefore you shouldn’t waste this opportunity to showcase as much as you can in this area.

At the top of your homepage there should be a banner (or masthead) that introduces the website’s business title, or blog’s subject or niche. If the name presented doesn’t explain exactly what is in the tin, you will need to include a strapline to clarify, enhance or explain the website’s title. This should be descriptive, concise and helpful.

Navigation bars traditionally go across the page, either above or below the banner. This is because visitors usually expect to find it there, and during that short second they are scanning your homepage, they will be taking in as much information as they can, which will include the pages or sections they could explore.

Other elements that should be presented near the top are contact details if you’re a business, such as a telephone number and email address:

or social media buttons if you’re a blogger that regularly participates in social networking and wants to encourage people to visit. Some clever designers incorporate these into the banner:

or alternatively place them as close as they can to the banner, as I have done with mine.

Don’t waste your space

Remember space above the fold in your homepage is at a premium. It should contain as much information as possible to clarify what the website or blog is offering, but it should not be distracting.

In the old days this are was taken up with a descriptive picture. Or even an image that just looked nice. Nowadays this space contains a video or a slideshow. Apparently it’s important to have a moving visual presentation to explain your business.

This is fine if the video is short and dynamic, or the slideshow is regularly populated with new new and appropriate material. But if the visitor is impatient, and hasn’t time to listen to a video, or can’t be bothered to wait to read all the slides, this can be seen as a meddlesome distraction that takes up valuable homepage retail space.

My old homepage contained a Doodle video, which was supposed to be quirky and fun, and I even customised the YouTube screen to entice people to click. Even though it lasted just over a minute, most of my visitors didn’t bother watching it. If you have the time to see it, take a quick gander here, it is worth it!

Being the killjoy that I am, I suggest it would be much better to present a static image (or even interactive) display of what you have to offer instead, which is much more easily scanned, appreciated and understood within a short time.

Show your wares

Below my navigation bar I have inserted three widget spaces that advertise what activities I am offering, which also appear on most of my other pages. I have made them as visual as possible to draw attention to them.

I also had this feature on my old homepage (as you can see above), but they were very dull, and nobody clicked on them.

Since then I’ve learned that these need to be eye-catching, ask a question that relates to the visitor, and ideally should contain a call to action, which unfortunately these don’t. My next phase would be to work out how to include this to make more visitors click on them.

Recently I explored The Streamline Pro Theme on the Genesis Framework by CopyBlogger for a client:

This is from the example page, which shows three boxes that can be directed to specific pages or sections within the website.

What I like about them is their big orange call to action buttons: Read More. In fact wherever you click on these sections, it goes to its destination, but it’s those buttons that really make you want to click on them.

So I tried my own version of a call to action here:

Hmmm, still work in progress. Previously these images just looked like the other pictures above, so my visitors didn’t realise they were clickable. But by adding in the red call to actions in the top left hand corner, hopefully this will induce visitors to notice, click and enjoy what’s on the other side. We shall see.

I’ve also included a similar call to action at the top of this blog page (yes, I know it’s not the homepage, but hopefully you will forgive me):

With a big red button telling the visitor what to do.

Sometimes you need to include instructions to get a response. Never assume your visitor will understand which images should be clicked on, or even wave their mouse around to see whether anything is interactive. The magic words ‘click here’ can do wonders if it is appropriately applied.

Benefits and features

Whilst doing further research for this post I came across the concept of showcasing features versus benefits. My homepage certainly advertises lots of features using my purple imagery:

What is missing is promoting some of the benefits I could offer. Most likely your homepage will consist of text rather than imagery, and in fact this is more appropriate to include suitable keywords for SEO purposes. But remember that your visitor will be scanning rather than reading, so use clear bullet points rather than copious text.

But really your benefits should be highlighted in your website pages or within your blog posts. Use features to attract your visitors to venture further into the site to find out more, where you will have more room to explain the benefits in plenty of detail.

Provide some incentive

Sidebars should include additional information that encourages the visitor to find out more about the website or business. Here you can place a subscription or newsletter sign-up form, accompanied with a delicious image of the prize attained if you succumb. Its best position would be at the top, to capture the visitor’s eye while it roams around the homepage.

I know this isn’t the case with my present homepage, even though it was with my old version. The search facility, unnecessarily repetitive remnant social media icons and the National UK Blog Awards 2015 badge have taken precedent. Maybe subconsciously these have more priority than my newsletter subscribers? Hmmm.

Actually showing off consumer proof of your expertise and prowess on your homepage is a good thing. Look where I advertised my blogging award, right under my banner! And also I have included widgets in my sidebar and underneath my content that randomly shares my testimonials, presents badges of blogs I’m pleased to be associated with, and links to my latest blog posts:

You may have noticed I’ve moved my sidebar from the left to the right. Previously it was considered necessary to have the most important elements presented as close as possible to the top left hand corner, as that is where the visitor’s eye starts its journey. This seemed more appropriate for my newsletter sign up forms (I had two then, even more confusing for my poor visitors!).

But – it hindered people from reading the main content, which ultimately what is important in a blog. A left sidebar closed the site inwards, whereas a right sidebar appears to be more airy and welcoming.

Can my homepage be too long?

This used to be a bone of contention, especially when space above the fold attracted more attention. But with the advent of smart phones scrolling has become the norm. And there are some new themes that virtually reveal the whole website when you pan down.

But don’t fall into the trap of the car boot seller, by including absolutely everything on your homepage. Get to understand your target customer or audience, know what they want from you and what you can offer them, and present it as efficiently as possible to avoid confusion. Remember simplicity and clarity is key.

Only the correct incentives will encourage a visitor to scroll down. If vital stuff is unavoidably presented in a lower position, include anchor links disguised as call to actions near the top. In fact make sure it’s as easy as possible to explore the site via bright call to action buttons or images, in addition to what is presented in the navigation bar.

What do you think?

Let me know your views, and if you write about your homepage in your blog, include the link in the comments below.