Best Practice in Web Design

Below we present findings of a survey of popular web designs — the results of an analysis of 50 popular websites according to Technorati’s Top 100.

The results presented below should not be considered as guidelines for an effective web design. They are supposed to give you a framework to judge good, usable web designs. However, you need to consider the context you are working within — following popularity 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.

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. As usual, it depends on the context and on the target group you are dealing with.

More important than the number of columns is that the structure is as 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
  
• 42% use 2-column-layouts
  

1.2. Centered or left-aligned layout?

Actually, one could observe the rising trend toward centered design layouts few years ago — 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.

• 94% of top blogs have a centered layout.

Apparently this trend has become the standard approach over the last years.

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 sites not a single one used an elastic layout (width of layout grows with the growing font size) and only a small fraction use 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

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.

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 - which unfortunately can't be read by IE6 which constitutes 15% of browsers.

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.

• 9% used ≤ 800px
  
• 15% used 801 – 900px
• 20% used 901 – 950px
• 56% used 951 – 1000px

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?

As you’ve seen above, each layout requires at least one sidebar which contains secondary content and provides navigation options to the users. What proportion should one choose between the main content area and overall site layout?

• 96% use at least a half of the whole layout to display the main content
• 54% used 50 – 60% of the layout for the main content
  
• 46% used 60 – 70% for the main content
  
• on average, 58% of the overall site layout is used to display the main content.

1.6. CSS-layout or table-based layout?

It is almost obvious that popular blogs, which are updated many times a day, should prefer CSS-solutions as these allow for better and easier maintenance and reduce load times. Consequently it is no wonder that

• 90% of the top 50 website used CSS-based layouts
• 10% used tables or a combination of tables with CSS
  

2. Typography

Content is king. Furthermore, it is designer’s job to make sure that the readers feel comfortable with reading. And here is where typography comes into play. How can you achive best readability of your content?

2.1. Dark on light or light on dark?

As one would expect, 98% of the top blogs used dark text on a white background. Only PostSecret had a dark background color with light text displayed on it. However, this design decision is likely to be strongly related to the topic of the site.

2.2 Justified text

It is interesting to remark that not a single blog used justified text-alignment — 100% of the blogs used left text-alignment.

2.3. Primary typeface for body text?

Sans-serif fonts have become the de facto standard for body text on-screen, especially online. It has been suggested that this is because the small size of the font causes serif fonts to appear excessively cluttered on the screen. How is this suggestion reflected in the body text of popular blogs?

• 34% ot top sites use Verdana (sans-serif) for body text
  
• 24% used Lucida Grande (sans-serif, included with Mac OS X - probably the designer uses a MAC and doesn't realise (or doesn't care) that the font doesn't exist in Windows.)
  
• 18% used Arial (sans-serif).
• 14% used Georgia (serif)
• 6% used Trebuchet MS (sans-serif)
• Helvetica Neue (another MAC only font) and Times New Roman were used only once.

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

The larger the font size is, the easier it is for readers to actually read the text presented on a given web-page. However, with a growing font size it becomes harder to read large blocks of text as one needs to scroll more frequently — and the eye needs to jump from one place to the other more often. So where does the optimum lie?

Here are the most common font sizes according to our research:

• 34% of the sites use 12px - this is the minimum for legibility of a serif body font.
• 30% use 13px
• 14% use 14px
• 12% use 11px
• 4% use 15px
• the rest used 10px, 16px and 17px (each was used by exactly one site)

The "average" font is 12px Verdana.

2.5. Primary typeface for headlines?

While sans-serifs are usually used for body text, it was often considered that designers tend to emphasize the headlines by using serif typefaces to present them. Does it hold true?

• 30% of the top blogs use Arial (sans-serif)
  
• 22% use Georgia (serif)
  
• 8% use Lucida Grande (sans-serif) - Mac font
  
• 8% use Helvetica (sans-serif) - Mac font
  
• 6% use Verdana (sans-serif)
  
• 6% use Trebuchet MS (sans-serif)
  
• 4% use Helvetica Neue (sans-serif) - Mac font
  

Most designers prefer Arial for San Serif and Georgia for Serif (52%).

Where a Mac Font is used, the site's secondary font will be visible in the Windows operating environment, often this is Arial which is the default. Hence the high statistics for Arial. That said, in larger font sizes, Arial is more practical than most other san-serif fonts.

2.6. How large is the font size of headlines?

Finally, let’s take a look at font size of headlines. The larger the headline is, the more weight it is given to. However, if too many headlines compete for user’s attention the cognitive load increases and it is becoming harder to the users to actually consider the navigation options. The rule of thumb: if you have many posts presented on the start page, don’t forget to decrease the font-size of the header and highlight it visually, for instance with an eye-catching color.

• 24% use 20-22px
• 22% use 23-25px
• 22% use 17-19px
• 16% use 14-16px
• 6% use 26-29px
• 0% use less than 13px
• 0% use more than 31px

We conclude that it seems to work best to use headlines with the font size between 17 and 25px.

The Bottom line

Please keep in mind that the results of the survey should not be considered as guidelines for an effective web design — this is a topic for another article.

• 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 site is given to the main/central column
• CSS-layouts are used (90%)
• The background is light, the body text is dark (98%)
• 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 a font size between 17 and 25px