What Can You Learn About Website Layout from the World's Top 50 Blogs

Smashing Magazine has just completed a survey of the layouts of the top 50 blogs in the world (as listed in Technorati’s Top 100 Blogs) .

Why should you care what these bloggers are doing?

Simply because the top bloggers live and breathe online content publishing. They measure everything they do and tweak their sites to continually improve their reader's experience.  Whatever they do is carefully thought through.When taken together these sites have a bigger readership bigger than all newspapers in the western world combined. That means you and I can learn a lot simply by observing how they have designed their websites. This research provides some very valuable insights.

These were the key findings. Go to the original article to get all the details.


1.0 Layout

1.1  How many columns do pages have?

  • 58% use three or more columns

  • 42% use 2 columns



1.2  Should the page be centred or left-aligned?



1.3    Should the page size be fixed or flex to fill the browser screen?

  • 92% are fixed width e.g. www.techcrunch.com

  • 8% are fluid e.g. www.engadget.com


Fixed layouts ensure that the design remains the same on every screen and in every browser.


1.4  What are the most common widths of the fixed layout?

  • 56% used 951 – 1000 pixels e.g. www.postsecret.com

  • 20% used 901 – 950 pixels e.g. www.perezhilton.com

  • 15% used 801 – 900 pixels e.g. www.boingboing.com

  • 9% were less than 800 pixels e.g. www.lifehacker.com



1.5  What proportion of the page is used to display the main article (or other content)? Only relevant to fixed layouts)

  • 96% use at least half of the page e.g. exceptions www.copyblogger.com

  • 54% use 50 – 60% of the page e.g. www.mashable.com

  • 46% use 60 – 70% of the page e.g. www.zenhabits.com

  • The average across all the blogs was 58%

     

1.6  How many of the sites used CSS versus traditional table-based layout?

 


2.0  Typography

2.1  Dark text on light background versus light text on dark background? 

  • 98% of blogs used dark text on light background (ed: Hurray!)
  • Only one used light text on a dark background – www.postsecret.com

 

2.2  How many characters per line?

  • 10% used 65 – 74 characters e.g. www.blogoscoped.com

  • 18% used 75 – 84 characters e.g. http://blogs.nytimes.com

  • 34% used 85 – 94 characters e.g. www.huffingtompost.com

  • 18% used 95 – 104 characters e.g. www.searchengineland.com

  • 16% used over 105 characters e.g. www.wired.com

 
2.3  Serif versus sans-serif fonts? Which fonts are most popular?

  • 86% use sans-serif

  • 14% use serif

  • 34% use Verdana e.g. www.smashingmagazine.com

  • 24% use Lucida Grande e.g. www.crunchgear.com

  • 18% use Arial e.g. www.googleblog.com

  • 14% use the serif font Georgia e.g. www.scobleizer.com

  • 6% used Trebuchet MS e.g. http://sethgodin.typepad.com/


2.4  How large is the font size of the body copy?

  • 34% of fonts are 12 pixels e.g. www.doshdosh.com

  • 30% of fonts are 13 pixels e.g. www.valleywag.com

  • 14% of fonts are 14 pixels e.g. www.wired.com

  • 12% of fonts are 11 pixels e.g. www.alistapart.com

  • 4% of fonts are 15 pixels e.g. www.scobleizer.com

  • One site each used 10, 16 and 17 pixels


2.5  What typeface is used for headlines?

  • 78% of headline typefaces are sans-serif

  • 22% of headline typefaces are serif


The fonts used are:

  • 30% use Arial

  • 22% use Georgia (serif) e.g. www,gigaom.com

  • 8% use Lucida Grande e.g. www.thinkprogress.com

  • 8% use Helvetica e.g. www.zenhabits.com

  • 6% use Verdana e.g. www.dailykos.com

  • 6% use Trebuchet MS e.g. www.slashfilm.com

  • 4% use Helvetica Neue e.g. www.problogger.com


 2.6  How large is the headline font size? 

  • 24% use 20 – 22 pixels e,g. www.blogoscoped.com

  • 22% use 23 – 25 pixels e.g. www.lifehacker.com

  • 22% use 17 – 19 pixels e.g. www.tuaw.com

  • 16% use 14 – 16 pixels e.g. www.yankodesigns.com

  • 6% use 26 – 29 pixels e.g. www.engadget.com

  • 6% greater than 32 pixels e.g. www.smashingmagazine.com

  • 0% use 10 – 13 pixels


The most popular headline size is between 17 and 25 pixels.


Conclusion

I always advise people to use the design of their website to reflect their subject and personality. This means having some freedom in the way their site looks.

However some layouts and designs work much better than others. By studying what the most experienced content website publishers in the world do, you will greatly improve your chance of creating a website that works well. I don’t think you should use these research results stats to religiously map out your layout and typography, but I do think you should learn from them.

This is a summary of the key points:

  • large blogs/content websites require a multi-column layout solution (usually 3 columns is the max) (58%)

  • layouts are usually centered (94%),

  • layouts usually have a fixed width (pixel -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,

  • 86% of sites use sans-serif to improve readability

  • Verdana, Lucida Grande, Arial and Georgia (only serif font) are used for body text (90%),

  • the font size of the 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.