Most 'completely-designed' websites use a fixed-width layout to make graphics stick together, and to ensure that formatting always works. This is a convenient way to design pages, because testing only needs to be limited to the fixed width. So, what happens when you increase the size of the text, or use the browser's features to zoom in on the whole page? Often, the result is not pretty, and as a reader, you're left feeling that you made a mistake attempting to resize the page for readability.

The design task is made more difficult by the current trends in display shapes and sizes. Laptops and entertainment displays are becoming increasingly 'wide' (laptop users want to be able to see their colleagues at the meeting table and still have more screen real-estate, and entertainment PCs are aimed at showing films). This conflicts with the ideal reading format.

CSS does not yet have sufficiently powerful tools for a fully liquid text layout: at best, a column-based layout has inconsistent liquid properties. Recently, developers have been using CSS to add background images to pages and tables, and using floating aligned elements to introduce box-layout parts to a page. While this seems to achieve a neat-looking layout, it fails when the user resizes the page, or tries to output the content to a device having a non-standard width.

At present, the most visually-pleasing liquid layout structure is achieved using tables, and even then, the flow control is limited. How would you achieve a liquid multi-column newspaper-style layout, for instance?

When designing web pages, there are lots of 'mistakes' to avoid, which are well-documented elsewhere (we're not trying to make a complete guide here - whole books have been written on the subject!)

Here are some pointers:

• Avoid fixed text sizes where possible. Use a relative measure that responds to the user's viewing preferences.
• Measure formatting spaces in appropriate units. For example, if you want some margin on the inside of your text box, measure in ems (1em should correspond to the width of an m character). If you're using some assembled graphical elements, then perhaps measuring those using px (pixels) is more appropriate. This maintains sensible spacing. Some small icons can be excused, but the formatting of the page should be able to adapt faultlessly to changes of window size, and of magnification. In other words, the layout should be fully liquid.
• Avoid floating formatting that overwrites other information on the page. For example, some layouts suffer from text or pictures unexpectedly flowing into other areas when re-sized.
• Avoid fixed-width CSS-column layouts. This includes the layouts that have fixed-width side-bars.

Perhaps we can learn from the print publishing industry. Over the years, they have had the freedom to develop easily-readable formats, albeit with a different set of restrictions. Standards for publication have developed around the need to present their content legibly and in a way that should please the reader. For example, novels can be held in one hand, and the column is narrow enough for the eye to scan the line with little effort, and easily find the next line. Newspaper layouts also use columns; you should never see a single-column article spanning the whole width of your news sheet!

So why is the Web evolving in a different direction?

If you are a developer of standards, a software author, or a writer, can you make a difference?

Web pages and other readers should be able to offer the optimum reading layout. The fixed-flow single column is less suitable to today's display technologies, and it less legible than, say, text flowing across multiple columns. At present, the most visually-pleasing liquid layout structure is achieved using tables, and even then, the flow control is limited. How would you achieve a liquid multi-column newspaper-style layout, for instance? It could be argued that the current presentation environment is not ideally suited to presenting text and mixed media!

Perhaps we should be looking at filling the available viewing area in a more intelligent way. Most devices (and formats of paper) can be described as a rectangular region, available for text. In fact, in publishing (and even your humble word processor), the idea of 'starting a new page' and columns gives us all that we need. The current problem is not of cleverness and programming, but in the presentation framework, which does not know about column widths and screen area.

One technical solution would be mark-up that denotes a text region. It's compatible with the box model, and the broswer does most of the legwork in deciding how the text flows, according to user preferences like max column width, column padding, hyphenation, justification - in fact, a look at desktop publishing software would give you the properties you'd need.

Could it be done with a new tag, like this:

In writing this article, I'm aware that my own site will be subject to close inspection, and to be fair, its style is ripe for criticism. Feel free to have a look around. Where content allows, I've always tried to be faithful to the ideas presented in this page, but be aware that due to some limitations, I will not always have succeeded! Enjoy!