A Dao of Web Design

by John Allsopp
Published in: Accessibility, CSS, Layout, Typography | No discussion

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 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”.

Adaptability 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 element? Use the 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 or , 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. 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.

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 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.

Translations
Russian (Webmascon.com)
French (Pompage.net)
Tao Te Ching quotes from the GNL’s not Lao Tao Te Ching Copyright © 1992, 1993, 1994, 1995 Peter A. Merel.

Learn More
Related Topics: Accessibility, CSS, Layout, Typography

About the Author
John Allsopp is lead developer of CSS Editor Style Master, co-founder of the Web Essentials conference series, WaSP CSS Samurai, and an old school curmudgeon. Sort of.
A List Apart 经典文章中译：Web设计之道（上）

作者: its|发布: 2008-12-15 (9:26)|阅读: 618|评论: 2|静态地址|内容源码
道之于90年代恰如禅之于70年代。事无巨细，皆可受之道，或推之道。Web 设计之事，虽小技，然而通览道德经，我们仍然会发现其中包含深刻的道理。道是哲学，象佛，是一种生活与处世的方式，来自古老的《道德经》，这部拥有81个章节的晦涩经文涵盖了人类的经验，但它始终讲述一个主题，和谐。

过去几年，或好或坏，我的生活与 Style Sheet 有关，我为之编写软件，教程与指南；回答了数不清的问题，通过新闻组或电子邮件；通过 The Web Standards Project 推而广之。慢慢的，我对 Web 设计有了完全不同的理解，并看到设计与道之间的关联。

我所看见的是一种紧张关系，在现实的 Web 与理想的 Web 之间；在现有的媒体，印刷媒体与 Web 之间。而现在正是需要对二者进行一次梳理的时间，也是让 Web 放手走自己的路的时间。

守旧的新媒体？
“上德不德， 是以有德。 下德不失德， 是以無德。”
《道德经》第38章

你是否见过早期的电视节目，它们是讲解式的画面，那时的电视被贴切地称为“有画面的广播”。很多电视节目是借用热门广播节目的形式。而现在随处可见的晚间访谈，或新闻，仍然带着早期电视节目的旧媒体的影子。

早期的音乐电视也是这样，乐队仅仅是在镜头前模拟自己表演时的样子。

但一个新媒体从旧媒体发展起来，它对旧媒体的某些借鉴可以理解，但不能全盘借鉴，否则对新媒体是一种限制，所谓“下德不失德”。时过境迁，新媒体将拥有自己的形式，而将那些不合理的东西丢弃。

如果你曾看过早期的的电视剧，它们也是这样，广播剧需要有人讲解听众所看不到的画面，早期的电视剧也经常有人讲解，讲解那些观众自己能看到的东西，这就是旧媒体演变成新媒体时容易出现的问题。

Web 是新媒体，尽管它来自印刷，印刷的技巧，设计及惯例对 Web 影响巨大。然而 Web 和印刷过于肖似，那些“杀手级网站”常常是那些对 Web 的野性加以驯服，让页面中规中矩就象它们也是纸张一样的网站，也就是桌面印刷版的 Web。这种风尚很自然，“下德不失德”，但我们需要前进，让 Web 成为它自己的媒体，我们需要抛弃印刷媒体的“德”，让 Web 拥有自己的天性。

我们并不是说要抛弃几百年来的印刷，与几千年来的书写的智慧。但我们需要明白这些东西哪些是对 Web 有利的，那些仅仅是束缚 Web 的 “德”。

不要主宰你的网页
圣人“... 萬物作而不辭， 生而不有， 為而不恃”
《道德经》第2章

抽时间到那些 Web 设计新闻组或邮件列表看一下，你会发现被一遍一遍说了很多次的话，问了很多遍的问题，比如，“我该如何让我的网页在所有平台都上去一致？”，“如何让我的字体在 Mac 和 Windows 上一模一样？”，或者“如何控制用户的浏览器？”，控制一词的出现频率非常高。

