How browsable is your blog?

Most blogs aren't very browsable. They work well for regular visitors who want to see the latest entry. But for readers who want to explore earlier posts, they can be a challenge.

maze picture
Sometimes navigating a blog can feel like wandering through a maze.

For example, let's pretend we're going to visit a typically organized blog about trees—to see if we can learn something new about Dutch elm disease. We go to the site and see that there is a category for elms with 32 entries. When we click on the elm category we are taken to a page with the 5 most recent posts. These cover topics such as Hairy Fruited Glaucescent Elm, the use of elm wood in coffin-making, Winged Elm and so forth, but not Dutch elm disease. So we go to the bottom of the page, click the "previous posts link" and go to a page with 5 more entries. We then repeat the process until we find the article we seek—or we give up and use the search box (if there is one).

As you can imagine all of this scrolling and clicking can make it rather hard to find things. But it doesn't have to be this way. By making a few adjustments to our template themes, we can alter categories to list headlines instead of full posts, we can create tag pages to let people browse specific topics—as they might peruse the index of a book, and so forth. Below are a few tips on things you can do to make your blog more browsable.

Blogging Platforms Vary

Different blog platforms offer different levels of flexibility when it comes to customizing your site. Most of these tips will require some experience with HTML, CSS and PHP. If you are using a hosted blogging service such as WordPress.com, Blogger or TypePad you won't be able to edit as much, but you may be able to find other themes that offer some of these features.

My blog uses a self-hosted installation of WordPress.org. In it's prior incarnation at http://blog.case.edu/webdev, it ran on Movable Type 3.121 so those are the platforms I'll reference here. (If you are using Movable Type 4, you may need to check the MT documentation. Learning Movable Type is also an excellent resource.)

Alphabetical Index

I added an alphabetical index to my blog several years back because I wanted an easy way to see a list of all my entries on one page. My archives page at that time broke entries out by month so they weren't all listed together, but I also felt that it would be easier to browse things in alpha order.

As it turns out, I visit this page almost every day. If I'm on LinkedIn or Twitter and want to share a link to a specific post—as part of my response to someone—I go to the alpha index to find the link.

Movable Type

Adding an alpha index on MT is pretty easy. When you create the new page for your index, just add the following code:

<MTEntries lastn="300" offset="0" sort_by="title" sort_order="ascend">
<ul>
<li><a href="<$MTEntryPermalink archive_type="Individual"$>"><$MTEntryTitle$></a> <span class="smalldate"> <$MTEntryDate format="%m/%d/%Y"$> - <MTEntryAuthorNickname></span></li>
</ul>
</MTEntries>

If you look at the code you'll see the options are fairly intuitive.This produces a list of entry titles with dates and authors. (In the early days I had a co-author so I felt it would be useful to identify the posts by author). I set lastn to 300 because the default setting would limit it to a smaller number of headlines. Thus I just chose a number greater than the number of articles I had at the time. Periodically I would increase this number to allow for more posts.

WordPress

WordPress is wonderful in many ways, but when I started learning WP, after years of using MT, I discovered that it can be a very different beast. I couldn't find some easy little snippet of code to pop into my template. After a bit of time spent glaring at the WordPress loop and doing Google searches I ended up using the AZIndex plugin by English Mike. This plug-in offers a variety of options such as making an index for specific categories, making an index that excludes categories, indexing pages instead of posts, etc.

Category Lists

rib roast
If this were a food blog, I might assign an article on cooking rib roast to categories such as "meat" and "roasting," a sub-category of "beef" and a tag of "rib roast".

Category pages and lists are only useful if you assign your posts to the appropriate categories. Too many categories can be just as confusing to visitors as too few.

I like to think of categories as general sections—like you might see in a grocery store. You might have categories for meat, produce, dairy, etc. For specific topics within a category you might create sub-categories such as pork, vegetables and cheese. Then to be more precise you can use tags such as bacon, peapods and Brie. This seems like the ideal way to organize one's posts. My blog is not set-up the ideal way—I have too many categories and they need to be cleaned up.

Once you've assigned your post to the appropriate categories you can think about how you will present those to visitors. Many blogs will list all the categories in a side menu (on WordPress this is often done using a categories widget). A surprising number of blogs don't list them at all. Since I have too many categories, I list them on a separate categories page so they don't clutter up my sidebar.

Creating a Categories List on Movable Type

On the old blog I added the categories list using the following code. I formatted it as a definition list just in case I ended up using subcategories or descriptions.

<h3>Categories</h3>

<dl>
<MTTopLevelCategories show_empty="1">
<dt><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> (<$MTCategoryCount$> entries)</dt>
<dd><$MTCategoryDescription$>

<MTSubCategories>
<MTSubCatIsFirst><dl></MTSubCatIsFirst>
<dt><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> (<$MTCategoryCount$> entries)</dt>
<dd>
<$MTCategoryDescription$>
<MTSubCatsRecurse>
</dd>
<MTSubCatIsLast></dl></MTSubCatIsLast>
</MTSubCategories>
</dd>
</MTTopLevelCategories>
</dl>

