Design Considerations

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, today you have to be prepared to design for computer monitors, smart phones, and tablet computers, too.

 

 

 

On the right is an example of a Web page that is designed for a very old monitor (somewhere back around 1998!) set at 640 pixels by 480 pixels. The screen shot is taken from a monitor set at 800 pixels by 600 pixels (circa 2002).

In those old 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.

With today's modern computer monitors, smart phones and tablets this page would not be acceptable! This page was built using an old technique that relied on tables.

Tables

Tables were used (back in the "old days") 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.

NOTE: Some people say that tables are "old fashioned," and they are right. With Cascading Style Sheets we can use alternative methods for locating elements on a Web page. Be sure to read our "Tables vs. Cascading Style Sheets" section below.

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 an old "narrow" monitor.

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

The problem is that making this telescoping effect work with tables is difficult. It is also unreliable with smart phones and tablets. It is much easier, and reliable, to construct a Web page using modern CSS page elements such as divisions (divs).

 

 

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 division <div> tag.

 

 

 

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.

For more information on Cascading Style Sheets, visit our CSS tutorial.