Simon Willison’s Weblog

Full page zoom

9th November 2003

For as long as I’ve understood the issue, I’ve been an advocate of liquid layouts over fixed widths for web page design. Liquid layouts are layouts like the one used by this site, where the page adjusts to fix the size of the user’s browser window. Fixed widths on the other hand are sites such as LJWorld.com where the width of the page is fixed no matter how large or small the browser window gets.

There are good arguments for both sides of the issue. Liquid layouts give control to the user and avoid wasted screen real estate; fixed width layouts give the site author greater control over the look of the site and (more importantly) ensure that text line widths remain sensible.

In recent months, I’ve been seriously reconsidering my preference for liquid layouts. I’m currently using Windows at a resolution of 1280 x 1024 with my browser fully maximised, and reading liquid sites is a pain. The standard cry of liquid layout fans in this case is “you don’t have to surf with your browser window maximised”, and I have repeated this myself many times. The problem is, I surf with my browser window maximised. I don’t know why, but I just feel more comfortable with a maximised browser window (it may be related to the ridiculous number of tabs I normally have open). My solution so far has been a combination of using these bookmarklets and increasing the text size of the page, but fixed width layouts are becoming more and more appealing.

It turns out however that there is a third option. Load up this page, recently posted to Webdesign-L by Rick Cecil. Now increase and decrease your browser’s text size. The whole page scales with the text, thanks to extensive use of the em unit for setting the width of various page elements. I don’t know if this technique even has a name yet but if it hasn’t I suggest “full page zoom”. I will certainly be investigating it as an option for future projects.

One final thought: if only the current pack of browsers supported the min-width and max-width CSS properties, this whole issue could have been solved years ago.

Update: While experimenting with this idea further, I came up with this Javascript experiment. Make of it what you will.