Methods to make a layout compatible with window resize as well as font resize

Question

Hi Guys,

Is there a good advisory / best practice manual etc. out there which outlines methods to make a page layout fluid in the following two ways:

a) The layout should be robust under window resize

b) The layout should seamlessly handle font resizes committed by the user

Every time I design a page layout I end up using different, ad-hoc methods to make the page robust under both a) and b) above. Some of the methods I have used before are:

• handling body onresize()
• declaring all values in % (this gets stuck when image dimensions have to be defined in px)
• placing a div at -10,000 px and polling it at intervals to check for font resizing (gasp!)

I find these above methods quite bad and would love to find standard, robust methods for this problem. I am sure other people here face (and solve) these problems everyday.

Answer 1

Designing web pages is like cooking for a large group of people. There will always be people who dislike your cooking. What you need to do is to design in a way that will make most of your visitors happy.

Answer 2

All liquid pages will have a mix of viewport-relative sizes and fixed-pixel sizes (for, as you noted, the images, and other elements that have to be sized to match the images). You may also want fixed-em sizes for some elements.

So a common approach would be, say, to absolute-position a fixed-width sidebar on the right, and give the main body text a right-margin equal to that width. There are many methods for achieving these kinds of layouts — see endless posts about ‘liquid CSS columns’.

In the most complicated cases, where CSS alone is incapable of giving you the combination of relative and absolute you want, there's always tables. Not ideal, but generally better than JavaScript-dependent layout.

Answer 3

If you are looking for more specific layout solutions, I would say a common practice these days is to use a pre-built grid layout. There are fixed width and fluid versions, both of which scale up with the user's font size. YUI also has one. No JS, no off-screen stuff.

But I also see reference to the user scaling the text from within their browser. This is not the problem it used to be. It used to be that you had to be fairly careful-- if you put text in % it would scale, but px wouldn't in some browsers. Now, all the browsers scale up the page as a whole, including text and images-- proportional to each other. The text size adjustments are really like you are "zooming in" on the page, as the images grow as well. You can simply measure text and column widths in px (or % or pt or whatever) in the "full size" mode, and browsers adjust nicely.