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

We are quite curious; particularly when it comes to design and web-development we want to know just everything. Therefore, following our web form design survey, we have decided to take a closer look at blog designs, analyze them and find out which design solutions are common and which solutions are not used at all.

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. It doesn’t really matter if the Technorati list is correct or not — we wanted to find out what design solutions big players (aka most popular blogs) prefer. Popular blogs are often considered to be examples of effective and functional design (which is not necessarily the case).

Blog Design Survey

We have identified 30 design problems and considered solutions for each of the problems separately. We have posed 30 questions which we would like to answer with our blog survey. Below we present findings of our survey of popular blog designs — the results of an analysis of 50 popular blogs according to Technorati’s Top 100.

Considering Technorati’s top 50, we have filtered out social networks and blogs which have artificially become popular — e.g. via backlinks in released Wordpress themes. The prize for the most cluttered CSS-code goes to Smashing Magazine — however, we are going to do something about it over the next weeks.

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. However, you need to consider the context you are working within as well — following our findings blindly won’t necessarily improve your design. Still it is useful to know what big players do and, more importantly, what they don’t do.

1. Layout

Let us start with the analysis of the layouts used on the most popular blogs in the blogosphere. Are there more 2-column-layouts than 3-column-layouts? Are layouts centered? Are they fixed, fluid or elastic? Are tables still used? In this section we are going to answer all these questions.

1.1. How many columns?

The question whether one should use 2 columns or 3 columns in a design layout is almost philosophical. Unfortunately, we weren’t able to find any results from usability studies which would prefer one solution over the other one. As usual, it depends on the context and on the target group you are dealing with. In some cases it is just impossible to find a proper balance between primary and secondary content with 2 columns. In these situations you may need to divide the second column (sidebar) into two parts — in fact this solutions is used quite often.

In both cases it is necessary to make the structure as transparent and clear as possible. A layout with 4 and more columns is often not a good idea.

According to our findings,

• 58% use three and more columns in layouts
  (TalkingPointsMemo, CopyBlogger, Mashable, Lifehacker),
• 42% use 2-column-layouts
  (Zen Habits, GigaOM, Google Blog, Seth Godin, Boing Boing).

TPM uses a multi-column layout. 58% of top blogs use the same design approach.

Apparently, 50 blogs are enough to find unusual layout solutions. Drudgereport uses something which we prefer to call “anti-layout”. And TPM uses sometimes 2, sometimes 3 and sometimes 4 columns. In the latter case we just don’t get why the titles of the articles are not clickable.

1.2. Centered or left-aligned layout?

Actually, one could observe the rising trend toward centered design layouts few years ago — often it was the attempt to find an optimal solution for readers with large and small screen resolutions. Since more and more users tend to switch to higher resolutions, one tries to balance the amount of space surrounding the layout by providing the same amount of white space on the left and on the right of the layout and thus focusing reader’s attention on the content by placing it in the middle of the browser window.

ReadWriteWeb with a centered layout. According to our survey, 94% of top blogs have a centered layout.

And apparently this trend has managed to become the standard approach over the last years. In fact, according to our survey, 94% of top blogs have a centered layout. Among them are CopyBlogger, Problogger, ReadWriteWeb, Mashable, Ars Technica, Techcrunch and Huffingtonpost.

1.3. Fixed, elastic or fluid?

To be honest, we haven’t expected such a strong trend toward fixed layouts (px-based layouts). It is truly remarkable that among 50 top blogs not a single one used an elastic layout (width of layout grows with the growing font size) and only a small fraction uses fluid elements (layout changes depending on the size of the browser window). Here are the exact findings:

• 92% of top blogs used a fixed layout,
• 8% used a fluid layout or a hybrid layout with fluid layout elements
  (Engadget, Smashing Magazine, Gigazine, Coorks and Liars).

Fluid layouts can better adapt to user’s preferences while fixed layouts make it easier for the designer to make sure that a certain design decision holds independent of the font size and the browser window size.

The main disadvantage of fluid layouts is their growth in width when used with a wide screen resolution: the line length becomes to big (here in the example Engadget with 150 characters per line). One can counter it using the max-width-attribute.

1.4. Width of the fixed layout?

As we have observed a strong trend toward fixed, pixel-based design layouts, we have decided to take a closer look at these layout and try to detect common attributes of such layouts. In particular, we have considered the width of the fixed layout which usually corresponds to the width of #container or #wrapper. Apparently,

• 9% used ≤ 800px
  (PostSecret, Seth Godin, Google Blog, BeppeGrillo.it),
• 15% used 801 – 900px
  (Neatorama, Kottke, DailyKos, Perezhilton, TUAW, Yanko Design, Scobleizer),
• 20% used 901 – 950px
  (Huffington Post, BoingBoing, TreeHugger, Dooce, Blogoscoped, SearchEngineLand),
• 56% used 951 – 1000px
  (ars technica, Lifehacker, TechCrunch, ProBlogger, A List Apart, TMZ, Wired, GigaOM, Joystiq, Zenhabis, Copyblogger, Consumerist, Slashfilm).

