Liquid Design, or Stretchable Web Pages
What is "Liquid Design"?
"Liquid design" and "stretchable pages" refer to the same thing: the ability of a Web page to scale to any sized monitor at any sized resolution. I don't know who coined the two phrases, but they have been passed around for a while.
Pros and Cons of Liquid Design
From a programming standpoint, one only needs to design once - as opposed to creating different designs for different user agents - and everything will be rendered correctly by all user agents. At this time, this not achievable, because not all user agents render pages according to all of the standards. Still, a page will be rendered more or less correctly by most user agents at this time.
If a page is designed to scale to different text sizes, different monitor sizes, and different monitor resolutions, from an accessibility standpoint, this makes the page more adaptable to the user, and hence more accessible.
The cons of "liquid design" include living with a flexible design. Some designers might not be comfortable with that. Also, to successfully use "liquid design", one needs to use tables, because they consistently place elements in the same order and in the same position with respect to one another. The use of layers that are unsized or have their widths defined as a percent and are floated does not give the same predictable results.
Also, it is not possible to scale bitmapped images, without dithering them and rendering them less readable. When a user wants to view the page with a larger text size, the image will be smaller with respect to its designed proportions, and when a user wants to view the page with a smaller text size, the scaling is limited by the size of the image. True stretching is not possible if bitmapped images are included.
At this time, most browsers are clueless about what to do with scalable vector graphics. True graphic stretchability will come when the browsers further evolve!
Methods of Stretching
Fonts
The methods here all call for using style sheets, as opposed to the deprecated
<font> tag attributes. To scale your fonts:
1. Use ems.
Code:
.differentlysizedfont {
font-size: 2em;
}
2. Use percents. Occasionally, you may have problems with inheritance. Be careful how you define and use your classes. To use percents again on something already sized would result in multiplying the two percents together.
Code:
.differentlysizedfont {
font-size: 120%;
}
3. Use size increase/decrease attributes on font-size: smaller, larger, x-small, etc. Again, be careful of inheritance.
Code:
.differentlysizedfont {
font-size: larger;
}
4. Avoid using graphical images instead of text, until scalable vector graphics become widely supported.
Block-level Elements
Block-level elements such as tables can be scaled using percent sizes. To expand the table to any sized screen, set the width to 100%, and set the column widths to proportionate sizes using percents. If the browser is working properly, all elements should scale to the proportionate width of their parent element. That is, a column given a width of 20% should scale to 20% of the parent table's width.
Internet Explorer 5.0 does not stretch tables to 100% all the time. If you have items in the table cells which fill up a table to less than 100%, IE will not stretch it all the way. It stretches cells when the contents fill the cell horizontally. For example, if a cell has text, then if the text fills the cell and wraps, it will stretch.
Graphics
The only graphics that will scale are vector graphics. Right now, user agents do not know what to do with vector graphics, and most support only GIFs and JPEGs. Browsers are programmed to open graphics in other graphical formats by using the plug-ins to their editors, rather than rendering the graphic.
The W3C is working on a standard for scalable vector graphics (SVGs). (Visit the W3C's Scalable Vector Graphics (SVG) main page)
Remember, bit-mapped graphics do not scale. Photos will not scale. To simulate scalability, one would need to create files of the photos at different sizes and program the browser to choose one depending on monitor size and resolution.