When creating a website, you can decide whether the size of the browser window affects the size of the page. A fixed-width design remains at a constant width (in pixels) regardless of the browser width. If the browser window is larger than the page width, borders appear. Fixed-width designs are generally centered, so a border appears to the left and to the right of the design. If the browser window is smaller than the page width, only part of the page is visible, and a horizontal scrollbar appears.

A variable-width design (also called liquid design) changes width with the browser width, and at least one section of the design (usually, the main content block) is resized along with the browser window. Creating a design that will look good with any browser width is difficult, especially now that browsers can be very small (for handheld devices) or very large (for huge movie screens).

Figure 8-14. The Image Map dialog

Variable-width designs can fill a variety of screens, unlike fixed-width designs that leave empty space or add a scrollbar. Fixed-width designs allow better readability, unlike variable-width designs whose content may be squeezed into a tiny column or expanded into long lines that are hard to read. On the other hand, fixed-width designs also give you more control over the layout, image placement, and column length.

To prototype a fixed-width design with GIMP, create a new image with the chosen width. Its height can be the minimum browser height, or it can be larger if users will need to scroll down to see the footer. If you’re prototyping a variable-width web page, you can choose any width and height. If some of the elements on the page will change size, while others remain fixed, you may want to create several prototypes of various widths to see how the elements look together as the page is resized.