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.
道教是一种哲学,就像佛教一样,是一种生活方式, 一种存在于世界上的方式,它源于一个伟大的古代文本,即《道德经》, 其81个章节神秘地席卷了人类的经验,但有一个强烈的共同主题,即和谐。
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.
在过去的几年里,无论好坏,我的生活都围绕着样式表展开。 我为他们编写软件、教程和指南; 在新闻组和电子邮件中,我已经回答了太多的问题,难以计数; 我努力使他们适应 Web 标准。 慢慢地,我开始对网页设计有了完全不同的理解, 并看到了设计和道之间的强烈联系。
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.
根深蒂固的等级制度不容易被连根拔起; 封闭的信念不容易解散; 因此,仪式缠缚着一代又一代的人。
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.
如果您从未看过早期的电视节目,那么观看起来很有启发性。 当时电视通常被称为“带图片的广播”,那可是一种非常准确的描述。 当时大部分电视都遵循流行广播的格式。 事实上,像《今夜秀》(Tonight Show)这样的节目,以及它的变体 —— 在世界上几乎每个频道上都能找到 —— 以乐队为特色,对着摄像头和在座的嘉宾谈话, 或者在新闻中,与穿着正装的清醒的读者一起, 仍然带有媒体电视的痕迹。对媒体过往的一种再现。 想想最早的音乐录影带(我们中的一些人可能至少已经那么老了)。 从本质上讲,乐队在模仿自己演奏一首歌。卯足了劲儿。
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
[圣人] ...接受事物的潮起潮落,培育它们, 但不拥有它们
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.
花一些时间在网页设计新组或邮件列表上, 你会发现一些常见的词语和想法一次又一次地重复。 一个又一个的问题,当然是“我该怎么做?” 然而,“如何使我的页面在每个平台上看起来都一样” 、“如何使我的字体在Macintosh和Windows上看起来相同” 这类问题其实是在问一个潜在的问题 —— “我如何控制用户的浏览器?” 事实上,“控制”这个词以惊人的频率出现。
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.
支撑这一切的是设计师是控制者的信念 (想想“像素机制”一词的含义)。 设计师希望掩盖用户的意愿, 以及他们对观看体验所做的选择(例如,通过“固定”字体大小)。 设计人员希望猜测由不同逻辑分辨率引起的平台差异 (例如,Macintosh 的 72dpi 与标准的 Windows 96dpi)。 设计师是无所不知的, 他们不会容忍任何一个浏览器的渲染缺陷, 那些渲染必需与他们自己机器上的渲染是完全一致的。
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.
当然,这夸大了情况,但不是很大。 一个非常有力的例子是, 当开发人员得知样式表不是“Web 的 DTP”时,他们经常表示失望。 如果你是Mac用户,你会敏锐地意识到 有很多的网站滥用样式表,使他们的页面难以辨认。 他们很可能使用点作为字体大小的度量。 这种选择的基础是“设计师就是控制者”的理念。
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.
这个想法从何而来?我相信它来自印刷媒介。 在印刷品中,设计师是上帝。 所见即所得(WYSIWYG)已经出现了一个巨大的行业, 许多网络设计师都基于这种媒介的信仰和实践。 作为设计师,我们需要重新思考这个角色, 放弃控制,寻求与页面建立新的关系。
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.
新生之物软而温柔, 老了,坚硬而死板。 植物和动物,在生活中,是柔软多汁的; 在死亡中,枯萎和干燥。 因此,柔软和温柔是生命的属性, 而坚硬和死板是死亡的属性。
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.
最好的人,就像水一样, 它有益于万物,不与万物争斗, 它流淌在别人不屑的地方, 它与道和谐相处。
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.
仔细观察,即是清明; 保持柔软,即是有力; 观照而不遗失, 则不会伤到你自己,却能常保清明。
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.
“道”因使用而塑造, 但随后形状就丢失了。 不要执着于形状, 而是让感觉流入这个世界, 如同江河流向大海。
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.
这个想法的基石是将内容和它的外观分开。
你可能已经听过一百遍了,
但这可能是你可以采取的最重要的一步。
让我们看一个简单的例子。在页面上有一些斜体文本。
为什么是斜体?
这可能是为了强调。它可能是一个引文。
它可能是英语中使用的外来词。
在传统出版中,形式源于功能。
网页排版的优势在于:我们可以明确地表达出页面外观所隐含的内容。
如果斜体的原因是强调,为什么要用 <i>
元素标记你的页面?
使用这个 <em>
元素,以便于PC浏览器以外的浏览器可以适当地处理该元素。
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.
在更大的尺度上,不用 HTML 进行表现。
别用<font>
或<b>
,<i>
和其他表示元素。
如果 HTML 提供了适当的元素,请使用它。如果没有,请使用类。
当然,用样式表来展示您的信息。
是时候展望未来了,而不是执着于过去。
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.
如果你正确地使用样式表, 支持网页的外观,而不是控制网页的外观, 并且你不依赖你的样式表来传达信息, 那么,无论是过去,还是将来,你的页面在任何浏览器中都可以“工作”。 不支持样式表的浏览器只是显示看起来有点平淡的页面。 我们最担心的是那些有错误样式表支持的浏览器。 今天这是一个问题。不久之后,这不会是什么大问题。 现在,你可以将自己限制在CSS的一个子集上, 而这个子集得到了足够的支持,比使用HTML表现元素具有更多的展示效果。 我在其他地方写过很多关于这个问题的文章,所以我不会在这里重复。
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.
通常,Windows、Macintosh 或其他系统将只安装少数字体。 这些不同系统上的默认安装字体之间几乎没有重叠。 已经有许多的浏览器,并且未来还会更多, 读者将能够决定他们想要查看网页的字体。 使用 CSS,您可以建议多种字体,并覆盖尽可能多的基础。 但是,无论字体有多普遍,都不可依赖该字体。
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.
更重要的是字体大小。 您可能觉察到,同样的字体,在 Macintosh 上“看起来比大多数 Windows 机器上”更小”。 简而言之,这是因为 Macintosh 的“逻辑分辨率”是 72dpi,而 Windows 默认值是 96dpi。 其影响是重大的。 首先,它保证了文本在 Macintosh 和基于 Windows 的系统上看起来基本不可能相同。 但是,如果你接受适应性哲学,那并不重要。
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.
什么?如果您关心网页的确切显示方式, 这表明您仍然没有考虑页面的自适应性。 最重要的可访问性问题之一是字体大小。 小字体更难阅读。 对于我们这些视力良好的人来说, 很大一部分人难以阅读纸上低于 14 磅的任何字,这可能会令人震惊。 而屏幕的可读性还不如纸,因为它们的分辨率更低。
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.
这是否意味着我们应该使用的最小点数是 14 磅? 这对那些视力更差的人没有帮助。 那么我们应该使用的最小点大小是多少呢?没有。不要使用磅。 这允许读者选择适合他们的字体大小。即使是像素也是如此。 由于逻辑分辨率差异,一个平台上的像素与另一个平台上的像素是不一样大的。
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.
您仍然可以为标题和其他元素建议更大的字体大小。 CSS 提供了几种建议文本大小的方法,以帮助适应性。 我们只需要看一个例子就可以了解。
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!
使用 CSS,您可以将字体大小指定为父元素字体大小的百分比。 例如,标题位于页面的 BODY 内。 如果未在 BODY 中设置文本的大小, 则 BODY 的文本将是读者选择的默认大小。 我们已经在增强我们页面的适应性了,很简单,什么都不用做!
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.
在字体上,我们可以使标题和其他元素突出, 方法是指定一级标题应该比正文大 30%, 二级标题应该大 25%,依此类推。 现在,无论用户为其正文选择何种大小,标题都将按正文的比例放大。 同样,文本可以缩放到比正文文本小, 但是,这可能会导致文本难以辨认,因此请谨慎使用。
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.
页边距、页面宽度和缩进,在页面设计的所有方面都有助于提高可读性。 网络给设计师带来了困难。 浏览器窗口的大小可以被调整,从而更改页面大小。 不同的网络设备(网络电视、高分辨率显示器、PDA)具有不同的最小和最大窗口尺寸。 与固定字体大小一样,固定的页面布局可能会导致 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.
在 CSS 中使用百分比或其他相对值,指定的页面布局会自动创建自适应页面。 随着浏览器窗口的变宽和变窄, 元素的布局会进行调整以保持相同的比例,因此整个页面布局也会进行调整。 网页浏览者可以选择他们认为适合自己需要的窗口大小。
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 {margin-left: 1.5em}
you are saying that the left margin 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.
边距、文本缩进和其他布局方面
也可以根据它们所包含的文本的大小来指定,使用<em>
来指定外边距、文本缩进和其他布局。
如果你指定 {margin-left: 1.5em}
。
你就是在说段落的左边距应该是该段落字体高度的 1.5 倍。
因此,当用户调整字体大小以使页面更清晰时,
外边距会成比例增加,如果他们调整字体大小以使其更小,则边距会再次调整。
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.)
您的网页是否以类似的方式排除了人们? 这将是一种耻辱,因为在不久的将来, 大多数 Web 浏览器将为读者提供简单的方法来调整网页上元素的颜色, 通过用户样式表,这可以覆盖您的样式表。( 您现在可以在 IE5 Macintosh 版本中执行此操作。
How to avoid these problems? Use style sheets, rather than the HTML <em>
element.
And avoid relying on color combinations to alone convey meaning.
如何避免这些问题?使用样式表,而不是 HTML <em>
元素。
并避免依赖颜色组合来单独传达意义。
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.
然而,一棵比人所能拥抱的更宽的树,却是从一根小小的枝条中诞生的; 一座大坝比河流所能溢出的大坝始于一块土; 千里之行,从脚下之地开始。
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.
旅程从放弃控制开始,变得灵动。