Elastic website page design

Original:Patrick Griffin HS

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 em is a word-sized square. Due to changes in the font size, em 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 ZeldmanIn the past, he raised doubts about this. He believes that, despite its disadvantages, it is better to specify the text size in pixels than to use em. According to Owen BriggsIn-depth research. 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 useBackup style sheetTechnology, you can switch through a link on the web page.

This method is good, but if it is compared with the relative text size (for exampleWired News. 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