Contents Page Design Introduction Graphic design 100 Balanced pages Design grids for pages Graphic safe areas Page headers Typography I Typography II Typefaces Consistency Basic Tables Page length Cross platform issues Editorial style Frames 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. Netscape Navigator - Macintosh safe area example Internet Explorer - Macintosh safe area example Netscape Navigator - Windows95 safe area example Internet Explorer - Windows95 safe area example 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 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.