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 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.
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.
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? 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 is the following two goals:
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.
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.
In addition, some guidelines:
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.
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.
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.
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".