Creating a Categories List on WordPress

To make the list for WordPress I created a new template file called categorylist.php in which I put the following code:

<?php
/*
Template Name: categorylist
*/
?>

<?php get_header(); ?>

<div id="midbox">
<?php get_sidebar(); ?>

<div id="maincontent">

<h2>Categories</h2>
<ul>
<?php wp_list_cats(); ?>
</ul>

</div>
</div>
<?php get_footer(); ?>

I then uploaded the file to my themes directory. Next I went to the WordPress dashboard and created a new page called Categories. I left the entry box blank and selected "categorylist" as the template to use for the page. After that I added the link to the page in my side menu by editing the sidebar.php file.

Category Archive Pages

As I mentioned in the beginning, many blogs include complete posts on their individual categories pages. These can be harder to browse, so I prefer to use lists. For example, if you visit the SEO category archive you'll see a list of blog entries on the topic along with the date they were posted and the number of comments on each. One can also set up such lists to include an excerpt for each entry to give visitors a better sense of the topic.

Creating Category Archive Pages on Movable Type

Category archives are a standard feature in Movable Type. I edited mine to use the following code:

<h3>Entries in "<$MTArchiveTitle$>"</h3>
<p class="photoleft"><img alt="feedicon16w.gif" src="http://blog.case.edu/webdev/2007/05/14/feedicon16w.gif" width="16" height="16" /></p>

<h2><a href="rss20.xml">RSS Feed</a></h2>

<MTEntries>
<$MTEntryTrackbackData$>

<MTDateHeader>
<h2><$MTEntryDate format="%x"$></h2>
</MTDateHeader>

<h5><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h5>
<p><$MTEntryExcerpt$></p>

</MTEntries>

In this case I used headers and paragraphs rather than a list format. Technically I should have used an <h6> instead of an <h2> for hierarchical reasons. I think <h2> just happened to be available while <h6> was already designated for something else on the site. If you visit the SEO Category page for this example you will see that the list includes the entry excerpts. I've also included an RSS feed at the top for anyone who might wish to subscribe to the feed for just this category, rather than for the whole blog.

If you have individual category feeds you can also use that content to republish them in other places. For example when I was at Case Western Reserve University, we would use the Alumni category feed from the News Center (which I built as a Movable Type Blog) to publish those headlines on the Alumni Web site. (They are no longer doing that on the new site.)

Creating Category Archive Pages on WordPress

WordPress uses the archives.php file to control category (and other) page archives. If you wanted to modify your category archives but leave the others as they are, you could save a copy of this as category.php and edit that file. Here on this blog I simply edited archives.php to add my RSS feed and to list entry titles rather than full posts. Mostly this is just a matter of removing
<?php the_content(); ?> so that the posts won't be included.

If you visit the SEO Category page for this example you will see that the list only includes the titles, date and number of comments.

If I had instead changed <?php the_content(); ?> to <?php the_excerpt(); ?> then you would see excerpts under the titles.

Since the code is a bit long to post here, I created a page showing the code from archive.php for your reference. WordPress provides a great deal of flexibility with these files. You can learn more in the category templates section of the WP Codex.

Tags

As I mentioned earlier tags are a good way to mark posts as belonging to a very specific topic. For example if I put this post in the blogging category, it may be appropriate to tag it with WordPress, Movable Type, alpha index, categories, browsing and navigation. Then users looking for posts mentioning these topics can find them in my Tag index.

SEO plug-ins such as All-in-one-SEO can also use your tags as keywords.

Tags on Movable Type

Tags were introduced to Movable Type in version 3. On the blog system we had at Case.edu, they were used interchangeably with categories (which is why my blog is still so category heavy). So when my blog was on that system I did not have a separate tags page, though some people were using tag clouds on their blogs. Rather than showing you a piece of code I've not actually used myself, here are some links to tag related resources for Movable Type:

Tags on WordPress

If your blog uses a widgetized theme, there is a widget to add a tag cloud to your sidebar. My blog isn't using widgets because I'm customizing my sidebar by hand. And, as with categories, I didn't want to clutter up the menu so I put it on a separate tags page. Naturally this will become more useful after I clean up and reorganize my categories and tags, but it's good to have the page ready.

To make this page I created a new template file called taglist.php in which I included the following code:

<?php
/*
Template Name: taglist
*/
?>

<?php get_header(); ?>

<div id="midbox">
<?php get_sidebar(); ?>

<div id="maincontent">

