Close
Close

Blog Design for ROI Rule #6: KISS Headers, Navigation, and Sidebars

This guest post is by Gab Goldenberg, author of The Advanced SEO Book.

This post is the sixth in a series on blog design for ROI. Previous posts in the series were:

  1. Prioritize the Optin Form
  2. Highlight Your Key Content
  3. Show Love To Your Community
  4. Make Posts Easy To Read
  5. Engage Readers on Archive Pages Fast.

One area that blog designers regularly get wrong is the design of secondary elements, and I should know, since I made the error myself.

In this 2008 screenshot of my blog, the header, sidebar, and navigation are roughly as loud as a drunk protesting he shouldn’t be thrown out of the bar. Maybe louder!

SEOROI in 2008

The sidebar was screaming for attention, distracting people from reading the post content

Not only was my sidebar loud, but the ample whitespace in the header drew attention to my slogan. At the same time, the dark contrasting background I’d used for my main navigation and breadcrumb trail drew eyes there.

There was no clear focus to the design at all.

You might think that this was an accident, that I wouldn’t have made such a loud sidebar if I’d known better … I wish. Really, my idea was that having a prominent sidebar would allow me to periodically try different marketing messages there in order to gain more business. Similarly, I wanted people looking at and clicking on the navigation since the pages listed there were sales-oriented.

Considering the popularity of widgets (typically styled sidebar boxes like the one above) in the world of WordPress blog design, I’m probably not the only one prioritizing the sidebar over the main content.

So today’s rule really just has a simple message for myself and my fellow business bloggers.

Keep It Simple, Sam: the KISS rule applied to blog headers, navigation and sidebars

Simpler headers

Takeaway #1: Don’t distract visitors with big logos and branding. Either offer an opt-in form in that space or just tone down the branding and move your content up vertically.

Surprise! People’s top priority in visiting your blog is not to admire your logo and branding, nor the sidebar and your awards. It’s not even to click around your navigation.

Your visitors’ number one priority is to read your content.

What do many of us do? We load up large header graphics and massive logos, which not only push our content further down the page, but also distract the eye and brain from their goal:

Peter Shallard's blog

Peter Shallard’s blog features a very large header

MogulMom

A mega-sized logo takes pride of place at MogulMom – but she’d be even more successful than she is by scaling down her logo

Of course, this delaying and distracting of readers with large branding graphics is counter-productive. Why?

It’s a waste of space to use XXL branding, because we could instead prioritize the email signup form, which definitely feeds our long-term audience growth.

Another reason is that we want visitors to start reading fast, so we can maximize repeat visits and build our audience.

Simpler sidebars

Takeaway #2: Don’t distract visitors with long blogrolls, loads of award badges and other unruly sidebar features.

Keep the sidebar’s visual weight secondary, and minimize the clutter.

Chances are that your awards and reads you enjoy are not directly relevant to the specific post somebody has loaded or to the given archive page, let alone the About Us or Contact pages. So why not move the blogroll, category and tag links to their own separate pages?

Have a page with links to your favourite blogs. Add another page to serve as a general archive clearinghouse with links to each category and tag page.

What should you feature in your sidebar instead?

  1. Earlier in this series I discussed the importance of showing attention to your community. The sidebar is a good place to do that.
  2. You can have widgets that highlight related content (e.g. tag-based) as well as popular content from the same category the post is in. This personalizes or contextualizes the content suggestions, which most readers appreciate.
  3. 3. Write an About page summary in the sidebar.

And what about subscription calls to action?

As I mentioned earlier, it’s best to place these in visually prominent areas above and below the main column rather than in the sidebar. If that’s not possible, then the sidebar is the next best place.

Think of your sidebar as a complement to your post, and you’ll be more successful than if you see the sidebar and post as competing for attention.

Simpler navigation

Takeaway #3: Your primary menu has a place on every page … but a secondary place.

Remember how my blog’s menu drew attention to itself with rich colours, instead of helping eyes rest on my content?

Learn from my mistake and keep your navigation’s visual weight secondary. A light grey or white background will do, and the breadcrumb navigation really does not deserve to be at the center of things, much less to have a highlighted background.

For more on visual hierarchy, see this great post on Search Engine Land and this one on the 4 degrees of visual hierarchy in wireframing.

Keep it simple!

The massive header branding does far less for you than either getting the visitor to join your newsletter or read some content—so use your space accordingly.

To the same effect, reading post content is more important than clicking links in the main navigation, blogroll, or discovering the admiration some other group has for your blog. Making the sidebar visually loud makes it harder for people’s eyes to read the post normally.

Keep it simple and watch your readership grow!

