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’
and hover links are underlined.
links are differentiated from regular links—usually with a color change.
clickable logo is positioned at the top of the page that links to the
site’s home or index page.
consistent footer is at the bottom of each page.
text background is white.
text is a sans-serif font.
quotes are used (entities/escape codes create typographic quotes and
apostrophes instead of the plain, straight quotes of ordinary text).
are six or fewer navigation elements.
include an explicit copyright statement.
designer’s full name appears on each page.
The following elements are not on 80 percent or more of the
on the left (but a right sidebar is common)
similar to the (in)famous “Steal These” buttons
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
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
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.