Feeds

The Secret for Effective Blog Homepage Design

Submitted by nathanrice on May 22, 2007 - 9:13pm in

It's nothing you haven't heard before. Simple things like knowing what to put above the fold, placing your ads in the right places, designing around a brand, and being both simple and memorable ... these are the kinds of things we all know we should consider when designing our blogs. But sometimes amidst the frenzy of coolness, we forget about usability. Sure it matters where you place your ads, but if it gets in the way of a graceful user experience, will it even matter?

And I don't even mean the W3C usability standards either (although that's a good place to start). I'm talking about simple psychology. Where does a reader's eye go first on the page? How does he/she scan articles? What fonts are the most readable (without being ancient)? What colors go well together? How long should a line of text be?

Think about a newspaper. The front page has all the key elements a reader is looking for (or has come to expect). The name of the paper, major headline and partial story text with perhaps a picture, secondary headlines and story excerpts, table of contents to other stories and categories, and maybe an advertisement or two. Also notice the length of the lines of text in the story text ... you think they are short like that by accident?

Bloggers can learn a lot by studying the strengths and weaknesses of mainstream media. Blog designers can do the same thing. I mean, there's no reason to reinvent the wheel.

1. The title of your blog

Make it prominent, but don't let it overshadow your content. I know this seems like common sense, but there are too many blogs out there who forget this simple, but effective, strategy. Your blog title should serve 2 major purposes: Identify/brand your site, and get the user back to the homepage (by making it a clickable home link). Making it too big or bold doesn't help either of these purposes, and could in fact do damage to your brand. For a good example of what a title should look like, have a look at the site you're on right now, performancing.com.

2. Headline Stories

This may be a little less clear, and I understand there are loads of opinions out there about how you should handle headline stories on the homepage. Personally, I'm a fan of either using the tag (in WordPress), or calling excerpts for homepages. This allows the blog owner to fit more content on to the homepage, and allows the reader the option to quickly "scan" for what they want to read. There are some bloggers who would never do this though, and believe the reverse chronological list of full articles on the homepage is the best way to go. You'll have to make that call for yourself, and perhaps do some trial and error, but this you can be sure of ... the way you list your stories on your homepage is NOT an insignificant detail. It matters a lot.

3. Secondary headlines

This is actually pretty interesting, and if you've never actually looked under the hood of your blog software or theme, you may want to skip this one. There are plenty of ways of displaying "aside" stories on your homepage, and it's something I really like. It gives the blog author a quick way to communicate non-critical information to the reader without getting in the way of the major blog headlines. Perhaps in the future, I'll do a tutorial on how to put a small "aside" box in your sidebar or maybe at the very top in a colored box or something. Another good option is putting the headlines from your different categories into an "aside" box. Either way, it's a great use of real estate on your homepage.

4. Table of Contents

For a newspaper, it's the place where it lists the sections and what pages they are on. For blogs, it's called "recent articles" and "categories". Displaying these on your homepage is a fantastic way of letting your reader know what your blog is all about. Descriptive titles for both your posts and categories are always a plus.

5. Ads

Honestly, I think this should be the last thing you should consider when building your homepage. But there's no doubt that placing your ads intelligently is important, especially if you use pay-per-click ads like adsense. You don't want to hide them at the bottom, but you also don't want to sacrifice prime headline real estate on ads. This makes for a bad user experience. There are plenty of tips on how to place ads, so I won't beat that dead horse. Just be sure to put a lot of thought and research into placing your ads.

Studying the mainstream media and piggybacking on their readership research can be a great way to optimize your blog's homepage. Pick up a newspaper (preferably a successful one) or magazine and see what they do ... then rip them off :-) A simple, yet effective piece of advice.


Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <h2> <h3> <h4> <img> <div> <a> <em> <strong> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <span> <table> <td> <tr> <caption> <th> <hr> <pre> <br> <p> <object> <param> <embed>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
5 + 3 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.