Page Layout Examples

Page Size

Of course, if you're on a text only browser then you don't get much choice about the width...

Page Width Guidelines

Yale C/AIM WWW Style Manual recomendation: 595 pixels view only and 535 pixels for printing.
Harvard's 1998 recommendation was 485 for Macs and 600 for Windows, so they will work with a VGA monitor.
New pages on the web are comming out assuming you have a SVGA monitor. e.g. The New York Times requires 768, The Wall Street Jorunal requires 765, Yahoo requires 640, Microsoft 620, IBM 760, Lycos 600.

Recomended Maximum Graphics Sizes

Viewable Area

The browser tool bars and margins take up space so the viewable area for a graphic is less than the screen size. A maximized browser window on a VGA (640x480) monitor eliminates the border and can display maximum of 610x295 pixels (770x415 w/ SVGA) with a scroll bar on the right but not on the bottom. (Tested w/ Netscape Navigator 4 and Internet Explorer 4.)

Printable Area

The size of a graphic that can be printed depends on how the print driver scales the image and default print margins. PCs generally scale at 96 pixels per inch. Macs scale from 72 to 87 (LW 16/1600) pixels per inch. Safari on OSX scales at 90 pixels/in. Default print margins are usually from 1/2 to 3/4 in.

Print
Portrait	Landscape	Printer (2) Compatibility
530x675	710x520	99.9%
570x675	720x520	95%
650x820	855x630	90%
660x895	900x655	85%
765x975	1010x720	Max Size

(1) The size of a graphic that can be printed depends on how the print driver scales the image. PCs generally scale at 96 pixels per inch.
(2) The 90% compatibility is based on the estimate that 90% of printers will scale at 87 pixels per inch or higher. Don't confuse this with the dots per inch rating of the printer. Each pixel in a screen image will generally translate to several dots.

* Scroll bar (16 pixels) on the right but not the bottom.
** Max that will work with either NN or IE configured to hide toolbars and reduce printing margins to the minimum that will allow standard page headers and footers. (See the Page Ruler Page)
Assumes no additional text so there is no vertical scroll bar.
Assumes a printer which scales to 96 pixels/in. or better such as a Laserjet 4.

Note: The above figures are usable area. Page border, margins and scroll bar take up another 40 pixels with Netscape on Windows. By maximixing the window to take up the whole display you elmininate a 5 pixel border on each side so a 610 pixel display area requires all 640 pixels of a VGA monitor.

The print area for 8-1/2x11" letter size paper varies depending on the printer, print driver and margin settings. Some examples are:

NN 4 w/ Win NT on a HP LJ 4000 685x925 NN 4 w/ Win NT on a HP LJ 4000 750x925 (reduced margins *) IE 4 w/ Win NT on a HP LJ 4000 660x895 (default 3/4" margins-T/B,L/R) IE 4 w/ Win NT on a HP LJ 4000 760x945 (reduced margins *) NN 4 w/ Win NT on a Xerox 265ST 780x980 (reduced margins) NN 3 w/ Win NT on a HP DeskJet 850C 670x898 Safari w/ OSX on HP PSC 1315 710x900 IE 5.2 w/ OSX on HP PSC 1315 570x670 NN 4 w/ Mac OS 7.5 w/ a old HP DeskWriter 570x675 pixels IE 3 w/ Mac OS 7.5 w/ a old HP DeskWriter 535x700 pixels NN 4 w/ Mac OS 8.1 w/ an Apple LW 16/1600 650x820 * Margins Left=0.3" Right=0.0" NN 4 & IE 5 Mac OS 9 w/ HP DJ935C 570x690 (740x520 landscape) (Defaults to 0.3" margins L & R. HP DJ defaults to scale to fit automatically. Will print 650x800 with 87% scaling in File >Page Setup) Landscape IE 4 w/ Win NT on a HP LJ 4000 900x655 (default 3/4" margins-T/B,L/R) NN 4 w/ Win NT on a HP LJ 4000 925x685 (default 1/2" margins-T/B,LhR) Graphic Converter w/ OSX w/ PSC 1315 766x590 (margins 1/4 x 1/8 x 1/8 x 18") a/o Dec. '98

See the Full Page Ruler for a vertical and horizontal ruler
and monitor resolution information. See Document Size guidelines at W3C.

Example of line lengths

Examples with Preformatted (<PRE>) text.

   Preformatted text is shown in the fixed font which defaults to 10 point
 Courier (New).   On Windows this font is wider (8 pixels) than  Macs
 and UNIX (6 pixels).
            Size (Pixels)  Char./
            Font  Window   line (w/ scroll bar)
   Windows   8     590      73
   Mac       6     472      78
   Unix      6     490      82

 The following ruler is preformatted:
         1         2         3         4         5         6         7         8
12345678901234567890123456789012345678901234567890123456789012345678901234567890
Tabs:	>	>	>	>	>	>	>	>	>
Now is the time for all good people to come to the aid of their country.  The
quick brown fox jumped over the lazy dog.  
Text files also default to a fixed width font.

Examples with wrapped (normal) text.

Normal text uses a proportional font. Default Times 12.

        Char/
             line
Windows        98
Mac            93
Unix           93

Now is the time for all good people to come to the aid of their country. The quick brown fox jumped over the lazy dog.

Tabs are treated like spaces. Multiple spaces are condensed into 1 space.

Examples Forms

Windows

Form Input Fields are a fixed width font based on the system font Usually specified in the display driver selected in "Windows Setup" in the "Main" Program group. The normal font is 8 pixels/char. like the fixed width font for text in the document. However if you select a large font (popular when setting the display to a high resolution) the character width is 10 pixels/char.

The maximum width should be restricted to 60 characters to fit in the minimum (500 pixel) window with a small font or a 600 pixel window (maximized window on a VGA display common on laptops) with the large font.

Mac and UNIX

Form Input Fields and text areas default the the fixed width font so the size rules for preformatted text (see above) also apply here.