A Dao Of Web Design

John Allsopp - April 07, 2000

Article

Daoism is a philosophy, like Buddhism, a way of living, of being in the world, which stems from a text of great antiquity, the Tao Te Ching, whose 81 "chapters" enigmatically sweep across human experience, but with a strong common theme, that of harmony.

For the last couple of years, for better or worse, my life has revolved more than a little around style sheets. I write software, tutorials, and guides for them; I have answered too many questions to count about them on newsgroups and via email; I have fought for their adoption with The Web Standards Project. And slowly I have come to understand web design entirely differently because of them, and to see a strong association between design and the Tao.

What I sense is a real tension between the web as we know it, and the web as it would be. It is the tension between an existing medium, the printed page, and its child, the web. And it is time to really understand the relationship between the parent and the child, and to let the child go its own way in the world.

Adaptability is accessibility

There are those who think that dao is fatalistic. A simplistic reading is that one should wander, without plan, allowing for things to happen and to respond to them. I think of it as saying we should not be fixed in our outlook, with goals far ahead, rather we should be adaptable, not fixed in our views or direction.

The flexibility I have talked about so far I think of as "adaptability." Everything I have said so far could be summarized as: make pages which are adaptable. Make pages which are accessible, regardless of the browser, platform or screen that your reader chooses or must use to access your pages. This means pages which are legible regardless of screen resolution or size, or number of colors (and remember too that pages may be printed, or read aloud by reading software, or read using braille browsers). This means pages which adapt to the needs of a reader, whose eyesight is less than perfect, and who wishes to read pages with a very large font size.

Designing adaptable pages is designing accessible pages. And perhaps the great promise of the web, far from fulfilled as yet, is accessibility, regardless of difficulties, to information. It is an important belief of the World Wide Web Consortium, and is becoming an imperative of web design, as web pages will be required by law to provide universal access, just as building codes around the world require access to buildings.

It sounds an impossibility, designing the universal page. Perhaps now it remains an aspiration, with browsers so broken, and many of the devices through which we will access the web in their infancy, or not yet born. But there is a lot we can do now which will set the foundations for pages which adapt to the users wishes and needs, and so will be accessible.

The Way

So what can be done to design for adaptability, and so accessibility? Firstly, there are a couple of ways of thinking which might be helpful. Then I have some practical suggestions about steps you can take to avoid making your pages inaccessible.

Firstly, think about what your pages do, not what they look like. Let your design flow from the services which they will provide to your users, rather than from some overarching idea of what you want pages to look like. Let form follow function, rather than trying to take a particular design and make it "work."

A cornerstone of this idea is to separate the content and its appearance. You have probably heard this a hundred times, but it is perhaps the most important step you can take. Let’s look at a simple example. On a page there is some text which is italicized. Why is it italicized? It might be for emphasis. It might be a citation. It might be a foreign word used in English. In traditional publishing, the form follows from function. The advantage of web publishing is we can make explicit what is implicit in the appearance on paper. If the reason for italics is emphasis, why mark up your page with the "i" element? Use the "em" element, and so browsers other than PC based web browsers can handle the element appropriately.

On the larger scale, do not use HTML for presentation. No "font" or "b", "i" and other presentational elements. Where HTML provides an appropriate element, use it. Where it does not, use classes. And of course, use style sheets for your presentational information. It’s time to look to the future, not cling to the past.

If you use style sheets properly, to suggest the appearance of a page, not to control the appearance of a page, and you don’t rely on your style sheet to convey information, then your pages will “work” fine in any browser, past or future. Browsers which don’t support style sheets simply present pages that look a little on the plain side. Our biggest concern is browsers which have buggy style sheets support. Today this is an issue. Not too long from now, it won’t be much of an issue. For now, you can limit yourself to a subset of CSS which is well enough supported, and still have more presentational effect than using presentational HTML. I’ve written quite a bit about this elsewhere, so I won’t repeat myself here.

In practical terms, there are some things you should and some things you shouldn’t do when designing style sheets that will impact on the adaptability of your pages. Above all, don’t rely on any aspect of style sheets to work in order for a page to be accessible. Absolute units, like pixels and points are to be avoided (if that comes as a surprise, read on), and color needs to be used carefully, and never relied on.