Smashing Magazine’s ideal blog layout

Smashing Magazine - fairly typical in its design when compared to other popular blogs

Smashing Magazine screenshot

Smashing Magazine did some interesting research on the top 100 blogs on Technorati: they looked at common typographical and page layout features and collated the information into a handy list.

In turn, I’ve designed an HTML/CSS template that incorporates the most popular features of big blogs.  See it here:

The ideal blog according to Smashing Magazine’s research

Or

Download the zipped HTML and CSS files

The blogs share these features:

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

Disclaimers:

  • The information probably represents such factors as design trends, current conventions and the designers’ own tastes and quirks.  There is no correlation between layout and typography and popularity: content is king.
  • I think it’s a pretty poor design: body copy is too small and the layout is too fussy.

Anyway, feel free to leave a comment!