所有这些的背后，是这样一种信念，设计者是控制者（想想像素师（pixel mechanic）这个称呼的意味）。设计者希望驾御用户的意识，希望用他们的视觉经验驾御用户的选择（比如使用固定的字号）。设计者不考虑因逻辑分辨率不同而导致的平台差别（如 Mac 的 72dpi 与 Windows 的 96dpi），他们无所不知，他们不能容忍在不同浏览器上有哪怕一个像素的差别。

当然这有些夸张，但基本事实。一个最好的例子是，当 Web 开发者们明白 CSS 并非 Web 上的桌面印刷工具时所表现出的失望。如果你是 Mac 用户，你会发现有很多非常大的网站为了防止页面字体模糊而拒绝使用 CSS，他们很可能使用 px 作为字体尺寸，而这种选择所隐含的思想就是“设计者也是主宰者”。

这种思想的根由在哪里？我觉得来自印刷。对印刷而言，设计者就是上帝，印刷是一个基于 WYSIWYG （所见即所得）的庞大行业，而众多 Web 设计者也扎根于此并对这个行业的“德”深信不疑。作为 Web 设计者，我们需要对此重新思考，放弃控制欲，并寻求与网页之间的全新关系。

为什么要这样？
“人生之柔弱， 其死堅強。万物草木生之柔脆，其死枯槁。故堅強者死之徒，柔弱者生之徒。”
《道德经》第76章

不能控制网页看似一种局限，或缺陷，而来自 WYSIWYG 世界的我们初期都有这种想法，我承认最初我也这样想。但如今我不再认为那是一种局限，而是新媒体的力量所在。

事实上，我们对纸张媒体的控制才是真正的局限。想想看，我们能固定文字的尺寸，或者说，文字大小不可改变，或者，你可以说，纸张的尺寸也在控制中。

然而这未必是好事，尤其对读者。如果某个读者视力不好，你的那些固定的小字体不借助放大镜就很难看清；如果读者身处一个局促的空间，比如火车或飞机，那些宽幅的报纸就太大了，而针对这些问题，用户几乎无能为力。

我们在印刷中获得的控制力事实上是一种缺陷，不应再继承到 Web 设计中。我们知道，Web 没有这样的局限，因此应基于弹性而设计，爱这之前我们需要“萬物作而不辭”。

可适应性就是可访问性
“上善若水， 水善利萬物，又不爭。處眾人之所惡，故幾於道。”
《道德经》第8章

有人认为道是宿命，浅读会觉得人应当无为，静待事情的降临而被动反应。我认为，我们不应为久远的目标预设将来，相反，应该有适应力，而不是胶柱鼓瑟。

“見小曰明，守柔曰強。用其光，復歸其明，無遺身殃，是謂習常。”
《道德经》第52章

我迄今所谈到的所谓弹性即“适应性”。前面所言总结起来就是：让你的网页具有适应性。让你的网页具有可访问性，不拘何种浏览器，何种平台亦或何种屏幕。这意味着在任何屏幕尺寸，任何屏幕颜色数下，网页都合法可用（同时还要记住，人们可能会打印这些网页，或者使用读屏软件以及盲文浏览器进行访问）。这意味着网页要适应它的访问者，它的访问者可能视力不佳，希望使用比较大的字体。

设计适应性网页就是设计可访问性网页，而这是 Web 设计中远未实现的目标，也是 W3C 的一个重要思想，对 Web 设计来说，这是一个迫切的使命，将来的网页也许要求实现通用访问。

这听上去不太可能，通用访问，在当今并不灵光的浏览器面前，在各种可以访问 Web 的不成熟的移动设备面前，只是一种理想。但我们仍有很多东西可以努力，并为今后适应性网页设计打好基础。

译后记
A List Apart 是被所有 Web 设计者尊为圣典的一份杂志，John Allsopp 的 “A Dao of Web Design” 是被该杂志推荐阅读的一篇 Web 设计随笔，已被译为多种文字发表，然而并未见中文版。既然《道德经》来自中国，就没有理由让国内的众多 Web 设计者去啃并不怎么好懂的英文原文。当然，还是老话，这是技术随笔，并不是可以传世的人文作品，翻译也就只求信，而惘顾雅与达了。这是本文的第一部分，请参阅第二部分。

