Page Size and Layout

Of the biggest challenges for Web builders is the variability of the screen sizes with which they must work. Deciding on how wide a Web page should be is based on several factors. Most computer monitors are set for a width of 1024 pixels or wider when they are delivered from the factory. However, many older monitors, especially those with that are smaller than 19", are set at a width of 800 pixels. Some very old monitors may be set to only 640 pixels wide, but these are very rare now days. Large monitors often have screen widths of 1440 pixels or larger. One of the biggest decisions for anybody creating a Web page involved choosing which is the most appropriate size for the design.

On the right is an example of a Web page that is designed for a very old monitor set at 640 pixels by 480 pixels. The screen shot is taken from a monitor set at 800 pixels by 600 pixels.

In those days the designer expected that most visitors would use monitors set at 640 x 480 pixels. You notice that there is a great deal of white space on the right side of the screen. If this page was to be viewed on a monitor set at 1024 pixels or wider, the resulting tremendous about of blank area on the right would make this design a very poor choice.

But because rollovers are hard for some browsers o view, and some visitors to use, text links are positioned elsewhere on the page, often at the bottom.

The screen shot on the right is of a site designed for monitors set at 800 pixels by 600 pixels. Most visitors to this site will have monitors at this setting or wider.

The page is being viewed on a monitor set at 800 x 600 pixels. When viewed on a monitor set at 1024 pixels or wider the blank space on the right side may still be acceptable. It is necessary to test a Web page design on monitors with different settings to be sure the dimensions are appropriate.

Tables

Tables are used to control the width of material presented on a Web page. Table width can be specified in either percent or pixels. Specifying table width in percent will cause the table size to change depending on what the viewer's screen size is. This means that on some screens the page layout will be very narrow, on others it will be extremely wide. This telescoping effect can be very helpful when a design must fill a screen so that there are no blank areas.

On the right are two screen shots of the same Web page. But the monitors each have a different setting. The top image is from a monitor set at 640 pixels by 480 pixels. The bottom image is from a monitor set at 800 pixels by 600 pixels.

Note that the headline "Welcome to the Achievements Web site!" is on two lines in the top screen shot and on one line in the bottom.

The set of images that make up the header consist of the logo and the "Welcome" GIF on the top right. But notice that the header is not the same dimension in the two images. It contracts for the small screen width and expands for the larger.

This is accomplished by using tables have sizes specified in percentages rather than actual pixels. It takes some clever planning to make the effect work correctly. But it can be used to a designer's advantage to assure that a page looks exactly right.

Tables vs. Cascading Style Sheets

Cascading Style Sheets are the officially preferred way to controlling presentation on a Web site. The development of CSS is based on the desire to have HTML/XHTML fulfill its original function, to define objects. CSS are intended to be used to control presentation, how things look.

Cascading Style Sheets can be used to control placement by specifying the attributes of certain objects. The attributes include size and position, and the objects can be certain tags, such as the div tag.

CSS are much harder for the novice Web page builder to use than tables because at first they seen to be much more limiting. However, through clever application of Cascading Style Sheet features it is possible to replace tables with CSS defined objects in most instances.

A big "plus" in favor of Cascading Style Sheets is that they usually save editing time once a site is built. Because a Style Sheet can be linked to any number of pages, it is possible to update styled objected throughout a site simply by editing a class.

The illustration on the right shows how a single CSS can be linked to multiple pages on a Web site.

Browsers and Multitasking

On either side of a browser display there is a certain amount of "dead space." This dead space is used for the browser scroll bars and other elements. This is the main reason that a Web page cannot be designed to fit the full width of a monitor. Pages are therefore built at widths smaller than the screen for which they are designed. Web pages for 640 pixel wide screens are built 590 pixels wide. Pages for 800 pixel screens are built 760 pixels wide.

Touch this button to see the dead space on the screen shot to the right.

Many Web users with newer browsers have extra windows or panels open. This multitasking makes designing a page even more complicated.

The image on the right is an example. The left panel of the browser displays information or provides access to functions that the user may find helpful.

This page is cleverly designed using advanced techniques that allow it to automatically resize depending on the available screen space in the browser.

This can be done with telescoping tables, or with Cascading Style Sheets.

Touch this button to see the dead space on the screen shot to the right