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!

6 thoughts on “Smashing Magazine’s ideal blog layout

  1. Stan

    Nice! And it even passes W3C Valid HTML Strict. I certainly will try this for my website!

    Regards,

    Stan.

  2. Leon Post author

    You’re welcome, Stan, and I hope it’s of some use to you. It was quite easy to code and the HTML is pretty self-explanatory. Bear in mind that it’s HTML 4 strict, not XHTML (if you want to keep your site consistent).

    It’s just not how I’d design a site!

  3. Sander

    Great News Leon! I’ve read the post at smashing a couple of days ago thinking combining this information would create a great template. Thank you for creating it.

    You might want to consider taking the template more in design detail dept and create a wordpress theme of it, I’m sure it will rock the sky.

    Good luck.

  4. Leon Post author

    Hi Sander – I’ve been thinking of doing this. There is a time issue, though: I’ve been working on a new design for this site and I’ve got some paid work to complete … I’m pretty new to PHP as well (although I’m getting better!)

    Give me a couple of weeks, though …

    ‘rock the sky’ – I love that!

    Will have a wander over to your site some time soon.

    Leon

  5. Leon Post author

    Well, it’s ready. I’ll write about it later today. Loved your new design, already written about it!

    Your thoughts would be more than welcome.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>