007. A web design survey by François Briatte (email), June/July 2004.

These web sites are identical—or are they?

75% of web design is normative, the rest is merely color and pictures.

This survey compares 10 web sites through elements of their layout: styles, page construction and elements… The survey seeks similarities and differences between those well known web sites, built by famous, talented designers (explanatory note).

What can be observed is that those web sites agree on implicit, internalized layout and design norms (Consensus rate), and that deviance from these rules (Dissidence rate) is uncommon.

Big news? Maybe not. Some very explicit norms, such as W3C recommendations, are well known by an increasing number of web designers. Some other points are just common sense. What is new is that the questions asked by this survey are not always semantics-oriented or norm-driven. Some questions focus on design: fonts, styles, positions, where there should be no defined norm.

What is hence noteworthy is that all these designs resemble themselves very much. They use a panel of common element, and then place them at identical locations on their pages. Hence, the difference between one web site and another is then merely colors and pictures.

Why such isomorphism? Because, as in print design, the reader needs to be guided. Font size, for instance, tells the reader such bit is capital and such bit is trivial. This survey attempts to demonstrate this type of statement applied to web design.

Contents: comparison table, statistical results, linear notes, additional notes, conclusions.

Comparison table

  Jeffrey Zeldman Mark Pilgrim Dave Shea Dan Cederholm Jakob Nielsen John Gruber Eric Meyer Douglas Bowman Jon Hicks Tantek Çelik Consensus reached
yes yes yes yes yes yes yes yes no no 80%
2. Are hovered links underlined? no yes yes yes yes yes yes yes no yes 80%
3. Do visited links differentiate? no yes yes yes yes yes yes yes no yes 80%
4. Is the layout in fixed width? yes yes no yes no yes no yes yes no 60%
yes yes no no yes no no yes yes no 50%
6. Is there a right sidebar? yes yes yes yes no no yes yes yes no 70%
7. Is there a left sidebar? no no no no no yes no no no no 90%
8. Is there a top clickable logo ? yes yes yes yes yes yes yes yes yes yes 100%
yes yes yes yes yes yes yes yes yes yes 100%
10. Is the main text on white background? no yes yes yes yes no yes yes yes yes 80%
11. Is the main text sans-serif? yes no yes yes yes yes yes yes yes yes 90%
12. Is the DOCTYPE Strict? no yes yes no no yes no yes yes yes 60%
13. Do they use accesskeys? no yes no no no no no no yes no 80%
14. Do they use 'Steal these' buttons? no yes no no no no yes no no no 80%
15. Is there a header graphic? yes yes yes yes no yes yes yes no no 70%
yes yes yes yes no yes yes yes yes yes 90%
17. Is the designer's full name present? yes yes yes yes yes yes yes no no yes 80%
18. Is there a print style sheet? no no yes yes no yes yes yes no no 50%
19. Does the navigation bar use image rollovers? yes yes yes yes no no no yes yes no 60%
20. Is the page UTF-8 encoded? no yes yes yes no yes no yes yes no 60%
21. Is the page XHTML? yes no yes yes no yes no yes yes yes 70%
22. Is there a XML prolog? no no no no no no no no no no 100%
23. Are quotes educated? yes yes yes yes no yes yes yes yes no 80%
24. Is there a 404 page? yes yes yes no yes no yes yes no no 60%
25. Is there more than 6 navigation elements? no no no no no yes no no no no 90%
Dissidence 20% 16% 12% 16% 36% 32% 32% 4% 28% 36%  

Results

Avg. consensus 76.8% 50% 100%

→ Three quarters of our targets agree with each other on how to treat some capital elements of their layout and code.

Avg. dissidence 24.2% 4% (Douglas Bowman) 36% (Jakob Nielsen, Tantek Çelik)

→ Our targets may disagree and act differently than the majority, but not in more than one case out of four.

