Internetworkers: http://www.ibiblio.org/internetworkers/

[Ruby Sinreich <rubyji AT metalab.unc.edu>]

Now I don't have to keep explaining my design philosophy to people, I can
just point them to this article.  I know it's been said before, but I like
the Daoist context.

http://www.alistapart.com/stories/dao/

= Ruby

  R u b y   S i n r e i c h
   rubyji AT metalab.unc.edu
http://metalab.unc.edu/rubyji

======================================================

A Dao of Web Design

John Allsopp

Introduction

What Zen was to the 70's (most famously with motorcycle
maintenance), the Tao Te Ching was to the 90's. From Piglet and
Pooh to Physics and back, many have sought sense in applying the
Tao Te Ching to something (the Tao of Physics), or something to the
Tao Te Ching (the Tao of Pooh). It can be a cheap trick, but lately it
has struck me that there is more than a little to be understood about
web design by looking through the prism of the Tao.

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've answered too many questions to count
about them on newsgroups and via email; I've fought for their
adoption with The Web Standards Project. And slowly I've 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's the tension between an existing medium,
the printed page, and its child, the web. And it's time to really
understand the relationship between the parent and the child, and
to let the child go its own way in the world.

Same old new medium?

"Well established hierarchies are not easily uprooted;
Closely held beliefs are not easily released;
So ritual enthralls generation after generation."
Tao Te Ching; 38 Ritual

If you've never watched early television programs, it's instructive
viewing. Television was at that time often referred to as "radio with
pictures", and that's a pretty accurate description. Much of
television followed the format of popular radio at that time. Indeed
programs like the Tonight Show, with its variants found on
virtually every channel in the world (featuring a band, the talk to
the camera host, and seated guests), or the news, with the suited
sober news reader, remain as traces of the medium television grew
out of. A palimpsest of media past.

Think too of the first music videos (a few of us might be at least that
old). Essentially the band miming themselves playing a song.
Riveting.

When a new medium borrows from an existing one, some of what it
borrows makes sense, but much of the borrowing is thoughtless,
"ritual", and often constrains the new medium. Over time, the new
medium develops its own conventions, throwing off existing
conventions that don't make sense.

If you ever get the chance to watch early television drama you'll find
a strong example of this. Because radio required a voice-over to
describe what listeners couldn't see, early television drama often
featured a voice over, describing what viewers could. It's a simple
but striking example of what happens when a new medium
develops out of an existing one.

The web is a new medium, although it has emerged from the
medium of printing, whose skills, design language and conventions
strongly influence it. Yet it is often too shaped by that from which it
sprang. "Killer Web Sites" are usually those which tame the
wildness of the web, constraining pages as if they were made of
paper - Desktop Publishing for the Web. This conservatism is
natural, "closely held beliefs are not easily released", but it is time to
move on, to embrace the web as its own medium. It's time to throw
out the rituals of the printed page, and to engage the medium of the
web and its own nature.

This is not for a moment to say we should abandon the wisdom of
hundreds of years of printing and thousands of years of writing. But
we need to understand which of these lessons are appropriate for
the web, and which mere rituals.

Controlling Web Pages

The Sage

"... accepts the ebb and flow of things,
Nurtures them, but does not own them,"
Tao Te Ching; 2 Abstraction

Spend some time on web design newgroups or mailing lists, and
you'll find some common words and ideas repeated time after time.
Question after question, of course, is "how do I?". But beneath
questions like "how do I make my pages look the same on every
platform" and "how can I make my fonts appear identical on the
Macintosh and Windows" is an underlying question - "how do I
control the user's browser?" Indeed, the word control turns up with
surprising frequency.