<?php query_posts("cat=26");
$tag_list = wp_tag_cloud('format=array&orderby=name&order=ASC&smallest=1
&largest=1&unit=em&number=0');
if (!empty($tag_list)) {
echo "<h3>Web Development Blog Tags:</h3><ul>";
foreach ($tag_list as $key => $tag) {
echo "<li>$tag</li>";
}
echo "</ul></div><!-- end tags -->";
}

?>

</div>
</div>
<?php get_footer(); ?>

Since I wanted an alphabetical list of tags, rather than a cloud I set it to use orderby=name and set smallest and largest to be the same size. In a cloud one would normally make largest use a larger size. Then I formatted it to use an unordered list to present the tags.

Next I added a new page called Tags List in the WP dashboard, just as I did for the categories list, but this time I set it to use the taglist template.

Let's make our blogs more browsable for 2010

Whether building a regular Web site or a static blog, I think it helps to give users easy pathways to your content. The above suggestions are but a few of many ways you can make your blog more browsable. Other features can include breadcrumbs, next/previous links, etc. You can even create special topic pages in which you gather together a group of related posts, such as I've done with my Planning Your Web site Tutorial page.

There are also many methods for implementing such features. You might choose to do the same things using a different bit of code, or a plug-in that suits your needs.

If your blog currently uses the typical format that shows post after post after post, try exploring it from your readers perspective. Wander around and see how it feels to browse. Your content is different than mine, so as you explore you may come up with some fresh ideas that I've not thought about. Or you may have already implemented navigation features that make your blog more browsable.

How else might we improve the blog navigation experience? What problems have you encountered, on other blogs, that might be fixed by a few navigation adjustments? Please share your thoughts and ideas below.

Happy Blogging in the New Year!

Other writer's thoughts on blog navigation
heidicool.com is also on Facebook

Need more Web tips? Fan the heidicool.com Facebook page. I'm posting 1 tip/link there per day to offer ongoing advice on Web design, marketing and social media—without overwhelming your Facebook stream.

Bookmark & Share:
  • Facebook
  • StumbleUpon
  • del.icio.us
  • Digg
  • LinkedIn
  • FriendFeed
  • MySpace
  • email

    Share on Google Buzz

6 Comments »
  1. If you scroll over to my blog's archive page -- http://ariwriter.com/archive -- you can click into categories, months, and/or the last 100 posts. I visit that archive frequently.

    Comment by Ari Herzog — December 31, 2009 @6:45 pm

  2. Interesting and useful post. I just revised my personal blog because it had become bloated with features, so I made the whole thing simpler. Doing that also mean doing away with the WordPress monthly archives...but as you suggest, my sitemap has all posts listed by category, and I use that quite a bit. I'm curious why you featured MT and WP but not other platforms that can be used as blogs like Drupal and Joomla. I use WP because in my busy life, it is easy to use and the codebase is well maintained, but I also use Drupal and Joomla for other projects, and occasionally one of those is a blog.

    Comment by Tom Salzer — January 1, 2010 @11:25 am

  3. Ari,
    Thanks for sharing that link, I've noticed that page before, and it is a handy way to present a variety of options for readers. And when you click through to specific categories. it also offers a good example of a blog that uses article excerpts rather than full posts.

    Tom,
    I focused on MT and WP because I have more experience with those, but you're right I should have mentioned Drupal and Joomla when I was referring to the variety of platforms available. It's hard to find the time to learn all of them, but Drupal is on my list of platforms to get to know better. And as open-source CMS's they are also quite popular, so you are probably not the only reader using one of them.

    Thanks for mentioning your TomSalzer.net sitemap page. It provides a nice gateway to your content, and I like how cleanly it is laid out. Between you and Ari I think we're off to a great start on seeing all the different ways bloggers can enhance the navigation experience.

    I just took a look at the source code and saw you are generating that with Sitemap Generator Plugin for WordPress. I think I may have to give that a try on one of the blog projects I'm working on now. It seems like a particularly good option for those who are using WP as a CMS that combines both static pages and blog entries.

    Happy New Year!

    Comment by Heidi Cool — January 1, 2010 @4:03 pm

  4. Heidi, how kind and gracious you are! I often deploy WordPress as a simple CMS for small organizations who do not need a lot of depth. Drupal and Joomla are industrial-strength engines compared to WP, but it is surprising how a WP instance can be crafted to become more like a static website and less of a blog. It somewhat depends on the theme selected, but if a group wants non-technical folks to maintain content on a relatively shallow site, WP is hard to beat.

    Comment by Tom Salzer — January 2, 2010 @7:51 pm

  5. Thanks Tom! WordPress really has evolved into a pretty robust system. I can see using it for sites as large as several hundred pages so long as the content is carefully organized. I still want to find the time to learn Drupal, but WordPress can well serve a significant niche--and the ease-of-use for the site owner is a nice perk. It's a particularly good fit for small biz. At sometime I also want to experiment with WordPress MU, though I've heard rumors suggesting that WP may make MU the defacto product, thus giving everyone a more robust feature set.

    Comment by Heidi Cool — January 5, 2010 @4:44 pm

  6. Wow, thanks for the code. I have been working on my blog design the recent weeks. And yes, I want to make it as browsable and interactive as it can be. There are great entries that end up hidden in the past links and they remain just that--untouched treasures of yesterday's moments and ramblings. I need help.

    Comment by Dave — June 12, 2011 @5:28 pm

Leave a comment

RSS feed for comments on this post. | TrackBack URL