A List Apart Classic article: Web design Path (next)

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

This is a List Apart classic technology essay a Dao of Web design, the second part of the first part, on the basis of font, font size, layout, color matching several aspects, describes how to achieve flexible, adaptable web designs. Finally, the author points out that Web as a new media should get out of the influence of print media as soon as possible and realize its mission.

Solution

"The name also has the same, the sky will know." It is not perilous to know. Pedagogical Road in the world, the Jewish Valley and Jianghai. ”

32nd chapter of the Sutra of Morals

How do you implement adaptive design and improve accessibility? We need to take a holistic view of the various aspects and then give the solutions to these considerations. First, think about what your Web page is for, not what it looks like. Let your design follow the service you provide, not the look. Let the form follow the function, not the design.

The cornerstone of this idea is the separation of content and presentation that you may have heard many times, but this may be the most important step you can take. For a simple example, there is a paragraph in italics on a page, why italic? Perhaps to emphasize, or quote, or to use a foreign word in the English language, in the traditional printing, form following function. The advantage of Web publishing is that we can clearly express the ambiguity of the paper, if the object of italics is to emphasize why it is possible to use browsers that are implemented instead of non-PC platforms.

On a large scale, you don't have to use HTML as a showcase, not using the appropriate HTML tags, and using CSS classes if you can't find the right tags. Using CSS for presentation, we need to look ahead rather than be stuck in a rut.

If you use style Sheet rationally and let it guide you instead of controlling the look of your Web page, and you don't rely on style Sheet to express your information, your Web page will work in any browser, past or future. Browsers that do not support Style Sheet will output a simple content section. In fact, our biggest concern is those browsers that support BUG-Style Sheet, which today is a problem that hasn't been so serious lately. Now, you can limit your CSS to only those parts of the browser that are perfectly supported by all browsers, and you can use those display-style HTML tags for those that don't support you. The author has written some articles about this.

In practice, when CSS design can affect the accessibility of a Web page, you should do something about it. Anyway, do not rely on any CSS, absolute units, such as PX and PT should be avoided, the use of color should be cautious, and never rely on them.

Font

In general, Windows, Macs, and other operating systems have only a limited number of fonts installed, and fewer fonts are common between them. Many of the current browsers, there will be more, they can already allow users to choose the display font. With CSS, you can specify as many fonts as possible, and do not rely on them, no matter how common the font is.

More important still is the font size, you need to know that the same font, the same font size, on the MAC system looks smaller than the Windows system. Because the logical resolution of the MAC is 72dpi and Windows is 96dpi. This is important, first of all, it is not possible to make text appear exactly the same on Mac and Windows, but if you follow an adaptive design, this will not be a problem.

If you're still worried about how your Web page will eventually look, you're still not thinking about adaptive design thinking. One of the main accessibility issues is the font size, and those of us who are visually normal may not believe that a large percentage of the world's population is unable to read the fonts below 14pt in the print media, let alone the display, which has a lower resolution.

Does this mean that the 14pt is the smallest font size? Not also, some people's eyesight is also poor, that in the end with which font size? The answer is, do not use PT, let the user choose to read the font size, PX is the same, because of the difference in the logical resolution, a platform PX and another platform PX is not the same big.

For places like headings, you can still use larger fonts. CSS provides a variety of ways to set the font size, you can set the font size by the percentage of the parent object of an object, for example, the title is in the body of the page, if you do not set the body font size, the system will take the user's own specified font size, sometimes, we do not also can help promote accessibility.

You might say that the text looks too big, but you can narrow it in the browser, and your users can choose to zoom in or out, depending on their tastes or needs. We can emphasize the title, for example, the font size of the first-level title increased by 30%, two-level title increased by 25%, so that no matter what the body part of your page selected font size, the title is proportional change, the same, the size can also be narrowed, but need to be careful, sometimes, the size may be too small to

All we've done is just avoiding the use of absolute size fonts has been a lot of help for accessibility.

Layout

Boundaries, page widths, indents are design factors that can enhance accessibility. Browser windows can change size and cause page sizes to change, and different Web devices (Web TV, high-resolution displays, PDAs) have different minimum and maximum window sizes, as well as fixed font sizes, and page layouts can also cause accessibility problems.

As with fonts, layouts can also be designed with percentages, and boundaries can use a percentage of their container size. The use of a percentage width layout in CSS automatically adapts to the design, and as the browser window Lacoine and narrows, the pages are automatically adapted to maintain the same proportions, so that the overall page is automatically adapted and the user can choose a window size that they think fit.

Boundaries, text indents, and other layout factors can also be based on the size of the text they contain, using EM units, such as:

p {Margin–left:1.5em}

This means that the boundary width of the paragraph will be 1.5 times times the height of the text inside it. So when we resize the text, the boundary changes as well.

Color

The web is a much richer media than print, and color is very inexpensive for the web. Color is decorative, can establish visual representation, can bring practical significance (such as attract attention), but color will also bring problems for accessibility.

Do you know that in many countries (and perhaps all), red-green-blind people are not allowed to apply for a flying license? Because warning messages are usually expressed in the form of red dangerous green security. Unfortunately, the warning message is not matched with an adaptive color.

Does your Web page also keep some users out of the way? This is not very good, because in the near future, most browsers will allow users to use custom Style Sheet to adjust the color of the page, and these custom CSS will overwrite the CSS you design. How do you avoid these problems? Do not use HTML tags, use CSS, and do not rely on the same color meaning.

The path of change

"The wood of encircle, born in the Homer, is a tired earth; ”

64th chapter of the Sutra of Morality (Part I)

The change of thought and behavior is not easy, "without losing virtue". But I have come to understand that many of the things I take for granted need to be reconsidered, and what I have read, seen, heard, and talked about must be rethought. The Web as a new media has been to break through the print media, not to give up those wisdom and experience, but to find their own mission.

The web's most powerful force has long been seen as a limitation and a drawback, but the web's nature is elasticity, and as developers and designers, we need to embrace this resilience to achieve an adaptive, accessible Web that begins with the release of our control desires.

Translation PostScript

A list Apart is a magazine that is revered by all Web designers, and John Allsopp's "a Dao's web design" is a web designing essay that is recommended for reading by the magazine and has been translated into a variety of text, but not in Chinese. Since the "Moral Sutra" comes from China, there is no reason why so many Web designers at home can chew and accessible the original English language. Of course, or the old saying, this is a technical essay, not to be handed down the humanities works, translation is only a letter, and 惘 Guya and Tatsu. This is the second part of this article, see the first section.

About the author

John Allsopp is the main developer of CSS Editor Style Master, co-founder of the Web Essentials Conference series. He is a defender of WaSP CSS and an old school-style conservative, in a sense.

This article International Source: Http://www.alistapart.com/articles/dao

Chinese translation Source: Comsharp CMS (35 km translation)

Related articles: A list Apart Classic article in translation: Web Design Road (top)