Smashing Magazine - we smash you with the information that will make your life easier. really.

Last week we presented the first results of our study of top blogs. As promised, this week we publish the second part of the survey, including further findings and problem solutions we have found out during the study. In the first part we discussed layout design and typographic settings. What remains to be covered are the navigation design, information architecture, advertisements and functionality (RSS-feeds, tag clouds, pagination etc.).

Reminder: since we wanted to make the survey as objective as possible, we used Technorati Top Blogs and analyzed 50 most popular blogs which appear there. We have identified important design problems and considered solutions for each of the problems separately.

We have posed 30 questions which we wanted to to answer with our blog survey. Below we present further findings of our survey of popular blog designs — the second part of the analysis of 50 popular blogs according to Technorait’s Top 100.

Please notice: the results presented below should not be considered as guidelines for an effective blog design. They are supposed to give you the intuition of which solution may be better than the other one. Still it is useful to know what big players do and, more importantly, what they don’t do.

3. Structure

Information design is usually even more important than visual design. The structure and hierarchy of the content (the way the content is presented), has a tremendous impact on how visitors perceive the presented information and how well they can scan it when looking for some specific information. In the context of the information architecture navigation plays the most important role.

3.1. Navigation menu: top, left or right?

Few years ago, before the wave of blogs has overflooded the Web, it was an unwritten rule to place the navigation menu on the left-hand side of the layout. Today it definitely does not hold for top blogs.

We have found out that

• 58% use right-hand side (vertical) navigation
  (Scobleizer, TPM, CrunchGear, Neatorama, Google Blog, DailyKos, Engadget),
• 52% use a primary horizontal navigation at the top (often combined with a right-hand side secondary navigation)
  (A List Apart, Google Blogoscoped, Dooce, GigaOM, TreeHugger, Smashing Magazine, Mashable, ReadWriteWeb, Ars Technica, TechCrunch, Huffington Post),
• 12% use left-hand side (vertical) navigation,

Actually, visitors do not care whether your navigation menu is placed on the top or in the sidebar. As long as your usability tests confirm that most first-time visitors can easily identify the menu and use available options up front, you are on the right side. So essentially you can use any of the solutions presented above.

ReadWriteWeb uses a primary horizontal navigation at the top of the layout.

In fact, visitors aren’t really confused when the navigation design doesn’t completely follow conventions. However, it is designer’s task to ensure that the navigation is clear and unambiguous — independent of how exactly it is designed.

A number of users prefer the right-hand side navigation, because from the ergonomic point of view it is more pleasant to use. Since 70-95% of people are right-handed, it is sound to assume that the mouse pointer usually reseats on the right half of the window.

Why? The scroll bar is placed to the right of the browser window. Hence, if the mouse doesn’t have a wheel users need to use the scrollbar more often than browser-buttons in the toolbar of the browser. Since scrollbar is necessarily used on most (or at least many) of sites the mouse pointer is likely to be close to the scroll bar. Consequently, the required motion path to the right-hand side navigation is smaller than the path to the left-hand side navigation.

3.2. How many posts on the start page?

From the user’s perspective there is nothing worse than an extreme cognitive load which comes from the information overload on some site. As Smashing Magazine we know exactly how hard it is to find the optimum between extensive article and information overkill.

When too much information is presented to the users, they try to escape the cognitive load — they bookmark the page for future visits (and never visit it again) or simply close the browser window, because they can’t cope with the information presented to them.

Presenting an optimal amount of content is crucial to keep your visitors on your site and, more importantly, make sure that they’ll come back to your site.

• 28% have 14 – 18 posts on their start page
  (Tuaw, Slashfilm, Gizmodo, TMZ, Lifehacker, ArsTechnica),
• 26% have 10 – 12 posts
  (ProBlogger, TechCrunch, Dooce, ReadWriteWeb, CrunchGear),
• 14% have 20-26 posts
  (ValleyWag, Seth Godin, Search Engine Land),
• 10% have 2 – 6 posts
  (A List Apart, Smashing Magazine, CopyBlogger),
• 10% have 27 – 35 posts
  (Kottke, Boing Boing, ThinkProgress, Neatorama),
• 8% have 7 – 9 posts
  (GigaOM, Mashable, TreeHugger),
• 2% have 36+ posts
  (Andre Sullivan, 50 posts).

Ars Technica has excerpts of 18 posts on its start page. 28% of top blogs have 14-18 posts on their start page.

3.3. Are related and popular posts displayed?

