Elastic design-reprinted

Document directory

• Elastic text
• Em Problems
• Another "big font" backup Style
• CSS keywords
• Percent makes em feasible
• Elastic Layout
• Too wide!
• Make the image flexible

Both non-flow and non-width fixed-elastic design combines the strengths of both. If you do well, you will be able to enhance your affinity, make full use of the computer screens and browsers that are easy to ignore, and inspire your creativity.

Original: Patrick griiths

Original article from: A List Apart
Onestab [2004.01.25]

It is not easy to switch from a fixed, pixel-based design method to an elastic, relative design method. However, if it is used properly, it can be a natural choice to enhance the affinity and ease of use without making design sacrifices.

Pixels are non-zooming points on the computer screen, and an h3 is a word-sized square. As the font size changes, h3 represents the relative unit of the user's favorite text size.

It may be easier to adopt a printed fixed design scheme, because if the size remains the same, less things will be considered. However, if an elastic design method is used, the computer's display and browser can be fully utilized.

Maybe you want your website to be displayed in a specific way, but your users may want to see different things. Anything imposed on users is not conducive to ease of use, and thus damage the success of the website.

To understand elastic design, we must first look at a seemingly unrelated problem-several ways to specify the text size.

Elastic text

Obviously, text is the easiest way to achieve elastic design. Setting the preferred text size is the most common requirement for users.

Affinity is not just about blind people and screen readers. There are also many people who are not blind, but have visual impairment-you and I will become one of them as I grow older. One of the simplest ways to make a website more friendly is to allow users to change the text size. rejecting such a choice will deprive users of their dominance, which may make Users unable to read it comfortably.

If the designer uses pixels to specify the text size, most users cannot scale the text, because Internet Explorer changes the text size in a different way than other browsers. Mozilla and Opera can scale the text that has been set to pixel size, but Windows IE cannot.

Em Problems

Em seems to be the unit for setting the relative text size. The default text height of the browser is 16 pixels, which is too big for most designers and does not suit their taste. To use em, the designer generally sets the initial size of the text to smaller than 1em.

For example:

body { font-size: 0.8em; } h1 { font-size: 2em; } p { font-size: 1em; }

It seems feasible, but there is a problem-if you set "text size" to "small" or "minimum" in IE, the text will be too small to read. Since IE is so popular, em does not seem to be a feasible choice.

Jeffrey Zeldman once questioned this in the past, and he believes that, despite its disadvantages, it is better to specify the text size in pixels than to use em. This conclusion is based on the in-depth research by Owen Briggs. Owen Briggs tested 264 different text scaling methods and demonstrated that relative units such as em do not work. Many designers now use pixels to specify the text size, not to precisely control the appearance of the webpage, but to seem to have no more reasonable choice.

In this case, either the big font is ugly or the scaling is not possible. Don't worry. Continue to read it.

Another "big font" backup Style

In the battle against affinity problems caused by unscalable pixels, many authors use a backup style sheet Technology on their web pages, you can switch through a link on the webpage.

This method is good, but it works better if it is used together with the relative text size measures (such as Wired News mentioned. You cannot expect users to be familiar with your specific interface. Users are generally more familiar with the browser interface. If they want to see a larger font, they prefer to use a browser instead of your interface. In addition, they expect this method to work on all websites and do not want to change every time a website is accessed ., For example, Wired News

CSS keywords

The keyword of Font-size (xx-small medium x-large, etc.) seems to be the answer. In IE, When you select "larger" or "largest", the text will become larger. When you select "smaller" or "smallest", the text will become smaller until the appropriate size. Unlike other elastic design methods, the advantage of using keywords is that when the text is scaled, the actual pixel size of the text will never be lower than a certain value, so no matter how the user chooses the text size, both should have good readability.

There are more detailed explanations of keywords elsewhere in ALA. The best example of this method may be the article you are reading. (Prior to the last revision, ALA used the backup "big font" style switch. A style table uses pixels to specify the text size, another method is the relative size method based on keywords .)

Percent makes em feasible

The reason why em is feasible is that by setting the percentage of the initial text, it is easy to avoid the problem of too small text. Although its principle is not obvious, it is indeed feasible. When this scheme is used, the gap between the settings of IE text files does not appear stiff. Designers can precisely set the initial text size, this makes it readable when it is "small" and "minimal. This makes h3 useful. (Even Briggs now agrees with em .)

For example:

body { font-size: 80%; } h1 { font-size: 2em; } p { font-size: 1em; }

The advantage of using em without keywords is that you can use em to specify the size of all la S, which can be scaled proportionally with the size of the text.

Elastic Layout

For designers, what is more difficult than an elastic font is a thorough relative Layout-it is easy to use em to set the layout size.

LetLayoutElastic to make it change with the userTextAutomatic Adaptation in large hours, which seems redundant or even unnecessary. However, since you allow text to be scaled, it is also a matter of course to scale the layout of inclusive text.

In addition, if you select a large font, the surrounding space should increase proportionally, maintaining the proportion selected by the "designer", making the article easy to read.

Another benefit of this solution is to avoid text line breaks that are not expected. If a narrow column width is defined in pixels, the entire layout may be disrupted when the text increases. This problem can be avoided by specifying the column width by text size ratio.

For an example of this solution, see the Elastic Lawn on CSS Zen Garden.

Too wide!

After the initial text size of the web page is set to 100%, the width of 36em in IE's "medium" font should be 576 pixels (for reference, the ALA width is 600 pixels). In the "Max" font, 36em should be increased to 768 pixels (test result of IE 6 in Windows ). If the size is larger, the screen is 800 pixels wide and the font "Max" may appear too wide.

CSS's solution to this problem is the max-width attribute, which can specify the maximum width of an element. Unfortunately, Internet Explorer does not support this function (I don't know if anyone has ever thought about it ?).

Another solution is to adopt a streaming layout, that is to say, the width of the content area is not specified at all, so that the text flows naturally and fills the screen width (HTML Dog adopts this solution ). Many people do not accept this scheme because the wide screen is not readable, but it is very suitable for small screens such as mobile devices.

If you are going to adopt an elastic layout scheme, you still need to use pixels as the unit when specifying the border or bitmap and other objects consisting of pixels, which may conflict with the relationship based on the text size; however, this should not be the reason for not adopting the flexible layout.

Make the image flexible

Setting the size of a bitmap with the relative size will lead to disastrous consequences. You can solve this problem by keeping the original resolution of the image unchanged and cropping it to a proper size.

You can change the background image. Here is an example of a title element. You can also use other image replacement technologies:

h1 { font-size: 1em; width: 10em; height: 100px; text-indent: -1234em; background-image: url(whatever.jpg); }

Or (as hebig.org and v-2.org do) You can include images in a container, such as a DIV with the following style:

div { width: 10em; overflow: hidden; }

Many of the elastic design methods mentioned in this article can be seen in the dh3onstration page.