Web page Flexible Design detailed

Design | detailed | page

It is not easy to move from a fixed, pixel based design approach to a flexible, relative design approach. But if used properly, it can be a natural selection that enhances affinity and ease of use without sacrificing design.

A pixel is a point on the computer screen that is not scalable, and an EM is a word size box. Because of the font size change, EM represents the relative units of the text size that the user prefers.

It may be easier to adopt a printed, fixed design, because if the size is the same, there is less to consider. However, if you use the flexible design method, you can make full use of the computer's monitor and browser.

Maybe you want your site to be displayed in a certain way, but your users may want to see something different. Any imposition on the user is not conducive to ease of use, thereby causing damage to the success of the site.

In order to understand elastic design, we must first look at a problem that seems unrelated to this-specify the size of the text in several ways.

Flexible text

Obviously the text is the easiest to implement in the flexible design. The ability to set the text size you like is the most common user requirement, so you can't ignore it.

Affinity refers not only to blind people and screen readers. There are many people who are not blind but have visual impairment-you and I will be one of them when we grow old. One of the easiest ways to make a Web site more approachable is to allow users to change the size of the text; Refusing to offer such a choice deprives the user of dominance and is likely to render the user unable to read comfortably.

If the designer specifies the text size in pixels, most users will not be able to scale the text, because Internet Explorer changes the size of the text differently than other browsers. Mozilla and Opera can scale text that has been set to pixel size, but IE cannot.

Problems with EM

Em seems to be the unit when the text relative size is set, and the default text height of the browser is 16 pixels, which is too big for most designers to taste. To use EM, the designer generally sets the initial size of the text to less than 1em.

For example:

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

It seems to work, but there's a problem-if you set "text size" to "small" or "minimal" in IE, the text will be too small to read. Because IE is so popular, EM doesn't seem to be a viable option.

Jeffrey Zeldman has questioned this in the past, saying that despite its disadvantage, it is better to specify text in pixels than EM. This conclusion is based on an in-depth study by Owen Briggs. Owen Briggs tested 264 different text scaling methods and demonstrated that relative units such as EM are not workable. Many designers now specify the text size in pixels, not for the precise control of the appearance of the page, but seem to have no more reasonable alternatives.

In this way, either the ugly big print or the inability to scale, as if it could not be both. Don't worry, keep reading.

Another "big font" fallback style

In the battle against the affinity problem of pixels that cannot be scaled, many authors use a fallback style sheet technique on their web pages that can be toggled through a link on a Web page.

This approach is good, but it works better if it's used in conjunction with relative text size, as Wired News mentions. You can't expect users to be familiar with your unique interface, users are generally more familiar with the interface of the browser, if they want to see a larger font, more inclined to use the browser to achieve rather than using your interface. And they expect it to work on a variety of sites and don't want to change every site. , like Wired News .

CSS keywords

Font-size's Keywords ( xx-small , medium , x-large , and so on) seem to be the answer. In IE, when the user chooses "large" or "Max", the text will become larger, the text will be smaller when you select "small" or "minimal", until the appropriate size. Unlike other flexible design methods, the advantage of using keywords is that when you scale text, it never makes the actual pixel size below a value, so you should have good readability regardless of how the user chooses the text size.

There is a more detailed explanation of the keywords elsewhere in the ALA, and the best example of this approach might be the one you're reading this article. (prior to the latest revision, ALA used a reserved "big font" style switch, with a style sheet specifying the size of the text in pixels and another using a relative size method based on keywords.) ）

Percent makes EM feasible

Em works because it's easy to avoid the problem of too little text by setting the percentage of the initial text. Although the principle is not obvious, but it is feasible. When this scheme is adopted, the interval between the file settings of IE text size will not appear blunt, the designer can set the initial text size accurately, so that the "small" and "minimal" still get better readability. This makes EM useful. (Even Briggs now more agree with Em.)

For example:

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

The advantage of using EM without the keyword is that you can use EM to specify the size of the entire layout, which can be scaled proportionally to the size of the text.

Flexible layout

More difficult for designers than flexible fonts is a complete relative layout-it's easy to set the size of the layout with EM.

It seems superfluous or unnecessary to make the layout flexible so that it automatically adapts as the user changes the text over a large hour. But since you make the text scalable, it's also logical that the layout of the enclosing text will be scaled.

In addition, if the user chooses a larger font, the surrounding space should increase proportionally, keeping the proportion of the "designer" selected so that the article is easy to read.

Another benefit of this scenario is that you can avoid text wrapping that you don't want. If a narrow column width is defined in pixels, the entire layout may be disrupted when the text becomes larger. This problem can be avoided by specifying the width of the columns using the text size ratio.

For an example of this scenario, see the works on the CSS Zen Garden elastic Lawn.

It's too wide!

After you specify the initial text size of a Web page as 100%, in IE's "medium" font, the 36em width should be 576 pixels (as a reference, the width of ALA is 600 pixels), in the "Maximum" font, 36EM should be increased to 768 pixels (Windows IE 6 Test results). If it were a little bigger, it would be too wide for a 800-pixel screen, the "Max" font.

The solution to this problem for CSS is the Max-width property, which specifies the maximum width of an element. Unfortunately, Internet Explorer is not supported (does anyone have any idea?) ）。

Another solution is to use a mobile layout, which means that the width of the content area is not specified at all, leaving the text flowing naturally and full of screen width (which is used inHTML Dog ). Many people do not accept this option because it is not readable on a wide screen, but it is ideal for small screens such as mobile devices.

If you are going to use a flexible layout scheme, the pixel-specific objects, such as boundaries or bitmaps, will still be in pixels, which may conflict with text-size relationships, but this should not be a reason for not using flexible layouts.

Make the graphic flexible

Setting the size of a bitmap with relative size can have disastrous results. This can be done by keeping the original resolution of the graph unchanged and cropping it to the right size.

You can do this by changing the background picture. Here is an example of a headline element, and you can also use other picture substitution techniques:

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 a picture 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 demonstration page .