We couldn’t identify a trend toward displaying links to the articles related to the post currently viewed by the visitors. 54% of top blogs display related posts (GigaOM, CopyBlogger, ProBlogger, ReadWriteWeb, Mashable, Engadget, TreeHugger), while the rest does not display them (Dooce, TechCrunch, BoingBoing).

Only 48% of top blogs display popular posts. Among them are Zen Habits, CopyBlogger, DailyKos, Mashable, ReadWriteWeb, Smashing Magazine and Huffington Post. Most recent comments are displayed by 16% of the blogs (ReadWriteWeb, BoingBoing, TreeHugger, TMZ, Tuaw). However, the majority of the blogs doesn’t present recent comments on the start page at all.

GigaOM belongs to 54% of top blogs that in each article display a list of related posts. In fact, the blog displays links to related articles twice.

3.4. What information is placed in the footer?

Most web-sites use footers to present rather unspectacular information such as terms of service, W3C-hints, help, copyright and links to the “about us”-page. However, there are more options available (see Footers In Modern Web Design: Creative Examples and Ideas). Interestingly enough, our survey provides some useful ideas for design of a footer as well.

The footers may contain

• copyright, legal, privacy, terms of service, terms of use (90%),
• link to the “about us”-page (40%)
  (GigaOM, TMZ, ProBlogger, ReadWriteWeb, Ars Technica),
• link to advertising-page (38%)
  (Slashfilm, Dooce, GigaOM, ReadWriteWeb, Gizmodo).
• link to the contact information (30%)
  (Kottke, GigaOM, ReadWriteWeb, ProBlogger),
• links to RSS-feeds (22%)
  (Slashfilm, Ars Technica, BoingBoing),

BoingBoing has navigation options as well as links to RSS-feeds and e-mail-subscription in its footer.

• link to FAQ or Help (22%)
  (Gizmodo, ArsTechnica, Andrew Sullivan),
• search box (14%)
  (Dooce, Tuaw, Engadget),
• link to the top of the page (10%)
  (TreeHugger, Zen Habits),
• link to the start page (10%)
  (Kottke, CrunchGear, Joystiq, TPM),
• link to the site map (8%)
  (Andrew Sullivan, Wired, Tecaucus @ NY Times),

Joystiq’s footer is neither beautiful nor effective. Less is sometimes more. The image under the footer is an ad.

44% of the blogs display more than just a simple copyright-disclaimer and few links. For instance, Zenhabits (with some kind of a site map) and Netorama (with further navigation options). Problogger additionally presents a link to the about-page. 58% use a “standard” approach which often is chosen to be rather minimal (e.g. Techcrunch). The rest uses no footer at all.

4. Advertisements

In many cases, particularly when considering top-blogs, advertisements are necessary to keep the site alive, pay bills for traffic, support the editorial team and hence enable the publishers to actually publish the content. And most users are willing to have disturbing and colorful ads next to the content if they get the information they are looking for. But where is the limit and how do big blogs display ads on their sites? And what are users used to? Let’s find out.

4.1. How many ads per page?

Bad news: the blogosphere is heavily infected with ads. Only few sites don’t contain any advertisements at all and in most cases there are more than 2-3 ad blocks per page. Usually blogs combine sponsor ads with text link advertising similar to Google AdSense. Disturbing contextual advertising (underlined links with pop-ups) could be found on 12% of the sites.

The number of advertising blocks on an article page is usually the same as the number of blocks on a start page or even slightly higher. Reason: many publishers tend to use text link advertising such as Google AdSense in the articles or below the posts. Further findings:

• on average 5,84 advertising blocks per start page
  (Mashable has most ads (20), TechCrunch wins the second place (15)),
• on average 5,96 advertising blocks per article page,
• 68% of the blogs use Google AdSense
  (among exceptions: Kottke, Scoble, Joystiq, Tuaw, CopyBlogger, Valleywag, GigaOM),

The award for the widest ad block goes to Kotaku with an 1000px ad block in the middle of the page.

4.2. Are ads displayed in the content area?

In the content area of the layout ads are usually placed directly below the post. We have observed that advertising in the middle of the post is still popular, however it is used (relatively) rarely.

According to our findings,

• 76% had no ads in the articles (but might have ads below or above)
  (Dooce, A List Apart, ReadWriteWeb, Mashable, TechCrunch, BoingBoing),
• 44% had ads below the article and before the comments
  (ProBlogger, Zen Habits, Engadget, Smashing Magazine, Tuaw, CopyBlogger, GigaOM),
• 18% displayed ads within the content (Huffington Post, Yanko, PerezHilton, Slashfilm, Search Engine Land),
• 6% displayed the ads directly below the headline and before the content of the article
  (Smashing Magazine, Neatorama, Yanko),