Underpinning all this is the belief that designers are controllers
(think about the implications of the term "pixel mechanic").
Designers want to override the wishes of users, and the choices that
they have made about their viewing experience (by "fixing" font
size, for instance). Designers want to second guess platform
differences, caused by different logical resolutions (for instance the
Macintosh's 72dpi, versus the standard Windows 96dpi). Designers
are all knowing, and will not tolerate anything less than a rendering
on every browser that is pixel perfect with the rendering on their
own machine.

Of course, this exaggerates the case, but not greatly. A very strong
example of this is the often expressed disappointment of developers
when they learn that style sheets are not "DTP for the web". And if
you are a Mac user, you will be acutely aware of just how many
really major sites abuse style sheets to make their pages illegible.
Chances are they are using pixels or points as a measure of
font-size. Underlying this choice is the "designer is controller"
philosophy.

Where does this idea come from? I believe it flows from the medium
of print. In print the designer is god. An enormous industry has
emerged from WYSIWYG, and many of the web's designers are
grounded in the beliefs and practices, the ritual of that medium. As
designers we need to rethink this role, to abandon control, and seek
a new relationship with the page.

Why does it matter?

A newborn is soft and tender,
A crone, hard and stiff.
Plants and animals, in life, are supple and succulent;
In death, withered and dry.
So softness and tenderness are attributes of life,
And hardness and stiffness, attributes of death.
Tao Te Ching; 76 Flexibility

Perhaps the inability to "control" a page is a limitation, a bug of the
web. When we come from the WYSIWYG world, our initial instinct
is to think so. I admit that it was my first response, and a belief that
was a long time in going. But I no longer feel that it is a limitation, I
see it as a strength of a new medium.

Let's look at this through the other end of the microscope. The fact
we can control a paper page is really a limitation of that medium.
You can think - we can fix the size of text - or you can think - the size
of text is unalterable. You can think - the dimensions of a page can
be controlled - or - the dimensions of a page can't be altered. These
are simply facts of the medium.

And they aren't necessarily good facts, especially for the reader. If
the reader's eye sight isn't that of a well sighted person, chances are
the choice the designer made is too small to comfortably read
without some kind of magnification. If the reader is in a confined
space, a train to work, an airplane, the broadsheet newspaper is too
large. And there is little the reader can do about this.

The control which designers know in the print medium, and often
desire in the web medium, is simply a function of the limitation of
the printed page. We should embrace the fact that the web doesn't
have the same constraints, and design for this flexibility. But first,
we must "accept the ebb and flow of things".

Adapatability is Accessibility

The best of man is like water,
Which benefits all things, and does not contend with them,
Which flows in places that others disdain,
Where it is in harmony with the Way.
Tao Te Ching; 8 Water

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.

"As observing detail is clarity,
So maintaining flexibility is strength;
Use the light but shed no light,
So that you do yourself no harm,
But embrace clarity."
Tao Te Ching; 52 Clarity

The flexibility I've talked about so far I think of as "adaptability".
Everything I've 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's 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

"The Way is shaped by use,
But then the shape is lost.
Do not hold fast to shapes
But let sensation flow into the world
As a river courses down to the sea."
Tao Te Ching; 32 Shapes

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've 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, don't use HTML for presentation. No <font>
or <b>, <i> and other presentational elements. Where HTML
provides an appropriate element, use it. Where it doesn't, 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. Or
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. Aboveall, 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.

Fonts

Typically, a Windows, Macintosh, or other system will have only a
handful of fonts installed. There is little overlap between the default
installed fonts on these various systems. Already with many
browsers, and increasingly in the future, readers will be able to
decide on the fonts they want to view web pages with. With CSS,
you can suggest a number of fonts, and cover as many bases as
possible. But don't rely on a font being available regardless of how
common it is.

More important still is font size. You may be aware that the same
font, at the same point size on a Macintosh "looks smaller" than on
most Windows machines. In a nutshell, this is because the "logical
resolution" of a Macintosh is 72dpi, while the Windows default is
96dpi. The implications of this are significant. Firstly, it guarantees
that it is essentially impossible to have text look identical on
Macintoshes and Windows based systems. But if you embrace the
adaptability philosophy it doesn't matter.

What? If you are concerned about exactly how a web page appears
this is a sign that you are still aren't thinking about adaptive pages.
One of the most significant accessibility issues is font size. Small
fonts are more difficult to read. For those of us with good eyesight,
it can come as a shock that a significant percentage of the
population has trouble reading anything below 14 point times on
paper. Screens are less readable than paper, because of their lower
resolution.

Does that mean the minimum point size we should use is 14 pts?
That doesn't help those whose sight is even less strong. So what is
the minimum point size we should use? None. Don't use points. This
allows readers to choose the font size which suits them. The same
goes even for pixels. Because of logical resolution differences, a
pixel on one platform is not a pixel on another.

You can still suggest larger font sizes for headings and other
elements. CSS provides several ways of suggesting the size of text
in such a way as to aid adaptability. We'll look at just one to get an
idea.

With CSS you can specify font size as a percentage of the font size of
a parent element. For example, headings are inside the BODY of
the page. If you don't set a size for the text in the BODY, then the
text of the BODY will be the size that the reader has chosen as their
default size. Already we are aiding adaptability of our page, simply
by doing nothing!

You might say "but the text looks too big" if I just leave it like that.
Make it smaller then. But in your browser. And your readers will
then have the option to make it bigger or smaller in their browsers
too, depending on their tastes, or their needs.

We can make headings and other elements stand out using font size
by specifying that headings of level 1 should be say 30% larger than
the body text, level 2 should be 25% larger, and so on. Now,
regardless of the size that the user chooses for their main text,
headings will be scaled to be proportionally bigger than the main
text. Similarly text can be scaled to be smaller than the body text,
however, this can give rise to situations where the text can be
illegibly small, so use with caution.

We've done very little really, just avoided using absolute font sizes,
and used proportional sizes for headings, and we've already made
our pages much more adaptable and accessible.

Layouts

Margins, page widths and indentation are all aspects of page
design which can aid readability. The web presents difficulties for
the designer with each of these. Browser windows can be resized,
thereby changing the page size. Different web devices (web TV, high
resolution monitors, PDAs) have different minimum and maximum
window sizes. As with fixed font sizes, fixed page layout can lead to
accessbility problems on the web.

As with fonts, layout aspects of a page can be designed using
percentages to create adaptable pages. Margins can be specified as
a percentage of the width of the element which contains them.

Using percentages (or other relative values) to specify page layout
in CSS automatically creates adaptive pages. As browser windows
widen and narrow, the layout of an element adapts to maintain the
same proportions, and so the whole page layout adapts. Readers
can choose the window size they find appropriate to their needs.

Margins, text indentation and other layout aspects can also be
specified in relation to the size of the text they contain, using the em
unit for specifying margins, text indentation and other layout
aspects. If you specify


P {margin-left: 1.5em} 

you are saying that the left magin of paragraphs should be 1.5 times
the height of the font of that paragraph. So, when a user adjusts
their font size to make a page more legible, the margin increases
proportionally, and if they adjust it to make it smaller, the margin
adapts again.

Colors

The web is by and large a more colorful medium than the printed
page. Color is cheaper on the web. Color can be ornamental, can
help to establish a visual identity, and can have practical value (red
might draw attention to important information). But color poses
difficulties to accessibility as well.

Did you know that in many countries (if not all) people with red
green color blindness are unable to obtain an aircraft pilot's license?
That is, regardless of any other ability, because warning
information is almost invariably conveyed using red for danger and
green for safety. It's a shame that warning lights aren't simply
adaptable.

Do your web pages exclude people in a similar way? It would be a
shame, as in the near future most web browsers will provide simple
ways for readers to adjust the color of elements on a web page, via
user style sheets, which can override your style sheets. (You can do
this now with IE5 Macintosh edition.)

How to avoid these problems? Use style sheets, rather than the
HTML <font> element. And avoid relying on color combinations to
alone convey meaning.

The Journey

Yet a tree broader than a man can embrace is born of a tiny shoot;
A dam greater than a river can overflow starts with a clod of earth;
A journey of a thousand miles begins at the spot under one's feet.
Tao Te Ching; 64a. Care at the Beginning

Changing our ways of thinking and acting isn't easy. "Closely held
beliefs are not easily released". But I've come slowly to realize that
much of what I took for granted needed to be reassessed. Judging by
what I see and read and the conversations I've had, the email I've
read over the last couple of years, many hold these beliefs closely,
and need to rethink them too.

Now is the time for the medium of the web to outgrow its origins in
the printed page. Not to abandon so much wisdom and experience,
but to also chart its own course, where appropriate.

The web's greatest strength, I believe, is often seen as a limitation,
as a defect. It is the nature of the web to be flexible, and it should be
our role as designers and developers to embrace this flexibility, and
produce pages which, by being flexible, are accessible to all.

The journey begins by letting go of control, and becoming flexible. -
JOHN ALLSOPP

 

:::

John Allsopp is responsible for technology at Western Civilisation
software, developers of Style Master, a cascading style sheet editor
for Windows and the Macintosh, and maintainers of The House of
Style, a comprehensive css resource, featuring a a complete guide to
all of CSS, as well as tutorials, articles, comprehensive browser
compatibility information, and more.
John is one of The Web Standards Project's CSS samurai, whose
responsibility has been to badger browser developers into fuller and
better support of CSS. 

Tao Te Ching quotes from the GNL's not Lao Tao Te Ching
Copyright (C) 1992, 1993, 1994, 1995 Peter A. Merel.

 2000   A List Apart 
[Jeffrey Zeldman & Brian Platz]

Permanent location: www.alistapart.com/stories/dao/