The Art and Zen of Web Sites ( http://www.tlc-systems.com/webtips.shtml )

The width of the browser's window

Yet this is one of the biggest problems facing web page designers. The height of the browser's window has very little effect on how your page is displayed -- you just see more or less of it, sort of like a window shade. But as the width of the browser window
changes, it can have a spectacular effect on how your page is displayed.

This is because the browser will try to rearrange the web page to make maximum use of the available browser width.

Two factors determine the width of the browser's window -- the width of the visitor's screen, which determines the maximum width for the browser, and the proportion of the screen that the browser has been set to.

The practical width of computer screens varies from about 640 to 1280 pixels. This is determined by hardware, software, and the display settings the user has chosen. Your web page should work properly with the browser window set >anywhere< within this range.

There are a number of different elements on your page, but they fall into two groups: those items that can be adjusted in width, and those that can't.

Items that can be adjusted in width are text (which can wrap) and tables and cells (if declared as a percentage of the window's width).

Items whose width is fixed are images, text given a "NOWRAP" attribute, text within PRE tags, and tables or cells declared as fixed (pixel) width.

Say you design your page for the middle of the browser range -- about 800 pixels wide. What happens when your page is viewed at other browser widths?

Let's start with a narrower window. If the page is designed with the right mix of fixed and variable elements, the page should still work. You might want to use a table with multiple columns where the leftmost is fixed width and the others variable width. If fixed-width elements are used, the page may end up wider than the browser and a horizontal scrollbar will appear at the bottom of the window. Now the visitor will have to scroll left and right to see your page.

If the window is wider than you designed for, a number of things can happen. If you've used an image as a background for your page, and it just fits your medium-sized window, it will repeat as the browser adds another copy to the right in order to fill out the increased
width. Tables declared as variable width may be rendered strangely, with elements showing up in unexpected places.

In addition, the way a particular browser juggles your page to fit its width will vary greatly with different browsers. And also with different versions of the same browser.

Obviously, a certain amount of testing and experimentation will be necessary to make sure that your pages display properly at all browser width settings.

A Tip
Keep your home/main page small so that it loads quickly -- under 15 seconds is a goal worth aiming for. (Especially important when the web slows down.) This will hook the visitor. Think twice about putting that 90K GIF on your home page. Remember that yours
is only one of millions of sites -- websurfers have short attention spans.