Small Design Study Of Big Blogs

Popular blogs are often considered to be examples of effective and functional design (which is not necessarily the case).

1. Layout

Let us start with the analysis of the layouts used on the most popular blogs in the blogosphere. Are there more 2-column-layouts than 3-column-layouts? Are layouts centered? Are they fixed, fluid or elastic? Are tables still used? In this section we are going to answer all these questions.

1.1. How many columns?

The question whether one should use 2 columns or 3 columns in a design layout is almost philosophical. Unfortunately, we weren’t able to find any results from usability studies which would prefer one solution over the other one. As usual, it depends on the context and on the target group you are dealing with. In some cases it is just impossible to find a proper balance between primary and secondary content with 2 columns. In these situations you may need to divide the second column (sidebar) into two parts — in fact this solutions is used quite often.

In both cases it is necessary to make the structure as transparent and clear as possible. A layout with 4 and more columns is often not a good idea.

According to our findings,

  • 58% use three and more columns in layouts
    (TalkingPointsMemo, CopyBlogger, Mashable, Lifehacker),
  • 42% use 2-column-layouts
    (Zen Habits, GigaOM, Google Blog, Seth Godin, Boing Boing).

tmp
TPM uses a multi-column layout. 58% of top blogs use the same design approach.

Apparently, 50 blogs are enough to find unusual layout solutions. Drudgereport uses something which we prefer to call “anti-layout”. And TPM uses sometimes 2, sometimes 3 and sometimes 4 columns. In the latter case we just don’t get why the titles of the articles are not clickable.

1.2. Centered or left-aligned layout?

Actually, one could observe the rising trend toward centered design layouts few years ago — often it was the attempt to find an optimal solution for readers with large and small screen resolutions. Since more and more users tend to switch to higher resolutions, one tries to balance the amount of space surrounding the layout by providing the same amount of white space on the left and on the right of the layout and thus focusing reader’s attention on the content by placing it in the middle of the browser window.

Read Write web
ReadWriteWeb with a centered layout. According to our survey, 94% of top blogs have a centered layout.

And apparently this trend has managed to become the standard approach over the last years. In fact, according to our survey, 94% of top blogs have a centered layout. Among them are CopyBlogger, Problogger, ReadWriteWeb, Mashable, Ars Technica, Techcrunch and Huffingtonpost.

1.3. Fixed, elastic or fluid?

To be honest, we haven’t expected such a strong trend toward fixed layouts (px-based layouts). It is truly remarkable that among 50 top blogs not a single one used an elastic layout (width of layout grows with the growing font size) and only a small fraction uses fluid elements (layout changes depending on the size of the browser window). Here are the exact findings:

  • 92% of top blogs used a fixed layout,
  • 8% used a fluid layout or a hybrid layout with fluid layout elements
    (Engadget, Smashing Magazine, Gigazine, Coorks and Liars).

Fluid layouts can better adapt to user’s preferences while fixed layouts make it easier for the designer to make sure that a certain design decision holds independent of the font size and the browser window size.

disadvantage layout
The main disadvantage of fluid layouts is their growth in width when used with a wide screen resolution: the line length becomes to big (here in the example Engadget with 150 characters per line). One can counter it using the max-width-attribute.

1.4. Width of the fixed layout?

As we have observed a strong trend toward fixed, pixel-based design layouts, we have decided to take a closer look at these layout and try to detect common attributes of such layouts. In particular, we have considered the width of the fixed layout which usually corresponds to the width of #container or #wrapper. Apparently,

 

 

  • 9% used ≤ 800px
    (PostSecret, Seth Godin, Google Blog, BeppeGrillo.it),
  • 15% used 801 – 900px
    (Neatorama, Kottke, DailyKos, Perezhilton, TUAW, Yanko Design, Scobleizer),
  • 20% used 901 – 950px
    (Huffington Post, BoingBoing, TreeHugger, Dooce, Blogoscoped, SearchEngineLand),
  • 56% used 951 – 1000px
    (ars technica, Lifehacker, TechCrunch, ProBlogger, A List Apart, TMZ, Wired, GigaOM, Joystiq, Zenhabis, Copyblogger, Consumerist, Slashfilm).

Conclusion: one can identify a clear trend toward wide fixed layouts of the width 951 – 1000px.

1.5. Proportion between the content area and layout? (if fixed layout)

As you’ve seen above, each layout requires at least one sidebar which contains secondary content and provides navigation options to the users. However, what is the best way to provide users with a comfortable reading while clearly presenting all available navigation options? Or, put differently,
what proportion should one choose between the main content area and overall site layout? The less space the main content area takes, the more dominant the sidebar becomes and vice versa. Where does the balance lie?

Screenshot
The layout width on BoingBoing is 870px wide, the main content area is 550px wide. This results in a ratio 0.63.

According to our survey,

  • 96% use at least a half of the whole layout to display the main content
    (exceptions: CopyBlogger (0.48), SlashFilm (0.48),
  • 54% used 50 – 60% of the layout for the main content
    (Mashable, Lifehacker, Kottke, Blogoscoped, A List Apart, BoingBoing, DailyKos, TreeHugger, Scobleizer, Problogger, TUAW, bits.blogs.nytimes.com)
  • 46% used 60 – 70% for the main content
    (ars technica, TechCrunch, GigaOM, Dooce, Zenhabits, CNN Political Ticker, CrunchGear)
  • on average, 58% of the overall site layout is used to display the main content.