Yale C/AIM Web Style Guide


Page Design


Graphic design 100

Balanced pages

Design grids for pages

Graphic safe areas

Page headers

Typography I

Typography II



Basic Tables

Page length

Cross platform issues

Editorial style


Advanced tables

The "safe area" for Web page graphics is determined by two factors: the minimum screen size in common use today (640 by 480 pixels), and by the width of paper used to print Web pages.

Monitor size
Most monitors used in academia and business are 13 to 15 inches (33 to 38 cm) in size, and these smaller monitors are often set to display a 640 x 480 pixel screen. Web page graphics that exceed the width dimension of these small monitors look amateurish, and will inconvenience many of your readers because they will have to scroll both horizontally and vertically to see your full page layout. It's bad enough to have to scroll in one (vertical) direction; having to scroll in two directions is intolerable.

Printing considerations
Even on small monitors it is possible to display graphics that are too wide to print well on common letter size, legal size, or A4 paper widths. However, in many Web pages printing is a secondary concern. Just be aware that your readers will lose the right 2 centimeters of your layout if they print wide pages. Pages with lots of text should always be designed to print properly, as the majority of readers will print those pages, and if the page is too wide they will lose several words from each line of text along the right margin of the page.
The following table and screen examples give the graphic safe area dimensions for printing layouts, and for page layouts designed to use the maximum width of a 640 by 480 pixel screen. The dimensions are good for current versions (3.x) of both Internet Explorer and Netscape Navigator, and for both MacOS and Windows95 operating systems.

Graphic "safe area" dimensions for layouts designed to print well:

Maximum width = 535 pixels

Maximum height = 295 pixels

Graphic "safe area" dimensions for layouts designed to maximize screen usage:

Maximum width = 595 pixels

Maximum height = 295 pixels

The following graphics are screen dumps from 640 x 480 screens showing the two major Web browsers on both platforms, in their default settings (button bar, location bar, etc.). The dimension data given in each example screen are identical. However, by viewing each example you can see that the "Start" bar and window title banners significantly compromise the safe vertical dimension on small Windows95 screens. Small Mac screens have a slightly narrower horizontal dimension than Windows versions of both browsers.
When designing new Web sites we sometimes do our sketching on screen dumps like the ones above. Just copy the one of the screens above, erase the dimension data in the "live area" of the browser window, and sketch in your Web graphics. That way you can be sure that your graphics will fit within the safe area of the browser window, and you can also see how the browser's interface graphics might effect the overall look of your page graphics. This is more realistic than designing Web graphics on a plain background.

Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.