007. A web design survey by François Briatte (email), June/July 2004.
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.
| Jeffrey Zeldman | Mark Pilgrim | Dave Shea | Dan Cederholm | Jakob Nielsen | John Gruber | Eric Meyer | Douglas Bowman | Jon Hicks | Tantek Çelik | Consensus reached | |
| 1. Are links underlined? | 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% |
| 5. Is there a search box on the page? | 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% |
| 9. Is there a repetitive footer? | 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% |
| 16. Is the copyright explicit? | 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% |
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.
Q: Are links underlined ? 80% yes
Were counted as underlined a:link selectors with text-decoration: underline or positive border-bottom attributes.
This question motivated this survey: Jon Hicks' web site does not underline links, while most of my web design readings do. Underlining on the Internet is moreorless reserved to hyperlinks: the <u> tag is often pointed as infamous and was even removed from XHTML 1.0 Strict.
In books or encyclopedias, glossary terms are usually gratified with an asterisk*, or some other symbol. On the Internet, this symbol is the underline, and almost all our targets use it this way.
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).
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).
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
Elastic Design, Flexible Layouts with CSS Positioning, Richard Rutter WSG interview.
Q: Is there a search box on the page? 50% yes 50% no
Were counted as search boxes forms allowing an expression search.
Strangely enough, even though conventional wisdom appreciates search boxes and even though search boxes are available for free from Google or others, but only one target out of two features one. Mark Pilgrim simply states: “Every web site needs a site search. Period.”, which makes this result a bit more puzzling.
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.
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.
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.
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.
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).
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.
Fix Your Site With the Right DOCTYPE!, HTML/XHTML reference templates.
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.
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.
Q: Is the copyright explicit? 90% yes
Is understood as an explicit copyright notice a “©” sentence, or a sentence that evokes intellectual property rights.
I was expecting, by pure intuition, a 100% agreement because a copyright is just common sense, again. Strangely enough, Jakob Nielsen, who actually sells very expensive expertise elsewhere, does not include any copyright notice on bottom of his alertboxes. I am counting this as a design mistake. No web designer would omit the copyright notice on his or a customer's web site, whatever the page, and especially when the page is an article.
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.
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).
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.
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.
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.
Better Living Through XHTML, XHTML 2.0 Draft Update, Debate Ensues.
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.
Q: Are quotes educated? 80% yes
Were understood as educated encoded ‘apostrophes’ (’) and “quotes” (“ ”), 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 ™ (™) or ampersands & (&) 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).
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.
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.
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 |
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.
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%.
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.
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/ |
100% |
12px/ |
x-small |
none | 11px |
0.84em/ |
small/ |
normal |
small/ |
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.
Similar layouts
Even though thousands of different layouts can be achieved using (X)HTML, web designers tend to stick, explicitly or not, to a set of layout elements. Links must be underlined, even when hovered, and the user must be able to tell which links he has already visited. web designers do not like sidebars very much when placed on the left, right sidebars are much more widespread. Every page should include a header logo and a footer; moreover, a white background is preferred. The main text font should be sans-serif. Last, a header graphic is recommended.
Identical contents
Some elements of content are recurrent in web design: search boxes are quite common, copyright sentences including the designer's full name are prevalent; 404 pages are quite used too. The habit of dividing web sites into sections is extremely common; such sectioning rarely goes over six sections.
Coding the same way
Although many techniques often exist for the same effect in XHTML or CSS coding, web designers favor some coding techniques, elements, or norms. XHTML is acknowledged as the markup language to use by a majority. When designers decide not to use some code, they massively reject it: access keys, XML prologs. Many cleavages still remain: UTF-8 vs ISO encoding, Strict vs Transitional, use of print style sheets…
Inheritance from print design
web designers share a common print design background and import some of its elements to their Internet creations: a comprehensive use of sidebars and their positioning, footers, graphic headers, typographical knowledge.
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.