Yup, we had to build a Blog!

Homepages in WordPress are often a neglected topic. People just tend to settle for what the theme they’ve selected offers.

If they’ve selected a traditional blog theme then the homepage is usually the listing of the most recent posts. If we’re dealing with a product theme then the homepage usually contains a big image of the product and a couple of boxes for some marketing copy. And so on…

We’ve been talking about the theme selection process in the previous post, but now let’s focus on just one element of your theme – the homepage.

The homepage structure should never be left to chance. If the theme you’ve selected proposes a different homepage structure than what is best for your particular site then you simply don’t have to settle for the default solution.

But before I can give you some exact examples on how to change the homepage structure of your blog let’s answer the main question:

What’s the best homepage for your site

If you’ve done a good job at picking your theme then you already have a purpose for your site and you know what you want to do with it.

The homepage is the place where you must tell the whole story of your site in a very compact form.

By telling the story, I mean that the visitor should have no doubts regarding what the site is about and what it can do for them. The mission of the site should become clear during the first 2 or so seconds of looking at it.

If you want to make that happen you should start by focusing on the main element of your site.

Secret #1: Starting with the main element

I’ve been discussing the idea of the main element in many of my posts. Not to bore you with all the details, every website needs one main element, again … only ONE main element.

Since you already have your goals set and the purpose clear, finding this main element shouldn’t be hard. Essentially, the main element is what your site is about.

If you’re running a traditional blog, for example, then your main element will most likely be the content itself. However, in order to give the content some proper focus you should take care of good <h> tags usage and nice typography design.

In the end, in such a case no real tuning is necessary as WordPress displays the latest posts listing as the default homepage. Lucky you.

However, if you’re running a news site then even though the nature of the site is quite similar to a traditional blog the homepage will be a little different. While blogs are about focusing attention on each individual post, news sites are about showcasing the biggest amount of content possible, in a headline-only manner (or with a short description). That’s why news sites should use much shorter leads than traditional blogs.

For product-focused sites, obviously, the product is the most important element, and your homepage should convey this message in the clearest way possible. If you’ve selected the right theme for this purpose then showing your product on the homepage shouldn’t be a problem.

In the end, no matter what your site is you should make your main element so ridiculously visible that it stands out like a purple cow.

Secret #2: Support your main element with others VISUALLY

Your main element will only be as visible as the remaining elements on the homepage allow it.

For example, when the product you’re selling is your main element, but you’re displaying a video right next to it, and some ads on the side, and a twitter stream on the bottom then the product loses the focus and becomes almost invisible.

Selecting the main element is only half the job, toning down everything else is the second half.

Some tricks that can help you with this:

• Make your main element much bigger. This is probably the easiest trick in the book, but it works, and it shouldn’t be neglected just because of its simplicity. The idea is this: (1) make your main element big, (2) leave it and come back after a couple of hours, is it big enough (?) if not, go back to step #1, if so make it 1.2x bigger anyway.
• Use exclusive colors. Our brain is conditioned to notice any kind of change in anything. When your air conditioning is working, for example, you’ll notice it only if it stops. Same thing with colors. If you want your main element to be noticeable then make the colors it uses exclusive. For example, if your product picture uses a blue color scheme then don’t use blue anywhere else on your site. Remember, make your main element the purple cow.
• Use arrows. There’s nothing better at guiding visual attention than using arrows. Simply get yourself a graphical arrow and point it towards your main element. The eye will follow the arrow naturally.

Secret #3: Support your main element with others PURPOSELY

So what’s the difference between supporting something visually and purposely, right?

The former is about making your main element more visible in a purely graphical kind of way. The latter is about making the main element to have more meaning and significance.

Here’s an example. If you run a traditional blog then your content becomes the main element. You can support it visually by using a lot of whitespace and not displaying anything right next to it, also by not using bright colors on anything on the page.

If you want to support this content purposely you can use additional elements like: recent posts list, or related posts list, or a “best of” section, or a custom content menu. The idea is that these supporting elements should make the main element even more significant. They don’t have to speak about the main element directly, but they must support the message it conveys.

For product sites the best supporting elements are things like: customer reviews, ratings, testimonials, guarantees, trust elements, and such.

Secret #4: Above the fold is what matters

This is like a web development cliché but I still need to say this: place the important stuff above the fold.

There’s not much place above the fold, so use it only to display your main element and a small set of supporting elements.

In most cases, you don’t need your twitter stream there, or a “follow me” button, or a ton of menus, buttons and links. Homepages should be all about simplicity.

The golden rule of web design has always been: It doesn’t matter how much stuff you can put on a webpage, what matters is how much of it you can remove.

Secret #5: Be careful of standard components

What I see as standard components for a website are things like: logos, main menus, sidebars, ads, social media buttons, and such. Basically, everything that is considered a standard component to appear on a website. However, be careful here.

Of course, you need a logo, and a main menu, but keep in mind that if your logo is not the main element then it shouldn’t act like one. Same for the menu – in most cases you don’t want to focus attention on the menu itself, you want to make it the second or third choice for a visitor who’s not interested in the main element.

Also, most standard components rarely support the main element. They exist on their own, and that’s yet another reason why they shouldn’t be too visible.

How to adjust your homepage

Now it’s time to have a quick “how to” talk on the actual way you can adjust your homepage.

There are three main scenarios here:

• The best scenario – use the customization features in your theme. If you’re using something of good quality it should enable you to tune the homepage to a really wide extent. It’s always best to search for such possibilities before you decide to create your homepage in any other form.
• Use the content section of a static page. Create a standard WordPress page and set it as the homepage. Inside the content section use either HTML selectors, tables or anything else that will let you change the basic layout a bit so it fits your requirements. This will naturally take a bit longer than the previous approach, and in most cases you’ll find it very hard to display your recent content on such a homepage.
• Create a custom page template. As you probably know, WordPress allows you to use custom page templates. Basically, you can create a template using PHP and HTML and then set it as the base for any given page in WordPress. Then you set this page as the homepage. This usually takes the most amount of time, but it also lets you do almost anything with your homepage.

How to check if you’ve done a good job

This is probably the most difficult part. No matter what you do you won’t be able to rate your job until you do something else and then compare the results (split test).

However, there are some indicators you can notice right away. Simply look at the number of clicks on your main element in comparison to the clicks on all the other elements of your new homepage. Your main element should naturally attract the most attention and therefore receive the majority of the clicks.

Or maybe you have a better idea for assessing your homepage’s performance (feel free to comment)? Also, how did you go about creating your current homepage?