We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.
We are quite curious; particularly when it comes to design and web development, we want to know just everything. Therefore, following our web form design survey1, we have decided to take a closer look at blog designs, analyze them and find out which design solutions are common and which solutions are not used at all.
Since we wanted to make the survey as objective as possible, we used Technorati Top Blogs and analyzed 50 most popular blogs which appear there. It doesn’t matter if the Technorati list is correct or not — we wanted to find out what design solutions big players (aka most popular blogs) prefer. Popular blogs are often considered to be examples of effective and functional design (which is not necessarily the case).
We have identified 30 design problems and considered solutions for each of the problems separately. We have posted 30 questions that we would like to answer with our blog survey. Below we present findings of our survey of popular blog designs — the results of an analysis of 50 popular blogs according to Technorati’s Top 100.
Considering Technorati’s top 50, we have filtered out social networks and blogs which have artificially become popular — e.g. via backlinks in released WordPress themes. The prize for the most cluttered CSS-code goes to Smashing Magazine — however, we are going to do something about it over the next weeks.
Please notice: the results presented below should not be considered as guidelines for an effective blog design. They are supposed to give you the intuition of which solution may be better than the other one. However, you need to consider the context you are working within as well — following our findings blindly won’t necessarily improve your design. Still it is useful to know what big players do and, more importantly, what they don’t do.
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.
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).
Apparently, 50 blogs are enough to find unusual layout solutions. Drudgereport4 uses something which we prefer to call “anti-layout”. And TPM53 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.
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.
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.
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 adapt6 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.
Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.