关于作者

A List Apart 经典文章中译：Web设计之道（下）

作者: its|发布: 2008-12-16 (11:14)|阅读: 211|评论: 0|静态地址|内容源码
这是 A List Apart 经典技术随笔 A Dao of Web Design 的第二部分，在第一部分的基础上，在字体，字号，布局，配色几个方面，讲述了如何实现弹性的，可适应性的 Web 设计。最后，作者指出 Web 作为一种新媒体应该尽快走出印刷媒体的影响，实现自己的使命。

解决之道
“名亦既有，天將知止。知止不殆。譬道在天下，猶川谷與江海。”
《道德经》第32章

如何实现自适应性设计并提高可访问性？我们要从多个方面做通盘考虑，然后针对这些考量给出解决步骤。首先，想一下你的网页是做何之用，而不是看上去如何。让你的设计跟随你所提供的服务，而不是外观。让形式跟从功能，而不是设计。

这种思想的基石是区隔内容与展示，这种说法你或许多次听过，然而这可能是你所能走出的最重要的一步。举个简单的例子，某个网页上有一段斜体字，为什么要斜体？可能为了强调，或是引述，或者是在英语中使用了一个外文词，在传统印刷中，形式跟从功能。而 Web 出版的优势是我们可以将纸张上含糊的东西明确地表达出来，如果斜体的目的是强调，为什么要使用 实现而不是非 PC 平台的浏览器也能认识的 ？

从大范围来说，不用将 HTML 用作展示，不要使用 ， 以及 ，使用那些恰当的 HTML 标签，如果找不到恰当的标签，使用 CSS 类。使用 CSS 进行展示，我们要向前看，而不是墨守陈规。

如果你合理地运用了 Style Sheet，并让它引导，而不是控制你的网页外观，同时，你并没有依赖 Style Sheet 表达信息，那么你的网页就能在任何浏览器正常工作，不管是过去的，还是将来的。那些不支持 Style Sheet 的浏览器将输出简单的内容部分。事实上，我们最担心的是那些对 Style Sheet 支持有 BUG 的浏览器，今天，这是一个问题，不久前还没有这么严重。现在，你可以限制你的 CSS 只使用其中被各种浏览器都完美支持的部分，对于那些不能很好支持的部分，可以使用那些展示型的 HTML 标签。作者曾为此写过一些文章。

在实践中，当 CSS 设计可能影响网页的可访问性时，你应当有所为有所不为。不管怎样，不要依赖任何 CSS，绝对单位，如 px 以及 pt 都应当避免，对色彩的使用也要谨慎，而且永远不要依赖它们。

字体
一般来说，Windows, Mac 以及其它操作系统都只安装了有限的字体，而它们之间共同的字体更少。目前的很多浏览器，以后会有更多，它们已经可以允许用户自己选择显示字体。使用 CSS，你可以指定尽可能多的字体，同样，不要依赖它们，不管这种字体是多么普遍。

更重要的仍然是字号，你需要知道，同样的字体，同样的字号，在 Mac 系统上看上去要比 Windows 系统小。因为 Mac 的逻辑分辨率是 72dpi 而 Windows 是 96dpi。这很重要，首先，让文字在 Mac 上和 Windows 上显示一模一样是不可能的，不过，如果你遵从的是适应性设计，这将不会成为问题。

如果你还操心你的网页最终看上去是否正好如何，说明你仍没以适应性设计思想思考问题。一个最主要的可访问性问题是字号，我们这些视力正常的人可能不相信世界上有很大比例的人无法在印刷媒体上阅读 14pt 以下的字体，更不要说显示器，显示器的分辨率更低。

这是否意味着 14pt 是最小的字号？非也，有的人的视力还要差，那到底用哪个字号？答案是，不要使用 pt，让用户自己选择阅读字体大小，px 也一样，因为逻辑分辨率的差别，一个平台上的 px 和另一个平台的 px 是不一样大的。

