A list apart classic article: The Path to web design (bottom)

Document directory

• Font
• Layout
• Color

This is the second part of a list apart classical technology essay a Dao of web design. Based on the first part, it describes how to achieve elasticity in terms of font, font size, layout, and color, adaptive Web design. Finally, the author points out that web, as a new media, should be quickly influenced by printed media to realize its mission.

Solution

"The name is also available, and the day is approaching. Never stops. The greatest truths are in the world, zhuchuan Valley and the river ."
Ethics Chapter 1

How can we achieve adaptive design and improve accessibility? We need to make a comprehensive consideration from multiple aspects, and then provide solutions to these considerations. First, think about how your webpage is used, rather than what it looks like. Let your design follow the services you provide, not the appearance. Let the form follow the function, rather than design.

The cornerstone of this idea is the separation of content and presentation. You have heard of it many times, but this may be the most important step you can take. For example, a webpage contains a italic text
In italics? It may be to emphasize, quote, or use a foreign word in English. In traditional printing, the form follows the function. Web
The advantage of publishing is that we can clearly express vague things on paper. If the purpose of italic is to emphasize, why is it possible to use <I> implementations rather than browsers on non-PC platforms? <em>?

For a wide range, you do not need to use HTML for display, or use <font>, <B>, or <I> to use the appropriate HTML tags. If you cannot find the appropriate tags, use the CSS class. When CSS is used for display, we need to look forward rather than stick to the Conventions.

If you use style sheet reasonably and let it guide, instead of controlling the appearance of your webpage, at the same time, you are not dependent on style sheet
By expressing information, Your webpage can work in any browser, whether in the past or in the future. Those that do not support style sheet
The browser will output a simple part of the content. In fact, we are most worried about bugs in style sheet support.
Today, this is a problem, not long ago. Now, you can restrict your CSS
Use only the content that is perfectly supported by various browsers. For those that are not well supported, you can use the HTML tags of the presentation type. I have written some articles for this.

In practice, when CSS design may affect web page accessibility, you should do nothing. In any case, do not rely on any CSS, absolute units, such as Px AND Pt should be avoided, use color with caution, and never rely on them.

Font

Generally, only limited fonts are installed on Windows, Mac, and other operating systems, with fewer common fonts. Currently, many browsers will have more in the future. They allow users to select their own font. With CSS, you can specify as many fonts as possible. Similarly, do not rely on them, no matter how common these fonts are.

The more important thing is the font size. You need to know that the same font size and the same font size are smaller on MAC systems than on Windows systems. Because Mac
The logical resolution of is 72 dpi while that of Windows is 96 DPI. This is very important. First, let the text on Mac and windows
It is impossible to show exactly the same on the server. However, if you follow an adaptive design, this will not be a problem.

If you still worry about whether your webpage looks exactly the same, it means you still haven't considered the problem with adaptive design ideas. One of the major accessibility problems is the font size. Our normal people may not believe that a large proportion of people in the world cannot read fonts below 14pt on printed media, not to mention the display, the display resolution is lower.

Does this mean that 14pt is the smallest font size? No, some people still have poor eyesight. Which font size should they use? The answer is: Do not use PT, so that users can choose to read the font size. The same is true for PX. Because of the difference in logical resolution, the PX on one platform is different from that on another platform.

You can still use larger fonts for titles and other locations. CSS
You can set the font size according to the percentage of the parent object of an object. For example, if the title is in the body of a webpage
.

You may say that the text looks too big, but you can narrow it down in the browser, and your users can choose to zoom in or out based on their taste or needs. We can emphasize the title.
For example, increase the font size of a level-1 title by 30% and that of a level-2 title by 25%.
The font size of the selected part is proportional to the title. Similarly, the font size can be reduced, but be careful. Sometimes, the font size may be too small to be readable.

All we have done above is to avoid the use of absolute size fonts, which is already a lot of help for accessibility.

Layout

Boundary, page width, and indentation are some design factors that can improve accessibility. The browser window size can be changed and the page size changes. Different web devices (Web TV, high-resolution display, PDA) have different minimum and maximum window sizes, like the fixed font size, the page layout will also lead to accessibility issues.

Like fonts, la s can also be designed to adapt to percentages, and a certain percentage of its container size can be used for boundaries. In css
The percentage width layout will automatically implement adaptive design. With the browser window widening and narrowing, each part of the page will automatically adapt to maintain the same proportion, so that the overall page will automatically adapt, users can
Select a window size that they think is appropriate.

The boundary, text indent, and other layout factors can also be based on the size of the text they contain, and the Em unit can be used, for example:

P {margin-left: 1.5em}

This means that the boundary width of a paragraph is 1.5 times the height of the text in it. Therefore, when we adjust the size of the text, the boundary also changes.

Color

Web is a much more colorful media than printing, and color is very cheap for web. Color is decorative and can establish visual representation, which can bring practical significance (for example, attract attention). However, color can also cause problems for accessibility.

Do you know that in many countries (or even all), red-green blind people cannot apply for a flight license? Because warning information is usually displayed in red, dangerous, green, and safe forms. Unfortunately, the warning information does not use adaptive colors.

Are some users blocked on your webpage? This is not very good, because in the near future, most browsers will allow users to use custom style sheet.
Adjust the color of the page. These custom CSS will overwrite the CSS you designed. How can we avoid these problems? Do not use HTML tags.
CSS, and do not rely on the same color meaning.

Change path

"The wood of the hug is born in the last mile. The nine trees start from the ground. The journey of a thousand miles begins with a full foot ."
Ethics chapter 1 (Part 1)

It is not easy to change thoughts and behaviors, but "downde without losing morality ". However, I gradually realized that many things I took for granted must be taken into consideration again. In the past, what I read, saw, heard, and talked about should all be reflected. As a new media, Web has already broken through the printing media, rather than giving up those wisdom and experience, but finding its own mission.

The most powerful force of the Web has always been regarded as limitations and shortcomings. However, the nature of the web is elasticity. as developers and designers, we need to embrace this elasticity to realize self-adaptation, easy-to-access web, these efforts start with releasing our control desires.

Postscript

A list apart
John Allsopp's "A Dao of Web Design" is a magazine honored by all web designers as the holy book.
Web design essays have been translated into multiple types of texts, but no Chinese version has been found. Since the sutra comes from China, there is no reason for the numerous web sites in China
It is not easy for designers to understand the original English text. Of course, it is still old saying that this is a technical essay, and it is not a cultural work that can be handed over to the world. Therefore, translation only requires faith, while Gu ya and da are both involved. This is the second part of this article. Please
See section 1.

About the author

John Allsopp is the principal developer of CSS editor style master and co-founder of Web essentials conference series. He is the defender of wasp CSS and the veteran of the old school style, in a sense.

International Source: http://www.alistapart.com/articles/dao
Source: comsharp CMS (35 km translation)

Web design language versions

Chinese

• Part 1
• Part 2

English

• Http://www.alistapart.com/articles/dao

Russian

• Http://www.webmascon.com/topics/designdetails/3a.asp

French

• Http://pompage.net/pompe/tao/