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).
3.3. Are related and popular posts displayed? Link
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.
3.4. What information is placed in the footer? Link
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
- 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),
- 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),
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),
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.
- 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).
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.
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.
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.
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
5.5. Where to place the search box? Link
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.
5.6. Where to place the link to the contact page? Link
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).
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.
- 1 https://www.smashingmagazine.com/2008/07/24/a-small-study-of-big-blogs/
- 2 http://en.wikipedia.org/wiki/Right-handed
- 3 http://www.arstechnica.com/
- 4 http://www.arstechnica.com/
- 5 http://gigaom.com
- 6 http://www.gigaom.com/
- 7 https://www.smashingmagazine.com/2008/04/08/footers-in-modern-web-design-creative-examples-and-ideas/
- 8 http://www.boingboing.net
- 9 http://www.boingboing.net/
- 10 http://www.joystiq.com/
- 11 http://www.joystiq.com/
- 12 http://zenhabits.net/
- 13 http://www.neatorama.com/
- 14 http://www.problogger.net/
- 15 http://www.techcrunch.com/
- 16 http://www.kotaku.com
- 17 http://www.addthis.com/
- 18 http://www.neatorama.com/
- 19 http://www.neatorama.com/
- 20 http://www.gigaom.com/
- 21 http://www.gigaom.com
- 22 http://www.mapelli.info/feed/feed-count-12
- 23 http://zenhabits.net/
- 24 http://zenhabits.net/
- 25 https://www.smashingmagazine.com/2007/11/07/tag-clouds-gallery-examples-and-good-practices/
- 26 https://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
- 27 http://gigaom.com/
- 28 http://www.treehugger.com/
- 29 http://www.treehugger.com
- 30 http://thecaucus.blogs.nytimes.com/
- 31 http://thecaucus.blogs.nytimes.com/
- 32 http://www.dooce.com
- 33 http://www.kottke.org
- 34 http://dooce.com/
- 35 http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.neatorama.com%2F
- 36 http://www.neatorama.com
- 37 http://www.politico.com/blogs/bensmith/
- 38 http://www.neatorama.com/
- 39 http://searchengineland.com/
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 New York, on June 14–15, with smart design patterns and front-end techniques.