What Should Go On Your Homepage?

Posted on Saturday, November 14th, 2015 No Comments


What Should Go On Your Homepage?

The homepage of a website can be the most difficult page to figure out. It’s easy to set up the standard interior pages for a website, such as the “About Us” page, the “Contact” page, and a “Services” page, because it’s clear what should go on those pages. But what should go on the homepage? In this post I will explain the overall concept and purpose of the homepage, and then illustrate the ideas with three layout examples.

It’s a Summary

The homepage of a website should act as a summary of the entire site. Use it to give visitors a small taste of each important part of the website. Highlight the pages and content that you want to make sure visitors don’t miss.

Elements

For the sake of having an example to work with, let’s consider a website for an imaginary retail store. Let’s say this shop sells educational toys. What should go on their homepage?

  • Logo and Navigation Bar: In most cases, the business logo should appear at the top or top-left, and a navigation bar should be directly underneath or to the side of it. This should be consistent across the entire website.
  • Location and Contact Info: Since this is a local shop, it should be easy to find. The address and phone number should be on the homepage (and possibly every page, maybe in the header and footer.) A Google map to the store might be useful as well.
  • A Headline: Most websites should include a headline that sums up what the business is, using a keyword, if possible. For this imaginary store, it could be something like, “Educational Toys for Home and School.”
  • A Representative Image: In the case of a retail location, this could be a large photo of the front of the store.
  • Product Examples: The homepage could feature a few products that represent the type of products sold at the store. This gives visitors a better idea of what they can find at the store, and it also starts to draw them in to product pages.
  • Promotions: If there are any promotions, sales, or discounts running, these can be mentioned on the homepage.
  • About Us: The About Us page is usually one of the most-visited on any website because people immediately want to know who actually runs the business. Give visitors a taste of this on the homepage with a small summary of the business history or the business owners.
  • Testimonials or Reviews: This imaginary store’s homepage could feature a few customer comments about how delightfully educational their toys are.
  • Social Media: Include links to the business’s social media profiles.
  • Fresh Content: To keep the website fresh (for people as well as search engines), rotate in some new content on a regular basis. This can be accomplished by showing a summary of the most recent blog post, or by featuring a new product every week, or by showing some news about the store like a featured customer or a community outreach program.

What you choose to showcase on the homepage depends on what’s most important to you. Ask yourself what you most want to point out to visitors and give them a quick sample on the homepage.

Slideshows?

Arguments could be made for and against homepage slideshows. My opinion is that it doesn’t matter much either way, as long as it’s not causing a problem like significantly slowing down load times. If you’re struggling to think of what to put in a slideshow, perhaps it’s not worth having one at all. But if you have some interesting content to feature, that’s fine as well. Search Engine Land has an interesting article with some points against slideshows. Overall, there’s no need to include one if there’s no real reason to have one.

“Above the Fold”

The concept of keeping all important information “above the fold” is a little outdated. Yes, you should still give visitors the information they really need without requiring them to scroll down. However, you don’t really know where the “fold” is for each individual user. They could be using a large monitor, a laptop, a tablet, or a smartphone, all of which will have wildly different cutoff points where the first view ends before scrolling. So the better solution is to provide easy access to the most important information within your main navigation bar.

Blog Posts

The majority of your homepage should not be the full text of blog posts. You can certainly include a link to the blog, or even show summaries of the latest few posts, but any website that shows mostly blog posts on the homepage looks like a blog, and nothing else. If your website’s purpose is only to be a blog, that’s fine, of course. But if your website is meant to represent an entire business, it shouldn’t look like someone’s journal.

Layout

Now that you have an idea of what should go on your homepage, you might be wondering how to arrange it all. Here are few things to consider:

  • Elements in the top-left of a page tend to get the most clicks and attention.
  • Place the most important content near the top. Think of it like a news article: answer who, what, where, when, and why at the top, and then fill in the rest from most to least important.
  • Keep the visitor engaged with the page from top to bottom. Arrange each element so that they’ll want to keep scrolling to see what’s next.
  • Give the visitor something to do. Use buttons and other calls-to-action to tell them exactly what to click and what to do next.

Theme Restrictions

If you’re using any kind of CMS or ecommerce solution (like WordPress, Shopify, Drupal, Joomla, Magento, etc) your web design will be handled by a theme. The theme will probably have a pre-made layout for the homepage. Some themes are very flexible and let you create your own layouts, but some themes are completely inflexible. So, you may be locked in to the homepage layout that your theme provides, unless you know enough about coding to change it. If this is the case, you can always find a new theme.

Layout Examples

I created three layout examples to give you an idea of how you could arrange your homepage. These are just ideas, so you can add and remove elements as you need to. Feel free to use these for your own website and share the graphics on Pinterest!

Layout Example #1: Educational Toy Store

For this first example, I made a layout that corresponds to our imaginary toy store.

homepage-layout-series-1

Higher-quality PDF download

Layout Example #2: Medical Service

This layout example could be used for a medical website like a dentist office or doctor’s office.

homepage-layout-series-2

Higher-quality PDF download

Layout Example #3: Software Download

This last example is for a SaaS (software as a service) or any other software download website.

homepage-layout-series-3

Higher-quality PDF download

If you found these layouts useful, please share them on Pinterest!




Posted in Web Design.