Posts Tagged ‘design’

Content And Usability Before Blog Promotion

Monday, September 8th, 2008

I occasionally come across new bloggers who are eager to generate traffic to their blog.  They become focused on blog promotion and SEO before their blog is ready. I applaud their efforts, but I think it’s a mistake to promote your blog to prematurely.

Photo by Kelly Asmodee via Flickr

A good web site should serves a purpose.  For instance, a commercial site’s purpose might be selling some sort of products.  Without a well designed site, catalog of products, easy-to-use navigation, and secure eCommerce system, there’s no point in promoting the site because all the effort will be for naught.  Likewise, your blog serves a purpose — may be you want it to tell your story, share your interest or your expertise.  The commonality is that all blogs need some kind of content; as such, you should have at least a few good posts on your blog before you even attempt to promote it. And don’t even worry about SEO until you have sizable number of posts.

In addition to content, you should also design the blog for usability.  In general, blogs are well designed out of the box, but there are a few things you could do to improve it further:

  • Choose a professional looking theme
  • Navigation is clear and consistent
  • Feed subscription button is clearly visible, preferably above the fold
  • Search box is available and easy to find
  • Archive is easily accessible (I prefer a simple link in the navigation bar that links to a full archive page)
  • There is no unfinished posts
  • All links are working

By focusing on your content and usability first, you are giving your visitors good reasons to become readers, and hopefully, they’ll come back in the future.

This article was featured in:

How To Design A Usable Reader-Centric Blog

Thursday, February 28th, 2008

One of the most common design issues associated with web sites, and especially with blogs, is clutter. It’s so easy to fill the sidebar with links, widgets, and clicklets. So easy that even the most ardent minimalists have to stop and unclutter their sites from time to time. So, how do you decide if something should be displayed on your blog? Here is an easy to follow process to help you unclutter your blog.

Look and appeal

Photo by Kelly Asmodee via Flickr

Four steps to design a more usable reader-centric blog:

1. Look through your readers’ eyes

Put yourself in your readers’ shoes by visiting a few blogs. For each, go through a few pages and answer the following questions:

  • Which elements did I interact with?
  • Which elements did I ignore?
  • Which elements did I find helpful?

Do you see any common theme emerging? Are you consistently interacting with the same elements, but not others? Most likely, your readers are doing the same. Another great way to do this is to invite a few friends over and watch them interact with your blog (better turn off AdSense while you are doing this).

What is the purpose of this whole exercise? It’s designed to desensitize you. You are different from the typical blog readers. Things that you take for granted are not as obvious to them as it is to you.

2. Review you blog with reader-centric mind

Now that you are more sensitive to what the readers are looking for, take a look at your own blog. You should be able to put each element into one of these 4 buckets (your classification may differ from mine):

  • Essential — the blog wouldn’t work very well without them. For example:
    • navigation bar
    • link to individual posts
    • search box
    • comment box
    • etc.
  • Valuable for readers — these are things that are useful for readers, but your blog would function fine without them. For example:
    • Content
    • Related posts
    • Popular posts
    • Archives
    • Categories
    • RSS feed links and logos
    • etc.
  • Valuable for your blog — these are things that the majority of readers ignore, but may be useful for your blog. For example:
    • Advertisements
    • Stat counters
    • Blogroll
    • etc.
  • Useless — these are things that don’t help your readers, you, or your blog. Why is it even there in the first place?
    • WordPress meta links
    • Calendar
    • Advertisements or affiliate links that doesn’t make you any money
    • How much is your blog worth? widget
    • Spam counter
    • You comment, I follow logo
    • numerous other widgets and clicklets

3. Unclutter!

Now remove anything that you marked useless. Then give your elements some white spaces, or lines of separation, to make it look clean and organized. For text blocks, you can use justified text alignment make them look clean. While you are doing this, there might be some opportunities to shorten, reduce, or eliminate unnecessary text, headings, and graphics.

If you are looking for specific suggestions to unclutter your blog, I highly recommend Skellie’s 50 Tips to Unclutter Your Blog.

4. Rearrange for Optimum Placement

Congratulation you completed the first step toward cleaner better blog. However, there’s still room for improvement.