Conclusion: one can identify a clear trend toward wide fixed layouts of the width 951 – 1000px.

1.5. Proportion between the content area and layout? (if fixed layout)

As you’ve seen above, each layout requires at least one sidebar which contains secondary content and provides navigation options to the users. However, what is the best way to provide users with a comfortable reading while clearly presenting all available navigation options? Or, put differently,
what proportion should one choose between the main content area and overall site layout? The less space the main content area takes, the more dominant the sidebar becomes and vice versa. Where does the balance lie?

The layout width on BoingBoing is 870px wide, the main content area is 550px wide. This results in a ratio 0.63.

According to our survey,

• 96% use at least a half of the whole layout to display the main content
  (exceptions: CopyBlogger (0.48), SlashFilm (0.48),
• 54% used 50 – 60% of the layout for the main content
  (Mashable, Lifehacker, Kottke, Blogoscoped, A List Apart, BoingBoing, DailyKos, TreeHugger, Scobleizer, Problogger, TUAW, bits.blogs.nytimes.com)
• 46% used 60 – 70% for the main content
  (ars technica, TechCrunch, GigaOM, Dooce, Zenhabits, CNN Political Ticker, CrunchGear)
• on average, 58% of the overall site layout is used to display the main content.

1.6. CSS-layout or table-based layout?

It is almost obvious that popular blogs, which are updated many times a day, should prefer CSS-solutions as these allow for better and easier maintenance and reduce load times. Consequently it is no wonder that

• 90% of the top 50 blogs used CSS-based layouts,
• 10% used tables or a combination of tables with CSS
  (PerezHilton, Neatorama, CNN Political Ticker, Beppe Grillo, TreeHugger).

Furthermore, TreeHugger used the legendary onMouseOut-Javascript-event to imitate hover-effects — a design solution we have successfully managed to forget over the last years.

2. Typography

Content is king. This holds for “usual” web-sites as well as for blogs. Furthermore, it is designer’s job to make sure that the readers feel comfortable with reading or at least scanning the posts. And here is where typography comes into play. How can you achive best readability of your content? What font to use? Which font size to select? Our survey may provide you with some useful starting points for your design decisions.

2.1. Dark on light or light on dark?

As one would expect, 98% of the top blogs used dark text on a white background. Only PostSecret had a dark background color with light text displayed on it. However, this design decision is likely to be strongly related to the topic of the site.

Among top 50 blogs PostSecret is the only blog which uses dark background color with a light text on it.

2.2. How many characters per line?

To ensure best readability one needs to ensure comfortable reading. While some research results claim that an optimal line length is 52 – 68 characters per line (including punctuation marks and empty spaces), other studies show that even if the lines are getting longer it does not significantly affect usability. Since no rules of thumbs are provided, designers experiment with a variety of different line lengths.

To compute the max. number of characters per line we have used default setting of the browser as well as default typographic settings provided by the style sheets.

• 10% used 65-74 characters per line
  (PostSecret, Beppegrillo, Perez Hilton, Scobleizer, Blogoscoped),
• 18% used 75-84 characters per line
  (Dooce, Blogs.nytimes.com, Joystiq, CopyBlogger, TUAW, Slashfilm),
• 34% used 85-94 characters per line
  (Lifehacker, Huffington Post, Kottke, ars Technica, Huffington Post, BoingBoing, Seth Godin, Treehugger, Problogger),
• 18% used 95-104 characters per line
  (Mashable, ReadWriteWeb, Smashing Magazine, Google Blog, A List Apart, Search Engine Land),
• 16% used over 105 characters per line
  (Engadget, TechCrunch, GigaOM, Wired, TMZ).

Based upon our findings we feel confident to suggest that the most usual (not necessarily most user-friendly) line length lies between 80 and 100 characters.

It is interesting to remark that not a single blog used justified text-alignment — 100% of the blogs used left text-alignment.

2.3. Primary typeface for body text?

Sans-serif fonts have become the de facto standard for body text on-screen, especially online. It has been suggested that this is because the small size of the font causes serif fonts to appear excessively cluttered on the screen. How is this suggestion reflected in the body text of popular blogs?

According to our survey,

• 34% ot top blogs use Verdana (sans-serif) for body text
  (A List Apart, Kottke, TUAW, CopyBlogger, Dooce, ars technica, TechCrunch, Smashing Magazine),
• 24% used Lucida Grande (sans-serif, included with Mac OS X)
  (Zenhabits, Mashable, Lifehacker, CrunchGear, Thinkprogress),
• 18% used Arial (sans-serif)
  (ReadWriteWeb, Engadget, Google Blog, CNN Political Ticker),
• 14% used Georgia (serif)
  (Scobleizer, GigaOM, Wired, BoingBoing, Huffington Post),
• 6% used Trebuchet MS (sans-serif)
  (Andrew Sullivan, Seth Godin, Postsecret),
• Helvetica Neue (ProBlogger) and Times New Roman (TPM) were used only once.

ars technica uses 85-94 characters per line and 12px Verdana for body text.

2.4. How large is the font size of body copy? (if em then convert and round)

The larger the font size is, the easier it is for readers to actually read the text presented on a given web-page. However, with a growing font size it becomes harder to read large blocks of text as one needs to scroll more frequently — and the eye needs to jump from one place to the other more often. So where does the optimum lie?

Here are the most common font sizes according to our research:

• 34% of the sites use 12px
  (SearchEngineLand, TUAW, Mashable, ars technica, Engadget, Smashing, DoshDosh, TreeHugger),
• 30% use 13px
  (Consumerist, CopyBlogger, Zenhabits, Valleywag, Lifehacker, Huffington Post, BoingBoing, Seth Godin, Google Blog),
• 14% use 14px
  (TPM, GigaOM, Wired, ReadWriteWeb, Gigazine, ProBlogger),
• 12% use 11px
  (A List Apart, Kottke, Neatorama, Dooce, TechCrunch, Dailykos),
• 4% use 15px
  (Scobleizer),
• the rest used 10px, 16px and 17px (each was used by exactly one site).

Zen Habits uses 13px Lucida Grande for its body text. Most blogs use 12px Verdana.

2.5. Primary typeface for headlines?

While sans-serifs are usually used for body text, it was often considered that designers tend to emphasize the headlines by using serif typefaces to present them. Does it hold true?

• 30% of the top blogs use Arial (sans-serif)
  (CNN Political Ticker, Scobleizer, TPM, Crooksandlliars, Joystiq, Dooce, PerezHilton, ReadWriteWeb, Engadget, Google Blog, TreeHugger),
• 22% use Georgia (serif)
  (A List Apart, Andrew Sullivan, Blogs.nytimes.com, GigaOM, Wired, Huffington Post, BoingBoing),
• 8% use Lucida Grande (sans-serif)
  (Tuaw, ThinkProgress, Lifehacker, Crunchgear),
• 8% use Helvetica (sans-serif)
  (Zenhabits, Mashable, ars technica, Smashing Magazine),
• 6% use Verdana (sans-serif)
  (Blogoscoped, Neatorama, DailyKos),
• 6% use Trebuchet MS (sans-serif)
  (Slashfilm, Postsecret, Seth Godin),
• 4% use Helvetica Neue (sans-serif)
  (CopyBlogger, ProBlogger),

Besides, Calibri (SearchEngineLand), American Typewriter (Valleywag), Lucida Sans Unicode, Franklin Gothic Medium, Tahoma (TechCrunch) and no headline at all (Kottke) are used exactly once.

Darren Rowse uses Helvetica Neue for Problogger’s headlines. Most designers prefer Arial and Georgia (52%).

2.6. How large is the font size of headlines?

Finally, let’s take a look at font size of headlines. The larger the headline is, the more weight it is given to. However, if too many headlines compete for user’s attention the cognitive load increases and it is becoming harder to the users to actually consider the navigation options. In this context less sometimes can be more. The rule of thumb: if you have many posts presented on the start page, don’t forget to decrease the font-size of the header and highlight it visually, for instance with an eye-catching color.

• 24% use 20-22px
  (BoingBoing, PerezHilton, Blogoscoped, Google Blog, TechCrunch, ReadWriteWeb),
• 22% use 23-25px
  (CopyBlogger, ProBlogger, Lifehacker, Mashable),
• 22% use 17-19px
  (Tuaw, Scobleizer, TreeHugger, A List Apart, Gizmodo),
• 16% use 14-16px
  (YankoDesign, Dailykos, ars technica, Seth Godin),
• 6% use 26-29px
  (Engadget, GigaOM, Wired, Dooce),
• 0% use 10-13px to highlight the headline.

Furthermore, 0% use 30-31px; Huffington Post uses 32px, Zenhabits 34px and Kottke has no headlines at all. Smashing Magazine is the definitive winner in the category “Biggest Headline Size”: our font size is 44px.

We conclude that it seems to work best to use headlines with the font size between 17 and 25px.

Bottom line

Let’s conclude the first part of the 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.

• large blogs require a multi-column layout solution (usually 3 columns suffice) (58%);
• layouts are usually centered (94%),
• layouts usually have a fixed width (px-based) (92%),
• the width of the fixed layout varies between 951 and 1000px (56%),
• 58% of the overall site layout is used to display the main content,
• CSS-layouts are used (90%),
• the background is light, the body text is dark (98%),
• the most usual (not necessarily most user-friendly) line length lies between 80 and 100 characters,
• Verdana, Lucida Grande, Arial and Georgia are used for body text (90%),
• the font size of body text varies between 12 and 14px (78%),
• Arial and Georgia are used for headlines (52%),
• headlines have the font size between 17 and 25px.

Please stay tuned and subscribe to our RSS-feed , we’ll present the second part of our findings next week.