Building

Page Design Issues

Canvas Size/Printability

Cal Poly recommends that you design your Web pages for presentation on monitors with a minimum screen resolution of 800 pixels wide by 600 pixels tall. Scaleable Web sites can be built to allow for larger screen resolutions, but should always allow viewing with a minimum of an 800 x 600 screen resolution. For example, you could design a non-scaleable web page using a canvas size of 1024 pixels wide, however, much of your viewing audience would likely not be able to see the entire width of the page without having to scroll right or left.

The available canvas size (screen surface) for Web pages at this screen resolution is 723 pixels wide and 390 pixels tall. These dimensions account for browser offsets, menu bars, scroll bars, and the status bar in Internet Explorer and Netscape Navigator.

Additional information about page size and viewable areas can be found at:

Note: pages designed for an 800 x 600 screen resolution may encounter problems with printing. Please see below for more information on designing pages for printing.

Designing Pages To Be Printed

Most printers are capable of printing only (approximately) the first 670 pixels from the left margin of a web page in portrait mode depending on the printer being used. So, approximately 50 pixels of your Web page's right hand margin (and text) may be lost when printed.

If you plan on your pages being printed often you can solve this problem with one of the following:

  • Design your pages using relative width table dimensions (use percentages not pixel width) so printer engines can adjust the width of the Web page when printing.
  • Design your pages using a 640 x 480 canvas size
  • Provide a separate printable version of your Web page that uses a minimal amount of graphics.
  • If using constrained table widths wider than 670 pixels, don't place important content more than 670 pixels to the right of the left margin.

Cascading Style Sheets (CSS) to print Web pages

A much easier way of making your Web pages easily printable is by using Cascading Style Sheets (CSS). Instead of marking up your (x)HTML document, just use the following code in the <head></head> section of your site:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

The media="print" specifies that this stylesheet should be used when one is going to print a Web page through a certain browser. And the href="" is the location of the .css file you have created. In this case, the "print.css" file is located directly in the Web directory.

A great resource for learning more in depth about the CSS print command is at the following link:

http://www.alistapart.com/articles/goingtoprint/

Monitor and Canvas Size

17 inch (800 x 600 pixel resolution); 723 x 390 pixels
15 inch (640 x 480 pixel resolution); 574 x 270 pixels