This article originally appeared in the Design and Usability Tactics e-newsletter. Click here to subscribe automatically.
Francois Briatte's recent Web design survey is generating quite a buzz. The survey looks at the Web sites of 10 famous designers and compares how the designers handle 25 common design elements. It also includes a detailed analysis of the rate of concordance or dissidence among those Web sites on each of the 25 points.
The survey is an interesting read—one that I recommend to every designer. However, for those of you who are short on time, I'll recap what I consider the most important observations of the survey, along with my conclusions and interpretations (which sometimes differ from Briatte's).
Web design similarities
According to the survey, there are some remarkable similarities in the way the 10 designers handle certain layout elements. Here's a list of the common elements that are on 80 percent or more of the designers' sites:
- Links and hover links are underlined.
- Visited links are differentiated from regular links—usually with a color change.
- A clickable logo is positioned at the top of the page that links to the site's home or index page.
- A consistent footer is at the bottom of each page.
- Main text background is white.
- Main text is a sans-serif font.
- "Proper" quotes are used (entities/escape codes create typographic quotes and apostrophes instead of the plain, straight quotes of ordinary text).
- There are six or fewer navigation elements.
- Pages include an explicit copyright statement.
- The designer's full name appears on each page.
The following elements are not on 80 percent or more of the sites:
- XML prolog
- Sidebar on the left (but a right sidebar is common)
- Buttons similar to the (in)famous "Steal These" buttons
- Accesskeys to create keyboard shortcuts
There aren't many surprises in the list of common elements receiving similar treatment by almost all the designers. Underlined links are well-established Web conventions, as are having a clickable logo at the top of the page and a consistent footer at the bottom. These layout elements are ingrained in the visitor's expectations, and the designers understand that meeting those expectations is important to creating a usable Web site.
Briatte considers the prevalence of white backgrounds for the main text to be something inherited from print design. That may be true in a sense. However, I think it's not so much a matter of the designers' backgrounds in print design as it is that a white background makes for a familiar and comfortable reading experience for the visitor, and the designers are striving to meet visitors' expectations.
In a departure from print standards, most of the designers use a sans-serif font for the main text. As Briatte points out, the designers are well aware that serif fonts are more readable for body text in print, but sans-serif fonts are more readable onscreen.
It's interesting (but not surprising) that the designers went to the extra effort to use typographic niceties such as "curly" quotes, apostrophes, and dashes instead of plain, straight quotes and dashes made of hyphens.
Restricting navigation bars to no more than six elements is a long-standing rule of thumb, and the sites follow that rule. No surprise there—the rule evolved because it works.
It's also no surprise that the designers include explicit copyright statements on their pages. In today's world, that's a legal necessity. Briatte attaches some significance to the fact that the designers list their full name on each page instead of using a nickname. To me, it would be surprising if the designers didn't "sign their work." After all, most of them earn their living from Web design, and each page is a professional reference.
Among the designers, not one used an XML prolog on their pages. This is counter to the official recommendations but acknowledges the reality of the XML prolog causing problems for the dominant browser.
I'm not sure what to make of the scarcity of left sidebars (only one) among the sites, while right sidebars were fairly common (70 percent). Briatte attributes it to left sidebars being known to "impede reading," but I think it may be more of a stylistic trend, combined with efforts to implement structural markup that puts the main text above supporting text (sidebar content) in the source code.
Button graphics based on (or very similar to) the "Steal These" buttons may be very common on many Web sites, but not on the surveyed pages. Naturally, you'd expect professional designers to create their own button designs rather than borrow someone else's design.
The real surprise among the high-concurrence items is that only two of the designers used accesskeys to create keyboard shortcuts for navigating their pages. Apparently, the designers don't think keyboard shortcuts are worth the trouble to implement, for either accessibility or usability reasons. That's something that may change in the future.
Split decisions and surprises
There weren't many surprises among the items that most of the designers treated the same. However, the survey does point out some interesting differences in other areas.
I was stunned to discover that fixed layouts outnumber liquid layouts. Fixed layouts have their place, but I expected these high-profile designers to show off their skills with liquid layouts. Perhaps the designers are tired of the rigors of working with liquid layouts on client sites and prefer the relative simplicity of a fixed-width layout for their personal sites.
Another surprise is that only 70 percent of the designers used XHTML—I would have imagined that number to be 100 percent. I was also amazed to discover that 60 percent of the sites used image-based rollovers in their navigation bars instead of pure CSS rollovers.
One of the interesting splits among the designers is that 60 percent use the Strict doctype, which means adhering to the more rigid coding standards of that specification. In contrast, nearly half seem to prefer less stringent doctypes such as Transitional.
The sites were split evenly on including a search box on their pages and having a separate print stylesheet. Given the strong recommendations in favor of providing a site search feature, I'm a little surprised that they weren't more common. The lack of a print stylesheet on half the sites is somewhat easier to explain if the sites are designed so that they print successfully without needing a separate stylesheet for printed output.
The same, and yet, so different
One of the things that I found most interesting when looking at the survey wasn't the data, but rather visiting the actual sites. Several of the sites reflect the influence of current trends and layout styles; in fact, some of the sites are responsible for setting those very trends. However, despite some obvious similarities among the sites, there is also considerable diversity. This isn't a collection of cookie-cutter clones. The designers have found ample room for creativity and self-expression within the framework of established conventions and proven techniques.