4.3. Where are ads placed in the layout?

Apart from the content area one usually expects ads… well, everywhere: at the top, on the right-hand side and even at the bottom of the page. Indeed, on 12% of the reviewed blogs ads could be found everywhere — on the top, on the bottom, on the left and on the right of the main content. That’s not good. But, apparently, users got used to it and stubbornly ignore disturbing ads consuming the content offered to them.

Further findings:

• there are ads on the right-hand side (88%)
  (GigaOM, CopyBlogger, Engadget, TechCrunch, Smashing Magazine),
• there are ads on the top (42%),
  (Gizmodo, Talking Points Memo, Autoblog, TreeHugger, TMZ, PerezHilton),
• there are ads on the left-hand side (34%)
  (Lifehacker, Mashable, Gizmodo),
• there are ads on the bottom (24%),
  (Andrew Sulivan, Tuaw, Wired).
• there are no ads (8%),
  (Google Blog, Think Progress, Seth Godin).

5. Functionality

To achieve its primary goals, design needs to be not only user-friendly, but also functional. All important functions should be available and clearly visible and the user must have a simple intuition of what actions are required to actually use them. For instance, new visitors should know up fron where is an RSS-button, where are social buttons, where the search box is placed and how to contact the owner of the blog.

5.1. Are social buttons and icons used?

Social icons have managed to become popular, yet they are far away from becoming a standard. Icons are used slightly more often than simple text links. Web-services such as Addthis which hide a number of popular social buttons behind one single “social” button and display them once this button is hovered are quite popular. Advantage of this approach: content area remains clean and provides a good overview of available option. Disadvantage: some users may not find the way to vote for the story on a social network.

According to our findings,

• 54% of top blogs use social icons below the post
  (GigaOM, ProBlogger, Mashable, Ars Technica, BoingBoing, ReadWriteWeb),
• 38% don’t use social icons
  (Dooce, Google Blogoscoped, Scobleizer, Political Ticker),
• 8% use social icons above the posts (Smashing Magazine, TreeHugger, The Huffington Post).

Netorama uses social buttons embedded in a bubble. RSS-feed and e-mail-subscription are available as well.

5.2. RSS-feeds: position and visual appearance

Since an RSS-button is probably the most important design element which binds visitors to the blog, it should be given a prominent position in the site layout. In fact, there was a good reason behind designing large, glossy RSS-buttons in the Web 2.0-era: these buttons needed to be visible at the first glance.

Therefore it’s not surprising that RSS-buttons still (usually) can be found in the header of blogs. In fact, only 38% of top blogs display an RSS-button in the header, while 28% present it in the top area of the sidebar. The middle area of the sidebar (8%), bottom of the sidebar (14%) and footer (8%) are used as well, but they are not as popular as the upper area of the layout. However, here RSS-buttons often appear additionally to the button at the top of the site.

It’s interesting to notice that only 66% of the sites used a standard RSS-icon to indicate their feed, while the rest used simple text links for the same purpose.

GigaOM has two RSS-feeds and an alternative e-mail-subscription.

Regarding the number of available RSS-feeds: we’ve found out that 64% of top blogs have only 1 main RSS-feed. Often comments-feeds and tags-feeds are available as well; however, it seems that only few blogs actually offer multiple channels (e.g. feeds for some specific topics). In 56% of the cases publishers were offering an e-mail-subscription as an alternative to RSS-feeds.

24% publicly display the number of RSS-readers, usually via Feedburner. Wordpress-users can consider Feedcount as a handy alternative and define their own designs for the button. However, here Feedburner is required as well.

Zenhabits displays the number of site’s RSS-subscribers.

5.3. Tag clouds in use?

Tag clouds provide a good overview of the popular topics covered on a blog and their weight throughout the blog. However, 90% of top blogs don’t have any kind of tag clouds and present standard navigation options instead. According to our intuition there is often just no space for a tag cloud which is why when a tag cloud is used at all then it is rather small and compact.

Among sites who have a tag cloud are The Huffington Post, ReadWriteWeb and Joystiq. You can find more information about tag clouds in our article Tag Clouds Gallery: Examples And Good Practices.

5.4. Pagination in use?

Surprisingly, pagination was used only on 22% of the sites we’ve reviewed (among them are Dooce, GigaOM, Mashable, ReadWriteWeb). In most cases a standard navigation with “next” and “previous”-links is used (60%).

Pagination offers a lot of advantages as it shows to the visitors how much content is available and allows them to quickly jump to older articles. Our article Pagination Gallery: Examples And Good Practices provides creative examples of what can be achieved with pagination.

