<< Previous Page >> << Next Page >>

Design Considerations

How do you deal with design questions such as page size and layout? Should you use tables, or should you try Cascading Style Sheets? These topics are explored on this page.

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 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 the page on the right would not be acceptable because the construction technique, using table, is not flexible enough.

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

The solution to the problem of varying screen widths is to use a fluid layout. Fluid layouts adapt to the size of a viewing screen. Components of a page often rearrange themselvs.

In many instances a better layout technique is the responsive method. Responsive layouts "detect" the type of device viewing the Web page and adjust to match. Both fluid and responsive layouts require advanced HTML5 and CSS3 methods to be successful.

 

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, that is, to define objects. CSS are intended to be used to control presentation, how objects 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.

 

 

 

 

Monitor illustration showing width and heigth

 

Illustration of Magic Touch Web site

Notice the large white area on the right. This page was built back in the "old days" for a screen with of 640 pixels, but is viewed on a screen set at 800 pixels wide.

Imagine what it would look like on a screen set at 1024 pixels wide!

 

Web tables and a decorative table

 

A Web page viewed on a 600 pixel wide scren

This page is viewed on a "narrow" monitor

A Web page viewed on an 800 pixel wide screen

This is the same page viewed on the same monitor, but with a different resolution setting, it looks wider!

 

 

For More Information on Cascading Style Sheets be sure to check out the Interactive Media Center tutorial

Introduction to Cascading Style Sheets

Additional information about Cascading Style Sheets can be found at:

Word Wide Web Consortium
CSS Zen Garden

 

 

This diagram illustrates how a Cascading Style Sheet can be linked to multiple pages of a Web site


<< Previous Page >> << Next Page >>