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.
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.