Some blogs also use calendar navigation (6%, Thecaucus, Andrew Sullivan) or an archive section instead (12%, A List Apart, TPM, The Huffington Post)

Pagination on Gigaom

An unusual navigation on Treehugger. Instead of pagination and usual next-prev-navigation, the site displays articles which appear on the next and on the previous archive page.

The Caucus with an archive instead of pagination and next-prev-navigation.

5.5. Where to place the search box?

Only 62% of top blogs have a search box in the right upper corner of the site layout. Among them in 58% of the cases the search box is placed in the header. The rest of the blogs place it in the top area of the sidebar. Search box in the middle of the sidebar and in the lower part of the sidebar is less popular (16%). Footer as the only place to display the search box is used only once (Dooce) and Kottke doesn’t have a search box at all.

Dooce displays a search box only in the footer of the site.

5.6. Where to place the link to the contact page?

Most top blogs place the link to the contact page in the sidebar. Usually this link is among further navigation options available in the right-hand side navigation menu or in the left-hand side navigation menu. Sometimes icons are also used (particularly the e-mail icon) to indicate the purpose of the link.

• 52% of the blogs place the link to the contact page in the sidebar (Engadget, TMZ, DailyKos, Smashing Magazine),
• 40% place the contact link in the header
  (A List Apart, Dooce, CopyBlogger, ProBlogger, Ars Technica, Tech Crunch),
• 30% have a contact link in the footer
  (ReadWriteWeb, ProBlogger, Mashable, TMZ),
• in 4% of the cases the link to the contact form was hidden in the about-section (TreeHugger).

It’s worth mentioning that most blogs provide readers only with a “contact e-mail” (64%), while only 28% have a contact form which needs to be filled in online. 8% offer both a contact form and the e-mail (Yanko, TechCrunch). And Zen Habits asks its readers to comment on a blog’s entry to get in touch with the blog’s owner.

5.6. Are top blogs standard-conform?

Actually, before conducting the survey we have assumed that the content would be more important than design for most blogs. However, we didn’t expect that only 4% of the top blogs are actually standard-conform.

Apparently,

• 96% of top blogs are not standard-conform,
• 8% of top blogs have over 500 errors
  (Ben Smith’s Blog, Neatorama, Search Engine Land),
• 28% have 200 – 499 errors,
  (BoingBoing, ProBlogger, Google Blog, Engadget),
• 24% have 100 – 199 errors,
  (TreeHugger, Mashable, ReadWriteWeb, Gigazine, TUAW),
• 22% have 50 – 99 errors,
  (TechCrunch, CopyBlogger, Dooce, Ars Technica, Lifehacker),
• 10% have 1 – 49 errors,
  (Kottke, GigaOM, AutoBlog, Google Blogoscoped),
• 4% have 0 errors
  (e.g. A List Apart).

Neatorama is not valid XHTML 1.0 Transitional. That’s no wonder — the page is built with tables.

The awards for most errors goes to Ben Smith’s Blog (2286 errors, no Doctype definition), Neatorama (1428) and Search Engine Land (1116).

There is a simple reason for “invalid” HTML-code: from the perspective of Web standards, ad-servers are nothing but horrible. They almost never produce a valid code which is why most blogs (which need to have advertising to keep them alive) are almost never standard-conform. The publisher often has no choice and needs to compromise the quality of the code with the revenues resulting from “dirty” source code of ad-servers.

Bottom line

Let’s conclude survey results with a brief overview of the main findings. Please keep in mind that the results of the survey should not be considered as guidelines for an effective blog design — this is a topic for another article.

• usually right-hand side vertical (58%) and top horizontal navigation (52%) are used;
• the start page presents excerpts of 10-20 posts (62%),
• related and popular posts are displayed on every second top blog (50%),
• footer contains copyright information (90%), links to about-page (40%) and link to contact information (30%),
• on average popular blogs have 5,84 advertising blocks per start page,
• on average popular blogs have 5,96 advertising blocks per article page,
• articles often contain no ads (76%),
• layouts usually contain ads on the right-hand side (88%),
• social icons are often placed under the post (54%),
• RSS-buttons are displayed in the above area of the layout (66%),
• “standard” RSS-icons are used more often than text links (66%),
• most publishers use one main RSS-feed instead of multiple feeds (64%),
• tag clouds are not used (90%),
• pagination is used rarely (22%),
• search box in the right upper corner of the site layout (62%),
• 96% of top blogs are not standard-conform.

Please stay tuned and subscribe to our RSS-feed , we are going to conduct more design-related surveys in the future.