



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?

94% of the top blogs are centred e.g. www.readwriteweb.com





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?

90% of the top blogs used CSS



10% used tables e.g. www.treehugger.com



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: