Flexible design of web sites

This page discusses what flexible design (otherwise known as liquid design, fluid design or any-size design) is, why it is a good idea, and why it is much easier than many web-designers seem to think.

The Web is not Paper

The World Wide Web is not paper. That might seem to be an open door – a statement of the blindingly obvious. Look around the Web however, and you will discover that it is not at all obvious to many web designers. Site after site is made up to a fixed lay-out, as if the designers had been designing for a magazine page.

This has serious problems. When one designs for a magazine page, one knows what size of page is involved, and one knows what size of type is likely to be legible to most readers. On the web however, one does not know either. The readers’ windows may vary in size by a factor of ten, or they may not be using graphical windows at all. The minimum pixel font-size for legible print may differ by a factor of two or three, even ignoring the existence of visual handicaps among the readers.

To see some examples of the undesirable effects on even a typical computer, see my page of example inflexibilities. Imagine how much worse they get for someone with an unusually large or small screen.

The whole idea of the Web as originally conceived was device independence. Information could be passed from one computer to a user on another, without regard to the computers, the operating systems or the size of the monitors (if any). The reader’s browser would take care of appropriate formatting.

Unfortunately the Web lost its way badly in the mid-nineties when hordes of companies and newbie designers charged onto it, interested only in a fast buck, and not at all interested in the usability of the Web. In particular, many sites were designed by graphics designers who applied their paper-based mindset without first acquainting themselves with the nature of the web. The result is just as unfortunate as if you let a newspaper photographer produce a television programme without him first learning anything about television.

The Screen-Size Myth

A typical reaction if you point out the problems of a fixed layout to a web-designer is “but everyone has a screen size of at least X by Y”. Point out that this is blatantly untrue, and the typical fall-back reaction is: “well, almost everyone has a screen that size, and anyone who doesn’t has a really old computer, probably no money, and isn’t an interesting customer for us”.

This attitude is quite misguided for several reasons.

Firstly, what counts is not screen size, but window size. A browser typically has a menu bar, navigation bars, scroll bars, a bookmark list and other bits and pieces. The size of these varies from browser to browser – and also from reader to reader, depending on the configuration.
The next point is so blindingly obvious that it should go without saying – yet the web-design world largely ignores it. A reader may not want a particular document to fill the screen. He or she may want to place two or more documents side-by-side in order to compare them. This is, after all, half the point of having a windowing interface in the first place! Assuming that your web page has the sole right to occupy the reader’s screen is at best thoughtless, at worst insufferably arrogant.
Next there is the little matter of the new small-screen devices: Personal Digital Assistents and web-enabled telephones. While these have not taken off quite as rapidly as some people predicted, it is clear that the market for them is growing. And what sort of person buys a PDA? Precisely: the “early adopter” with money to spare. Exactly the sort of customer most commercial web-site owners are most interested in. Anyone who gratuitously makes their site inaccessible for PDAs is shooting themselves in their commercial foot.
Even if the reader's screen is big enough, a fixed layout may not look good. What if the reader has a very large screen, and the fixed layout is stuck in the middle, with a lot of wasted space either side?
And finally one has to wonder whether the quoted screen-size statistics are correct in the first place. They are typically gathered by means of a piece of Javascript. A significant proportion of readers have Javascript turned off for one reason or another. It would not surprise me (though I can’t prove it) if there was a tendency for smaller screens to correlate with lack of Javascript. Furthermore, at least one of the commercial statistics-gathering services causes some older browsers to crash. I am pretty sure that machines with older browsers often have smaller screens. One way and another, it seems entirely possible that the statistics exaggerate the available screen hardware.

Accessibility

One of the strengths of the Web compared to paper is the ease with which it can be read by people with certain handicaps, particularly poor eye-sight. At least it would be, if only authors would build their sites properly. In principle a reader can adjust the browser font size to whatever he or she finds easily readable. Unfortunately many authors persist in using absolute units for text size, to prevent this.

Still not convinced?

Still not convinced? OK, consider this. Suppose you are a graphical designer, and get a commission to do a poster. You have to specify the fonts used, their sizes, the exact layout – all to the last millimetre (or point). But: only when you have submitted the final version of the design, and can no longer change anything, will you be told what paper size the poster will have.

It sounds utterly ridiculous, doesn't it? But that's exactly the situation that the producers of fixed layouts are placing themselves in.

The essence of Flexible Design

The essence of flexible design is the following two goals:

the text of the site should be readable in any size of window, in any browser – or on a device which doesn’t have graphical windows at all;
the complete site, including images, should look good over a wide range of window sizes, and acceptable over an even wider range.