Based on your judgment in step 2 you should move essential elements toward the top of the page; follow by most important and/or most frequently used items; and least important and/or least used should be toward the bottom.

Moreover, you can utilize heat maps like the one from AdSense, or ones that customized for your site — e.g., Crazy Egg, Google Analytics, etc. — to further optimize your blog. You may find that certain things perform better on the right side of the page as opposed to the left or the middle. You may find that elements you though we’re important or frequently used by your users are really aren’t.

For more articles about uncluttering your blog:

How to Find the Right WordPress Theme

Tuesday, February 5th, 2008

Whoa, is there such a thing as the wrong WordPress theme? Sadly, the answer is yes. There are literally thousands of themes out there. There are some really good ones, and inevitably, there are some bad ones too.

Moolanomy Theme

Where to find WordPress themes

Before I show you what make a theme bad, I would like to share some resources where you can find WordPress themes:

10 Signs of Bad WordPress Themes

This is not a hard and fast rule, and certain flaws are worse than others — also, some could be fixed with relative ease. Note that my theme doesn’t pass all the tests either, but I know where the problems are and I am working on it. In other word, you may have a tough time finding the perfect theme that passes all these 10 points.

  1. Ugly — I know beauty is in the eyes of the beholder. So you have to decide on this one. If it’s ugly, move on and don’t even bother.
  2. Doesn’t stand out — Another design problem is using a theme that looks the same as everyone else’s. Worse, you have a theme that look very similar to the more popular blogs in your niche. Your theme is an important part of your brand, so it’s worth investing a little time to make yours stand out.
  3. Bandwidth hog — Some themes have too many images, large CSS file, add-on JavaScript files, and large HTML files. Make sure that what you are getting is worth the bandwidth usage. To check your theme bandwidth efficiency, check out Web Page Analyzer from Web Site Optimization. If you use Firefox, try Firebug and YSlow add-ons combination (awesome!). Some tips on reducing bandwidth usage:
    • Reduce the number of images, scripts, and external CSS file (each image takes at least 1 HTTP request)
    • Optimize images to make them smaller
    • Reduce the size of CSS file — i.e., using Clean CSS — or you can do it on your own by stripping out comments, extra spaces, reduce long-hand coding to their short-hand equivalents, etc.
    • Eliminate unnecessary clutters from your blog — i.e., links, text, images, widgets, clicklets, etc.
  4. Database hog — Some themes can make a lot of unnecessary calls to the database. For example, Tigopedia Reloaded uses only 2 database calls compared to its predecessor that uses 30+ calls. Other than that, judicious use of plug-ins will also help reducing database usage.
  5. Invalid HTML — This is probably one of the easiest problems to fix. Unfortunately, some theme designers don’t even take the time to validate their code. To check if your theme validates, try the W3C Markup Validation Service. You can use the “show source” option to help you track down and fix problems.
  6. Invalid CSS — This is similar problem to the HTML validation. To check your CSS validation, try the W3C CSS Validation Service.
  7. Poorly optimized for search engines — There are many articles about how to optimize WordPress for search engines, but when it comes to theme, we are dealing mainly with location of content relative to other code, use of headings, and use of links. In general, good theme has the following characteristics:
    • Present main content first and sidebar(s) afterward
    • Use only one H1 heading for the post title (some may argue using H1 for blog title, but I think it’s more advantageous to use H1 for post title)
    • Use links sparingly and link directly to the post title
  8. Poor separation of content and design — Good theme should make good use of id and class attributes. It should have very little style declaration inside the template files itself. Also, CSS and JavaScript code should be in separate files and not included with the main HTML page.
  9. Inflexible (hard to modify) — Code should be clean, well formatted, and strategically commented. I have tried several themes in the past and there are some that are so hard to work with, I simply stop using them.
  10. Portable — One of the common problems I see when visiting blogs through a portable device (e.g., a blackberry) is bad rendering. Occasionally, I will see blog showing broken CSS code before I can get to the content. If you have an opportunity, check your site through a portable device and see for yourself. To get an idea on how your blog appears on text only or portable device, try Lynx Viewer.

I hope this post help you find your next theme. Before I go, I also want to share a really cool plug-in called Admin Theme Preview. This plug-in let your blog runs uninterrupted, while you can work on a new theme in the background.