Gab Goldenberg and Internet Marketing Ninjas are developing a book based on this series – get your free copy at http://seoroi.com/blog-design-for-roi/ . You can also get a free chapter of Goldenberg’s The Advanced SEO Book.

About Guest Blogger

This post was written by a guest contributor. Please see their details in the post above. If you'd like to guest post for ProBlogger check out our Write for ProBlogger page for details about how YOU can share your tips with our community.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. Thanks for writing this Gab,

    It’s time to talk about the over cluttering design trend that needs to come to an end.

    Hopefully popups are next.

    Someone smart once said the most sophisticated design is a simple one. KISS

  2. Eric says:

    This is simply brilliant. I really appreciated hearing this tips and keeping it simple. I would fully agree that large branding logos are annoying and distracting. You really nailed it down and enjoyed reading this post.
    I really liked your suggestions for the sidebar. Though I am little confused on what exactly your meaning by adding a about page summary in the sidebar. What do you mean by about page summary?

    • Dustin Small says:

      Eric – I think what Gab means is that you can actually write a short paragraph about yourself or the blog in the sidebar, with a link to read a more detailed description on the About page.

    • About page summary = tell readers about yourself in a few sentences; they can click ‘read more about me’ to go to the about page.

      Thanks for the compliments Eric :)

  3. Dustin Small says:

    This is actually some pretty good advice that makes sense. I’ve got a big “in-your-face” slogan on my page, which I am now considering getting rid of after reading this post. I like the look of it, but you’re right – it probably detracts from the content, which should be the main focus.

  4. Thanks for the clear, simple advice. I’m not a designer, so I never know if what looks good is necessarily optimal. This gives me some very basics that I can easily implement with no design background. The logo was never a problem for me because I don’t have one! I just have my site title, which I think is fine until I can invest in a more branded logo.

  5. Danny says:

    Very well written post, Gab..

    I went through the post a second time and had the opportunity to absorb far more helpful insights….

    I like the part you brought up regarding the site design distracting readers away from actually getting down to reading content.

    My own site is quite bland, partly due to my not including my own logo and header designs as they are way too “over the top” and have too many layers…

    I do believe that a simple yet, powerful loco and header design is needed to “brand ” a site…otherwise, the site will not stand out…though, some sites have incredible designs yet, their content does not measure up at all…..

    Some popular sites have done a great job of keeping their design to a bare minimum, whilst still maintaining their own unique branding…..

    • I agree you want a simple, powerful logo… but it should not be the visual focus of the page, since that’s counter-productive to getting people to read.

  6. Vikas says:

    This is awesome brother.

  7. Deny Saputra says:

    Agree with you Gab! Keep it simple and make people easy to enjoy it.
    Just in case if you’re looking for simple clean design, you can take a look at mikemcalister’s portfolio, it’s a simple attractive WP theme (I used one of his handcraft for my personal blog) http://goo.gl/s7Afi

  8. mohit says:

    Blog design is one of the most important thing of a blog or site and this is the only thing which makes the impression of our blog on the visitors,so it is the most important to make our blog attractive and easy to navigate to

  9. its a pretty good written blog by the author.tips for the slider bar and navigation bar are very good.I agree that large branding logos are annoying and distracting.You really nailed it down and enjoyed reading this post.

  10. Very extensive and nice article. Will surely use it on my blog.

  11. Tony Nguyen says:

    As I look at the design and placement of widgets and stuffs, they look very simple but has a great impact for ROI. I was really amazed with the results. Whoever posted this content, I say thanks!

  12. John says:

    well, This is true that headers can increase ROI of your business. I have seen that most of the bloggers are using their logo small and use side of header as advertising place !

  13. Dana Wilson says:

    Thank you for including the examples of what not to do. Very helpful post – thanks!

  14. Great points about utilizing design to direct your reader’s attention!

    I have a counterpoint to your Takeaway #1 about not including awards in your header though. (Or similarly, not including mentions of where you’ve been featured.)

    I think doing this is a strong credibility builder and builds social proof that you can be trusted. If you check out Ramit Sethi’s homepage header at http://www.iwillteachyoutoberich.com/home/ you’ll notice that he hammers you with the idea that he is well respected by including where he has been featured and screen shots of tv interviews.

    • Fascinating example there, Alison, n just spent about 10 minutes reading his blog.

      What you’re referring to is not his blog however, but his website homepage, which he’s using as a marketing landing page. If you go to his blog, you’ll see that the press mentions are a lot more subdued in grayscale colors. That said, his focus there is on the sidebar, as opposed to the content area, because that’s where he promotes his goods. IMHO, that’s sub-optimal, because you could actually write self-promoting material in the main area and be successful with that.

  15. design is important criterion for blog or website which make the viewer to judge something about the blog and its content ….