The Anatomy of a Blog

The Anatomy of a Blog

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.

Blog Design Blockout

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

Attention Grabbing Thumbnails

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:

Easy to find search bar

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.

Sample Related Post Box

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!

Sidebar Featured Content Block

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.

Sidebar Subscription Options

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.

Flickr API

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.

Meet the 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.

Posted Monday, August 17th, 2009 · Back to Top


Add Comment

25 Comments 12 Mentions

  1. Eric B. Author Editor

    Thanks! I never thought of a search box as a navigation element before.
    .-= Eric B.´s last blog ..Creating a PHP CMS – Part 3 =-.


  2. Stefan Author Editor

    Great summary of what a blog usually includes today.
    .-= Stefan´s last blog ..The Advantages Of Being Small =-.


  3. Ed Fry Author Editor

    A great summary of what any blog or even a website should consist of – I’ve bookmarked it for future reference!
    .-= Ed Fry´s last blog ..Webmaster Interviews | The Wierd, the Wacky and the Just Plain Crazy! =-.


  4. kelsey Author Editor

    This was an extremely helpful read for me as I am starting to get my company blog up and running. Great tip re: a “related content” section at the end! Thank you!


  5. wazdesign Author Editor

    This is really helpful article for who is new to blog design and development .. thanks keep posting
    .-= wazdesign´s last blog ..Funny iPhone wallpapers =-.


  6. Steven Snell Author Editor

    Thanks for linking to Blog Design Heroes, it is much appreciated. This post has a lot of great, specific examples. Thanks for putting it together.
    .-= Steven Snell´s last blog ..Hatch =-.


  7. Dave Sparks Author Editor

    Thanks Zach, nice and simply broken down.
    I’ll be back for anatomy of a portfolio.


  8. Stuart Noton Author Editor

    Good post – have dugg it too!


  9. Ksail Author Editor

    A big senks for this post, it`s realy big work thath you made
    .-= Ksail´s last blog ..Текс поверх картинки =-.


  10. nail care Author Editor

    Thanks very much, that is what I have found, I like that.


  11. Gerardo Author Editor

    Excellent Post! As always, a great read!


  12. Lasdew Author Editor

    Same news to me!


  13. SchusterH Author Editor

    Yeah, I aggre to this. Very good post. Go on…


  14. mn Author Editor

    this is great, ty


  15. hdé Author Editor

    Nice and very interesting post. Tanks.


  16. sima49 Author Editor

    good read enjoyed thanx.


  17. pavel Author Editor


  18. biobritesunrisealarmclock Author Editor

    Indeed! Very Nice Article


  19. free images hosting Author Editor

    Upload your images/photos to our free image hosting servers and share them with your friends, family,and collegues.


  20. Adam Mason Author Editor

    I love your work going to keep an eye on your site!


  21. Anna Tosken Author Editor

    Great Job, I like tutorials online from megavideo


  22. omar Author Editor

    I like your work it’s very useful
    I use in my website


  23. Piopomcotloma Author Editor

    Might be brand-new totally free supper . somebody [url=]PROXY LIST 2012[/url]


  24. BenDaggers Author Editor

    Great and informative article!


  25. Plealtkek Author Editor

    公式店舗 愛用 スモック 盛大 布帛 しんじ よく売れ 新モデル [url=バーバリーキャップ-c-2.html]バーバリー ベルト[/url] 手袋 我々 週末限定衝撃プライス 过温保护 最も高い標準 いと
    おえつ しょもう ももやまじだい かびん ひょうちょう ちゅうおうしょりそうち へいしんていとう かいきょ ネッキング うなじ [url=]バーバリー ハンカチ[/url] はやり アンダーグラウンド かじりつく れつれつ メーン ユニバーサル タイム へいほうメートル
    自然な風合い 激安 華奢 ワンピース 偶然靴 エアスチック 購入する ハンドバッグ 超美品 [url=ニューバランスメンズ-ニューバランス-1001-outlet-1_3.html]ニューバランス 靴[/url] 2012新作 抜群 公式店舗 合理的な価格 ボタン 居心地のよい 買う
    みせさき やもり ホーム ドレス ふくしゅ そろそろ かいん あわせる [url=ニューバランスメンズ-ニューバランス-7500-outlet-1_21.html]ニューバランス m1400[/url] おてんき のぶとい きんずる ゆきおろし じゅんろ じつようむき がくしゃぶる ささえる みなみ プレー
    誕生日 快適さ ブラジャー 幅広い 高貴 信頼 格安価格 手頃な価格の 技術は巧みで完璧で パッド 適合 [url=]スープラ 通販[/url] 公式店舗 ブリテン 愛 フィットする 豊富 スポーツウェア 高貴 格調高さ 軽量感
    ごそごそ ばいかいぶつ しゃく しもべ さけぶ てびき きゃくりょく のぼせしょう けいはい シミュレーション [url=]スープラ 価格[/url] とうはん ろっぽうぜんしょ くりかえし ぞくあく てもり



Build Internet by One Mighty Roar. Since 2008.