Producing a flexible layout is not difficult unless you make it so. Lets start with a concrete example. I had a look at one fixed-layout commercial site that the maintainer was having difficulties with. It had apparently been designed by someone with a 1024x768 screen who always maximised their browser window, and the company logo was getting clipped on smaller windows. By simply changing one number to an asterisk and deleting two lines of HTML, I was able to produce a reasonably flexible layout, and the owner’s problem was solved.

Once you get used to the concepts, producing a flexible design is probably easier than producing a fixed design. Almost certainly it is cheaper when one considers maintenance over the life-time of a site. Flexible designs require less maintenance, and the maintenance is easier to do. You don’t, for example, need to maintain separate “printer-friendly” versions of the pages, because they are already printer-friendly.

How to do it

In design terms, the one thing you must not do is construct a site from lots of image fragments which must fit together exactly, where a difference of a pixel or two makes them look strange. This is in any case a very time-consuming and frustrating thing to do, because the web is not designed to do this and it is very hard to get the alignment the same in all browsers. If you want to present information in this way, there is a good tool for it – Adobe’s Portable Document Format (PDF). HTML is the wrong tool. Even if you managed to get your pixel-perfect layout looking right in all current browsers, the next new browser version to come out may break your design.

Instead, it is easier to make each foreground image a free-standing entity, and assume that a certain amount of background will show through between adjacent images.

In technical terms, there are the following basic rules; just using these goes a long way towards a flexible layout.

Separate information from presentation. Supply information using HTML, presentation using CSS (and, if desired, decoration using Javascript, Flash etc.)
Specify sizes as little as possible. Let the reader’s browser do the work.
When you do specify sizes, don’t use pixel or point measurements. Use em or % units instead. (Exceptions: pixel sizes for images and point sizes in print stylesheets.)
Don’t modify the base font size. Let the main body text be the size the reader has selected, and define all other text sizes relative to it, using em or %. See my article on over-riding the reader’s font size.
Validate your HTML and CSS. Valid HTML should be displayed acceptably by all browsers. With invalid HTML, there are no guarantees. For further information, see the validation notes of my checklist.

In addition, some guidelines:

try to avoid putting images (other than small icon or thumbnail images) in a table.
look for opportunities to apply the “float” property to images and other blocks.

Images

It is not practical to get a truly “any size” layout which uses images, as browser resizing of images generally gives poor results. Nonetheless with a bit of thought one can produce a flexible layout which looks good over a wide range of window sizes.

[Example image: Mandarin Duck]

Take the image here. It is 550 pixels wide, and I have floated the text around it. (Perhaps I should mention that the floating won’t work in older browsers, but the page should still be readable.) The resulting page looks perfectly good – in my humble opinion, of course – in any window width from just over 550 pixels up to more than 1000. There is no horizontal scrolling needed, and no wasted space. If you try really hard you might manage to find a size at which the text wrap is marginally inelegant, but that’s all.

Since it doesn’t matter too much if one loses a little of the right-hand edge of the photo, it is quite acceptable with a window-size of as little as 450 pixels or even a bit less. Good enough for most practical purposes, I suggest.

In case you were wondering: the photo is of a Mandarin Duck, and I took it at Kew Gardens in London.

Long text lines

An objection that is sometimes made to flexible design is that it results in long text lines if the user has a wide window. This objection is invalid for three reasons.

Firstly, it is always possible to split the canvas up into multiple columns, as I have done here for demonstration purposes. Try making your window very wide or very narrow, and see what happens. (This doesn’t work quite as well in Internet Explorer as in more modern browsers, but still works reasonably.)

Secondly, if the reader chooses to have a very wide window, he (or she) probably has a reason: either he has selected a large font-size – perhaps because of poor eyesight – or perhaps he just likes long lines. The reader can easily reduce the window-width to what he finds comfortable: after all, that is half the point of having a windowing interface.

Thirdly, one has the option of using the CSS max-width property with em units, to limit line length if one feels it is necessary. I do that on several pages on this site. Internet Explorer is over five years behind the times with regard to CSS support, but presumably it will catch up eventually. Or otherwise readers will switch to a better browser.

In summary then: embrace the flexibility of the web; don’t fight it.

Footnote on terminology

There are several pages on the web which use the term “any size design", and recommend web authors not to make any assumptions whatever about the window size of the reader. True any-size design is however at present only possible if one avoids the use of images altogether; something which is not realistic for many sites. If the SVG vector-graphics format becomes popular, it may come closer to reality, but photographs will still remain an issue. I therefore prefer the term “flexible design".