Linear notes

  1. Q: Are hovered links underlined ? 80% yes

    Were counted as underlined a:hover selectors as defined in note #1, as well as selectors which background-color attributes are altered by hovering.

    Consensus falls by 10 points because Jeffrey Zeldman changes the underline status of his links while hovered. This is not a general behaviour: 80% survey targets keep the links underlined (as previously broadly defined).

    similar layouts.

  2. Q: Do visited links differentiate ? 80% yes

    Were counted as different a:visited selectors which differ from a:link selectors, usually by color.

    “Change the color of visited links” is one Jakob Nielsen's directives (alertboxes). Once again, Jon Hicks and Jeffrey Zeldman stand out, while the rest of our targets behaves the same and distinguishes visited from not (yet) visited links by a color change (usually a decrease in saturation).

    similar layouts.

  3. Q: Is the layout in fixed width ? 60% yes

    Were counted as fixed layouts including a width attribute in pixels (px) in their principal divider (usually wrapper or container, if not body).

    As reported by Clagnut, there had been some upheaval when Douglas Bowman and Dan Cederholm had converted to fixed widths. This question thus had its place in this survey: what about now ? Are designers opting for fixed or liquid ? Over two thirds of my target web sites use fixed (usually a bit less than 800px to let 800x600 users view the whole layout).

    Before the “Bowman & Cederholm” move in December 2003, this question would have given a 60% consensus rate for fluid layouts. My conclusions follow:

    The rest of this survey tends to back up both of these early hypothesis: design rules emerge, either because gurus (designers, norm setters, etc.) militate for them, or because of unconscious mimetic dynamics. Dunstan's recent move can illustrate this theory :

    I decided to move to a fixed layout for two reasons: firstly because I’ve had enough of dealing with fluid-width layout problems, and fancied tackling a new set of issues; and secondly because I want to start using larger images in my posts, and knowing that I have a fixed-width container lets me do that without fear of breaking the layout. 1976 Design Verson 2

    similar layouts.

    Elastic Design, Flexible Layouts with CSS Positioning, Richard Rutter WSG interview.

  4. Q: Is there a right sidebar? 70% yes

    Was counted as a right sidebar any divider floating on right of main content.

    While left sidebars may impede reading, right ones can help the eye visualizing the zone it has to scan. Consensus is reached here by logic and knowledge of how an eye scans a page. Experience from print design is very probably involved.

    similar layouts, inheritance from print design.

  5. Q: Is there a left sidebar? 90% no

    Was counted as a left sidebar any divider floating on left of main content.

    Left sidebars are not very famous for the reason stated above. The same consensus is reached here as for right sidebars. Still, results do not overlay perfectly: only John Gruber has decided his sidebar would be left instead of right. Tantek Çelik's choice is different: he has both, although sidebars are quite asymmetrical in content.

    similar layouts, inheritance from print design.

  6. Q: Is there a top clickable logo? 100% yes

    Is understood by 'clickable logo' a small to medium-sized graphic and/or text placed on top of the page, which users can click to easily return to the index page.

    I remember Jeffrey Zeldman commenting the fact he had removed the 'to index' logo from his design in a previous layout for the Daily Report (can't find it in the Daily Report archives, alas). Now the 'clickability' back. As everywhere ! A perfect example of isomorphism motivated by common sense, for such an easy-to-access link is always of some help when web sites can quickly reach three or four depth levels.

    similar layouts, identical contents.

  7. Q: Is the main text on white background? 80% yes

    Was admitted as 'white' main content using a background-color between #eee and #fff included. Some better method could have been using a certain luminance point, but the target web sites did not ask for such an elaborate measurement tool.

    Once again, this question aimed at measuring inheritance from print design, where white background is more than a rule of thumb for main content. Of the two dissidents using colored backgrounds, only John Gruber uses a really dark background; Jeffrey Zeldman, as usual (refer to his older designs), uses some light color.

    similar layouts, inheritance from print design.

  8. Q: Is the main text sans-serif? 90% yes

    Based on simple typography rules, 'sans-serif' main contents use fonts such as Verdana, Arial, or Helvetica.

    This question still explores similitudes and differences with print design, where long text is usually presented in serif typefaces. On the Internet (or rather on computer screens), rules change and web designers know it: most of them use sans-serif typefaces. An extra argument for sans-serif use is that Verdana is a very good typeface in computer terms (easy to read even when very small).

    similar layouts, inheritance from print design.

    Web-Safe Fonts for Your Site

  9. Q: Is the DOCTYPE Strict? 60% yes

    A simple look at the document heads was enough here.

    This questions deviates a bit from our survey: it is more a question about norms than about design. It appears designers are divided about doctypes, for reasons this survey cannot concisely explain nor cover.

    coding the same way.

    Fix Your Site With the Right DOCTYPE!, HTML/XHTML reference templates.

  10. Q: Do they use access keys? 80% no

    A search through the page code using the term 'access key' was my main method if investigation. One access key use was enough to be qualified as 'using access keys', which was the case about Jon Hicks.

    Very strangely enough, our selected panel of talented designers do not use access keys. Why? And this is a very genuine interrogation. Mark Pilgrim points out good reasons for using keyboard shortcuts, even just a few of them. Access keys are plain sailing to implement; even though some compatibility conflicts are known, I stay clueless on this point. May this survey give rise to another debate on this specific point.

    coding the same way.

    Access keys: Unlocking Hidden Navigation

  11. Q: Do they use 'Steal these' buttons? 80% no

    Is understood as such any image presenting resemblance with the original 'Steal these' buttons . One button was enough to qualify for a positive answer at this question.

    Thanks to XFN, those buttons are legion on the Internet. Jon Hicks was using them not so long ago.

    identical contents.

  12. Q: Is there a header graphic? 70% yes

    Is understood by 'header graphic' an image placed above the main content.

    A strange question indeed, esp. when looking at its results. Jon Hicks has no header graphic but has some kind of lateral equivalent. Tantek Çelik does not use graphics. Why use graphics anyway ? usually because they serve as common visual identifiers (one may say 'brand'), such as the Zeldman hat (used on the cover of his book, in his footer, etc.).

    similar layouts, identical contents, inheritance from print design.

  13. Q: Is the designer's full name present? 80% yes

    A search for <Christian name> <Family Name> was performed through both test pages.

    It appears 80% of the targets have their full name on each page, most probably due to their professional use of the Internet (nicknames are okay for IRC, not for selling your services, obviously). Techniques such as the Farhner Image Replacement are sometimes baptised using their creator's name.

    identical contents.

  14. Q: Is there a print style sheet? 60% no

    A search was performed through the page headers for any style sheet with a specific media=print attribute.

    The question does not aim at testing the pages' printability, for some pages are printable without any print style sheet. The question aims at counting the pages which feature a specific print style sheet. The questions divides our targets: it seems print style sheets are less and less used (Tantek Çelik recently abandoned using one).

    coding the same way.

  15. Q: Does the navigation bar use image rollovers? 60% yes

    Visual check was the only investigation method.

    The question aims at measuring the use of pure CSS rollovers on the target web sites. Such rollovers have been fully covered by many articles (main source). Rollovers had been deprecated by non-valid Javascript usage to make them work, before pure CSS rollovers help their reintroduction.

    coding the same way.

    Night of the Image Map.

  16. Q: Is the page UTF-8 encoded? 60% yes

    Results were compiled by reading the appropriate meta tag.

    Maybe this 50/50 result is the fault of blog engines which do not encode in UTF-8.

    coding the same way.

  17. Q: Is the page XHTML? 70% yes

    Quite simply, results were compiled by reading DOCTYPEs.

    XHTML is not only newer and trendier, but also more drastic in its validity process. Blogging engines tend to render blogs in XHTML, as far as I know. When PHP scripts render valid code, they often choose to produce XHTML (last example I can think about). XHTML has many reasons to be chosen over HTML, although choice between the two stays purely functional.

    coding the same way.

    Better Living Through XHTML, XHTML 2.0 Draft Update, Debate Ensues.

  18. Q: Is there a XML prolog? 100% no

    A XML prolog looks like this: <?xml version="1.0" encoding="UTF-8" ?>.

    “Using the XML prolog in XHTML documents is a practice that is recommended but not required by the W3C. So, it's up to you whether to use it or to leave it out.” Well, choice is unanimous: none of our targets use such a prolog.

    coding the same way.

  19. Q: Are quotes educated? 80% yes

    Were understood as educated encoded ‘apostrophes’ (&#8217;) and “quotes” (&#8220; &#8221;), which are the quotes used in English («French» and „German” use other quotes).

    Good news: web designers appreciate, just like print designers do, nice typography. Not educating quotes is still no big sacrilege, anyway: the difference on screen is not so visible. Educated quotes are easy to get by using an appropriate blog engine: Mark Pilgrim has a macro for Movable Type (comment by John Gruber). All in all, educated quotes are given attention by our targets.

    Side note: quotes' encoding was numerical for 100% of targets, but for these entities only: other entities such as trademarks ™ (&trade;) or ampersands & (&amp;) were found in name encodings. Numerical encoding can be explained by blog engines rendering, such as Movable Type, or by widespread use of SmartyPants (created by John Gruber, used for example by Douglas Bowman).

    inheritance from print design.

  20. Q: Is there a 404 page? 60% yes

    Targets were tested by trying to access a sdfgh.html from their root index (example: http://zeldman.com/sdfgh.html).

    One half of our targets use a 404 page, usually displaying a site map. Maybe not all targets have enough control over their server in such a way they can implement a 404 page.

    identical contents.

    The Perfect 404, The great custom 404 page adventure.

  21. Q: Is there more than 6 navigation elements? 90% no

    Were understood as navigation elements the list of items, usually located under the header, which allows quick navigation through the web site's main sections. Most of our targets use a id="nav" or class="nav" list to code their navigation elements.

    Apart from John Gruber who quite recently added a private/membership section to this web site, all our targets respect an implicit rule of thumb here: no more than 6 navigation sections. Jakob Nielsen has no such navigation bar with clear explicit sections.

    identical contents.

    Hierarchy.

Additional notes

  1. Looking at text and 'main content': one more methodology point.

    When judging text for itself (links) or for positioning needs (header, footer), I used the main, principal, body text, which is usually found in the largest column (often if not always located on the left, because that's where the eye starts, see appropriate question).

    It can happen layouts use different attributes for 'main' links and 'sidebar' links, this is why this precision had to be made.

  2. Target reference:

    It appeared some targets could not be evaluated on their sole index.html page. Blogs are so much widespread that evaluating design of blog entries instead of, or in complement to, web site indexes, was necessary in some cases. In many cases, both were only one and same page. Pages were checked on the following dates: June 22th 2004, June 24th 2004, July 22th 2004. On a lighter note, this list constitutes a nice article florilège.

    Target Index page Specific blog entry
    Jeffrey Zeldman The Daily Report Clarendon is the new Helvetica
    Mark Pilgrim Dive into Mark Life Assessment quiz
    Dave Shea Mezzoblue IA with OmniGraffle
    Dan Cederholm SimpleBits A validation tale
    Jakob Nielsen Use It Remote Control Anarchy
    John Gruber Daring Fireball The Location Field Is the New Command Line
    Eric Meyer MeyerWeb Elemental Nomenclature
    Douglas Bowman Stop Design The New Blogger
    Jon Hicks Hicks Design I fear the iChat
    Tantek Çelik n/a More about the 'class' attribute
  3. Selecting targets: why those web sites (and not yours)?

    This last point is what I previously defined as charismatic leadership in web design trends. Mark Pilgrim, for instance, has written web sites which can be considered as almost normative. Most of my targets have written in magazines. Some of them have published books (Zeldman's is often spoken of as a biblical reference thou shall worship and obey to). In brief, those designers are invested with some form of authority on their readers.

    I think this was interesting enough to look at the pertinence of this hypothesis: if web design knows trends, can 'Pied Piper' phenomena be identified ? Are web design customs sticky? I conclude my survey by answering 'yes' to these questions, and by validating my first intuitions.

    Design & inspiration.

  4. Personal results using my web site and blog:

    Short bio: 20 year-old student, France, web designs at night fall. Pages used as targets: phnk.com web site and “WaSP Survey” blog entry.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
    yes yes yes yes yes yes no yes yes yes yes yes yes no yes yes no yes no yes yes no yes no no

    Dissidence rate: 12%.

  5. Why not use Tantek Çelik's index? The Tantek redesign.

    The index in question is more some CSS experience than anything else. It appeared problematic: for instance, Tantek Çelik uses HTML on his index and XHTML on his blog. Because of the experimental nature of his index page, only his blog was taken in account through the survey.

    The 'funniest' thing about Tantek Çelik is that his blog must have gone through some sort of redesign process while I was writing this survey. The original blog entry I had decided to use as target was this one : SXSF Cafe tonight @ Rockin' Java. Look at it : the design is quite different! Every single question was thus re-examined a second time. Many results were changed: the former blog layout had a left sidebar, the new one has no columns at all, for example.

  6. Defining font-size: total chaos results…

    Font size has received much attention from web designers; defining it in style sheets can be done many ways. My idea was to ask the question: Are all my targets using absolute sizing, such as in font-size: x-small?

    Here are my results. I looked at the body tag to fill in my chart:

    Jeffrey Zeldman Mark Pilgrim Dave Shea Dan Cederholm Jakob Nielsen John Gruber Eric Meyer Douglas Bowman Jon Hicks Tantek Çelik François Briatte
    small/
    1.4
    100% 12px/
    19px
    x-small none 11px 0.84em/
    1.3
    small/
    1.6em
    normal
    11px/
    1.7em
    small/
    1.5
    small

    Almost every designer has its own method for defining font sizes. The question was thus removed from consensus/dissidence tests.

    Power To The People: Relative Font Sizes, Text Sizing, CSS Design: Size Matters.

Conclusions

An overall conclusion

This survey may state the obvious. It may also contain a few mistakes, and will contain more and more as time goes by, for the studied target designs are evolving. I nevertheless think a few points were made :

Please feel free to quote, comment, correct, or make suggestions about this survey.

007. A web design survey by François Briatte (email), June/July 2004.