Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

A Small Study Of Big Blogs: Further Findings

Last week we presented the first results of our study of top blogs1. 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 is 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 posted 30 questions which we wanted 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 Link

Information design is usually 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? Link

Few years ago, before the wave of blogs has over-flooded 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-handed2, 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? Link

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 Technica3
Ars Technica4 has excerpts of 18 posts on its start page. 28% of top blogs have 14-18 posts on their start page.

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.

GigaOM6 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.

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 Ideas7). 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),

BoingBoing9 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),

Joystiq11‘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, Zenhabits2412 (with some kind of a site map) and Netorama1913 (with further navigation options). Problogger14 additionally presents a link to the about-page. 58% use a “standard” approach which often is chosen to be rather minimal (e.g. Techcrunch15). The rest uses no footer at all.

4. Advertisements Link

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? Link

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 Kotaku16 with an 1000px ad block in the middle of the page.

4.2. Are ads displayed in the content area? Link

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? Link

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 Link

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? Link

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 Addthis17 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).

Netorama1913 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 Link

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.

GigaOM21 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 Feedcount22 as a handy alternative and define their own designs for the button. However, here Feedburner is required as well.

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

5.3. Tag clouds in use? Link

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 Practices25.

5.4. Pagination in use? Link

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 Practices26 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 Treehugger29. Instead of pagination and usual next-prev-navigation, the site displays articles which appear on the next and on the previous archive page.

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

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 (Dooce32) and Kottke33 doesn’t have a search box at all.

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

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? Link

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.


  • 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).

Neatorama36 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 Blog37 (2286 errors, no Doctype definition), Neatorama38 (1428) and Search Engine Land39 (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 Link

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.

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Surprising that so few sites validate. Get on it people…google will love you!

  2. 2

    Great ! Thanks. This one will come in handy.

  3. 3

    I wish I had time to read blogs! Stinkin’ deliverables.

  4. 4

    very nice, glad to see my blog falls into the “majority”

  5. 5

    so are standards not as important as made out to be?

  6. 6

    Excelente trabajo, excelentes datos!!!!

  7. 7

    Great post – it’s good for us designers to know these things… now when i design a blog, i know where ppl tend to look for information etc…

    Keep it up!

  8. 8

    I really think that these are great, the most interesting things I’ve read since… Ever! They really are useful. Thanks.

  9. 9

    Woohoo! We win most errors awards! Actually, there’s a reason why Neatorama is built with tables: it’s much more error-resistant than CSS, and I don’t have to worry about how it looks across different browsers…. :)

  10. 10

    i hate ads…

  11. 11


    July 31, 2008 11:33 am

    Another terrific post; I can see this being very useful. I’m quite surprised that 96% of these top blogs don’t meet web standards. I wonder why this is?

  12. 12

    Nice article. Your link to is bad, though (you have it pointing to

  13. 13

    Vitaly Friedman & Sven Lennartz

    July 31, 2008 12:01 pm

    @Brian Cook (#12): thanks, fixed.

  14. 14

    “articles often contain no ads (76%),”

    Unless of course the article itself is promotional of a certain service or product.

    @MikeWhoBikes: Large blogs usually have multiple contributors who have their own way of dealing with the WYSIWYG editors in the CMS, which results in an accumulation of HTML styling errors.

  15. 15

    Andy Gongea

    July 31, 2008 1:21 pm

    Nice and valuable resource.

  16. 16

    Nice article ! Anyway, why is it in the “How-To” category?

  17. 17

    I think 96% of top blogs are not standard conform because 96% of them contain ads. Thanks for the case study, it really helps me a lot.

  18. 18

    lols, i really find it funny that the reason for non standards compliance are the ads, but its really annoying that google makes your site appear on firefox with an html validator addon with a beatiful x button on the bottom,
    i just wish adsense and other big advertising site hosts take this accessibility issue into consideration

  19. 19

    Jehzeel Laurente

    July 31, 2008 6:25 pm

    another great post from smashing magazine :D

    this blog is really worth subscribing for! :)

  20. 20

    Marcelo Barbosa

    July 31, 2008 7:36 pm

    Very important Post. This study shows good information.
    Thank you for the high quality of the articles.


↑ Back to top