Smashing Magazine’s ideal blog layout
July 26, 2008
Smashing Magazine analysed the features of the top 100 Technorati blogs. I’ve converted them into a complete ‘perfect blog’ design.
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!
Filed under: Exemplars, How-to
Tagged: design, smashing magazine, structure
Nice! And it even passes W3C Valid HTML Strict. I certainly will try this for my website!
Regards,
Stan.
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!
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.
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
I’ve been working on a new design Looking forward seeing your new design.
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.