The Anatomy of a Blog

Zach Dunn on August 17th, 2009 Posted in Articles

This is the first part of our week long Website Anatomy Class series.

When you hear the word “blog”, what comes to mind? Is it still an online diary written by angst filled teenagers? Or is it something a little more composed?

Blogs have expanded in leaps and bound over the past several years, and they’re no longer just a place for people to record their daily activities. Blogs have spread to industries of news, entertainment, and public relations.

In today’s website anatomy lesson we’ll look at these trends and components of modern blogs.

Parts of the Average Blog

We’ll start with a sample block out of a typical blog design. This may not be the cookie cutter template for all sites, but I’ve found that the majority of blogs in the web design niche tend to follow this general idea.

The Main Content

Modern blogs tend to be multiple column layouts, with a focus on one main column for content. This is the content area responsible for the posts, pages, and archive views on the blog.

Here are some of the most important considerations in today’s blog designs.

Visual Front Page

Text is great for a lot of things. Grabbing attention is not always one of them. Fortunately that’s where using images can pick up the slack. A thumbnail next to a headline helps illustrate the subject without any need for words. It’s quick, easy, and breaks up the page.

Thanks to jQuery, including a “Featured Post” slideshow to show new content has also become a popular choice. With the added bonus of eye catching motion, it does wonders to grab attention. Tutorial9 has a great example of a slider in action.

Easy to Find Search Bar

Blogs posts are displayed reverse-chronologically. The longer a blog exists, the more content gets pushed back into the rarely-visited “page 16″ and beyond. This doesn’t mean that the post is obsolete — just hard to find.

Having a built in search is extremely important for blogs with hundreds of archived posts. Even more important? Having a search box that’s displayed in an easy-to find spot. Take CSS-Tricks for example:

Did you have any problem finding where the search box was? Probably not. Next to the main navigation, the search bar is prioritized in the header. The result is a navigation that exists entirely above the fold.

Rope In With Related Posts

Once a reader finishes an article, do you really want them to leave? A “related content” box following the end of a post takes everything interesting about the current page, and puts up similar content to entice a reader to go deeper. The sample box below comes from UXBooth. Want to make your own? This tutorial will get you set up to increase pageviews.

Common Sidebar Elements

In a multi-column column layout, additional columns are secondary and act as a sidebar. While most blogs only have two columns, it is not unheard of to have more (e.g. Smashing Magazine).

In modern blogs the sidebar is the sidekick to primary content. It holds links to archives, highlighted posts, and ways to connect further to the site. Across the board, there are certain trends that continue to show up over and over again. Let’s start with displaying select posts:

Featured Posts & Content

The first common piece is a section dedicated to highlighting posts and pages that might otherwise be lost after a week or two. Blocks showcase the most popular posts over a specific time frame, the view count, or special subject (e.g. Freelance Freedom Comic Strip).

This is a great way to bring new readers up to speed with “the classics” on your blog. If you don’t make a point to show them, newcomers could be missing some of your best content!

Subscription Options

Bringing in a consistent base of readers is key for a blog’s continued growth. With this in mind, extra space in the sidebar is often used to offer further ways for readers to keep up to date with the site via email or RSS.

Sites with larger subscriber numbers like to publicly display the count. You could argue that this help builds credibility for the blog. Having a larger number shows that you’ve got a lot of interested people already following the site, and that’s powerful word of mouth for first time visitors.

Other Online Presences

Since sites like Flickr and Twitter released API’s for their services, the latest updates accounts on these sites can be pulled directly into the page without having to ever leave the site. In the web design niche it’s popular for a site to have a Flickr pool of inspiration for readers to contribute to.

Just like RSS subscribers, it’s also getting more common to see a blog’s Twitter followers presented somewhere on the site. Envato’s Mac AppStorm blog is pioneering a new idea by actually displaying the total combined number of Twitter and RSS subscribers.

Authors are Accessible

You may be wondering how exactly an author plays into the fundamentals of a blog. Blogs writing is nice because in most cases, there is real everyday person behind each post. There is less separation between the reader and the original author.

If you think about it, it’s the social part of blogs that determines a lot of the layout direction. There’s a much more intimate setting created when a reader can post their comments directly onto the same page as the author’s work. Blog communication is more of a conversation, and less of a letter to the editor.

Design elements like author boxes and comprehensive about pages help build a personalized brand behind the blog itself.

Improving Your Own Blog

Using observations from the above design trends, here’s a quick checklist of pointer for bringing your own blog layout up to speed:

1. Have large headlines and images to bring in reader interest
2. Avoid putting too many things in the header. Keep it relatively simple, and easy to navigate.
3. Take advantage of your personality to help connect with readers.
4. Have important parts (e.g. Search box, subscription, ads) as close to the top of the page as possible. This will help them get the most exposure possible.
5. Use API’s to bring together all of your blog’s web presence in one place.
6. If you have any links that you don’t know what to do with, try putting them into the blog’s footer.

Further Reading

I’ve compiled a list of articles and sites that showcase blog designs to help you get a broader vision of the trends covered above. Have any of your own to share? Leave a link in the comments below.

1. 11 Outstanding & Fresh Blog Designs You Should Check Out Right Now
2. Blog Design Heroes
3. 45 More Excellent Blog Designs
4. 51 Amazing and Inspiring Blog Style Web Designs

We’ll see you back here tomorrow for the Anatomy of a Portfolio Site.