对于标题等位置，你仍可以使用大一些的字体。CSS 提供了多种方式设置字体尺寸，你可以按某个对象的父对象的百分比设置字体尺寸，比如，标题位于网页的 BODY 内，如果你没有设置 BODY 的字体尺寸，系统会取用户自己指定的字体尺寸，有时候，我们有所不为也可以帮助提升可访问性。

你可能会说，文字看上去太大，但你可以在浏览器中把它缩小，而你的用户可以选择放大或者缩小，依据他们的口味或需求。我们可以对标题进行强调，比如，将一级标题的字号加大30%，二级标题加大25%，这样，不管你的页面 BODY 部分选用了什么字号，标题都按比例改变，同样，字号也可以缩小，但需要小心，有时候，字号可能小到无法阅读。

以上我们所做的仅仅是避免使用绝对尺寸字体已经为可访问性带来很多帮助。

布局
边界，页宽，缩进都是一些可以提升可访问性的设计因素。浏览器窗口可以改变尺寸，并导致页面尺寸的改变，不同的 Web 设备（Web TV, 高分辨率显示器，PDA）拥有不同的最小与最大窗口尺寸，和固定字体尺寸一样，页面布局也会带来可访问性问题。

和字体一样，布局也可以使用百分比实现适应性设计，边界可以使用其容器尺寸的某个百分比。在 CSS 中使用百分比宽度布局会自动实现适应性设计，随着浏览器窗口的拉宽与收窄，页面的各个部分自动适应以维持相同的比例，从而整体页面也自动适应，用户可以自己选择一个他们认为合适的窗口尺寸。

边界，文字缩进以及其它布局方因素也可以基于它们所包含的文字的尺寸，可以使用 em 单位，比如：

p {margin – left: 1.5em}

这意味着段落的边界宽度将是它里面的文字的高度的1.5倍。因此，当我们调整文字的尺寸，边界也会随着改变。

颜色
Web 是一个比印刷要色彩丰富得多的媒体，色彩对 Web 来说非常便宜。色彩具有装饰性，可以建立视觉表征，可以带来现实意义（比如吸引注意力），然而色彩也会为可访问性带来问题。

你是否知道在很多国家（或许全部），红绿色盲的人不可以申请飞行执照？因为警告信息通常都是按红色危险绿色安全的形式表现的。很遗憾，警告信息没有使用可适应性色彩搭配。

你的网页是否同样将一些用户挡在外面？这可不怎么样，因为不远的将来，多数浏览器将允许用户使用自定义 Style Sheet 调整页面的配色，，这些自定义 CSS 将覆盖你设计的 CSS。如何避免这些问题？不要使用 HTML 标签，使用 CSS，同时不要依赖同一种配色含义。

改变之途
“合抱之木，生於毫末；九層之臺，起於累土；千里之行，始於足下。”
《道德经》第64章（上）

思想与行为的改变并不容易，“下德不失德”。但我渐渐明白很多我认为理所当然的东西都需要重新考虑，过去我所读，所见，所闻，所谈皆需反思。Web 作为一个新媒体已经到了突破印刷媒体的时候，并非放弃那些智慧与经验，而是找到自己的使命。

Web 最强大的力量，一直以来被视为局限与缺点，然而 Web 的天性是弹性，我们作为开发者与设计者，需要拥抱这种弹性，实现一个自适的，容易访问的 Web，这些努力从释放我们的控制欲开始。

译后记
A List Apart 是被所有 Web 设计者尊为圣典的一份杂志，John Allsopp 的 “A Dao of Web Design” 是被该杂志推荐阅读的一篇 Web 设计随笔，已被译为多种文字发表，然而并未见中文版。既然《道德经》来自中国，就没有理由让国内的众多 Web 设计者去啃并不怎么好懂的英文原文。当然，还是老话，这是技术随笔，并不是可以传世的人文作品，翻译也就只求信，而惘顾雅与达了。这是本文的第二部分，请参阅第一部分。

关于作者
John Allsopp 是 CSS Editor Style Master 的主要开发人员，Web Essentials conference series 的合伙创始人。他是 WaSP CSS 的捍卫者，也是老学院派式的守旧者，从某种意义上讲。