5   Page and Screen Design

Page and Screen Layout

Page Size and Column Width

The standard sheet of paper used in manuals in North America is 8.5 by 11 inches. This is probably the most convenient and economical size for revisable manuals, particularly those that are photocopied in-house and issued in 3-ring binders.

Internal manuals in the past often used 1-inch margins on the left and right sides of the page. This resulted in a line length of 6.5 inches—too long for comfortable reading.

To reduce the line length and make the text easier to read, most manual page designs now use less than the full width of the page for text. Two approaches are common: leave a column of white space on the left side of the page, or use two columns.

White Space Column on Left

Set the left text margin approximately one-third of the way across the page (2.75 inches). With a 1-inch right margin, it narrows the column width to 4.75 inches, still longer than we see in most magazines and newspapers, but much better than the full width of the page. The column of white space on the left is used for headings, illustrations, or sidebar text (such as quotes, key thoughts, or commentary). This is sometimes called a one thirds, two thirds page design, because the white space occupies the left third of the page and the text occupies the right two-thirds of the page. The template provided with this guidebook uses this type of page design.

Two Columns

A second approach is to use two columns of text on the page. You can set these up easily on your word processor. Using two columns increases the amount of text you can fit on the page, reducing the number of pages in the manual. But it also reduces the amount of white space on the page, which can make the text more intimidating to the reader because of its crowded feel.

Screen Layout

The same concerns about the length of lines of text apply online as well. Don’t allow the text to fill the full width of the screen. Either keep the text column narrow or use two frames, as shown in Figure 4-5, effectively narrowing the text column to a more readable width.

The biggest design difference between print and online manuals is that in print, the author determines every aspect of page layout, while on the Web, users can customize every aspect of what can be displayed and how it’s displayed. This means that what users see on their monitors will seldom be exactly what you see on yours. It’s challenging to design a manual that can be customized in so many ways. See Figure 5-1.

Figure 5-1: Browser interface settings for Microsoft Internet Explorer

Here are some of the ways that users can typically customize their browser:

• reduce the size or alter the placement of the window in which the browser is running
• adjust the size of frames within the browser window
• change screen colours
• change the default type size for text and headings
• change the default typeface for text and headings
• turn graphics off so they do not display
• turn sounds off so audio clips do not play
• turn video off so video clips do not play
• disable ActiveX controls and plug-ins
• disable ActiveX scripts
• disable Java programs
• change the pixel resolution of the screen

In Microsoft Windows, the user normally determines the pixel height and width of the monitor display. Depending on the type of monitor, the options range from a low of 640 by 480 pixels, to a high of 1280 by 1024 pixels. Those using the lower pixel ranges will find they have less room on the screen for display and text will wrap sooner and more frequently. Most screen designers get around this problem by designing for 640 by 480 pixels, the lowest resolution; however, this will result in large amounts of unused space, usually on the right, when viewed at the highest resolutions. See Figure 5-2.

Web page viewed at 640 by 480 pixels

Web page viewed at 1024 by 768 pixels

Figure 5-2: Compare these two Web pages. The resolution of the viewer’s monitor can have a dramatic effect on the appearance of a Web page

Tips on Screen Design

Here are some other tips on designing for this uncertain, highly customizable interface:

• word process and structure the text in a way that allows it to flow into different column widths
• make sure the Web ‘pages’ you’ve got planned will display at a screen resolution of 640 by 480 pixels without a horizontal scroll bar
• if you must use a specific typeface, turn it into a graphic
• avoid excessively large graphics or photos, which may force the user to turn off the graphics and prevent them from displaying
• avoid special programming or plug-ins when it’s likely your users have these features turned off or won’t have downloaded them
• test your prototype at all screen resolutions and with different browsers

Single-Sided vs. Double-Sided Printing

To reduce bulk and minimize printing costs, most manuals are printed on both sides of the sheets of paper. This is called double-sided printing. The camera-ready copy, required if you are not having it digitally printed, is usually still printed single-sided—the double-siding occurs during the final reproduction of the manual.

Since readers can always see two pages at a time, most page designers consider the appearance of the page spread (a left and right page together) before making their final design decisions.

Margins and Binding Offset

Many manuals printed on 8.5-by-11-inch paper use 1-inch margins on the left and right (these are the page margins, not the text margins). To provide extra clearance for 3-hole punching, a binding offset of 0.25 inch is usually added. Right pages therefore end up with a 1.25-inch left margin and a 0.75-inch right margin. Left pages, on the other hand, end up with a 0.75-inch left margin and a 1.25-inch right margin.

Margins at the top and bottom of the page are usually smaller—typically 0.5 inch. Margins must be at least 0.3 inch to print on most laser printers. See Figure 5-3.

Figure 5-3: Binding offset provides extra clearance for 3-hole punching

In online manuals, make sure the text doesn’t go right up to the edge of the screen. Give yourself at least 0.25 inch of clearance from all four sides.

Pre-printed Page Shells

Few organizations can afford to print their internal manuals using more than one colour (consider black as a colour). Using a second colour for headings, for example, virtually doubles the printing costs. This is called spot colour by printers, because the colour is used in different spots on different pages. Use spot colour only when the finished look is important, and the manual won’t be revised frequently.

One way to get a second colour on every page without the expense of spot colour is to use pre-printed page shells. Page shells typically have the organization’s name, logo, and title of the manual printed in colour. The shells are printed in bulk, then the text is later reproduced onto them. Because the colour is not printed on a different spot on every page, shells are much more economical to print than spot colour. Left pages and right pages are usually different. See Figure 5-4.

Figure 5-4: Page shells allow you to print your logo, graphic elements, and other constant header information in colour

The shells should only contain information or graphics that are the same for all sections of the manual, otherwise you would have to print different shells for different sections, increasing printing costs. All variable information, such as module numbers or issue dates, must be part of the word processor files and printed onto the shells during final reproduction. Since headers and footers often contain a mix of constant and variable information, the variable elements of your headers and footers must be precisely positioned so they don’t print on top of anything printed on the page shell, for example. To avoid these registration problems, make sure that you have at least 0.1-inch clearance between items on the shell and items from the text file.

Using Colour Online

Most monitors, except some older ones used as mainframe terminals, display in full colour. Using colour online does not increase costs and can be used in various ways to highlight important elements. However, avoid using more than three colours; otherwise, users will be confused about what each colour means.

Start by developing a colour theme, perhaps using the colours in your organization’s logo or high-profile print materials. Your online publications should visually relate to your print publications.

Although many monitors can display millions of colours, it’s best to restrict yourself to 256 colours, since this is the default number of colours on most monitors operating under Microsoft Windows.

As well as using colour to distinguish links, consider using colour for the following:

• heading levels
• graphic lines
• illustrations and graphics
• banners
• background wallpaper
• note, caution, or warning boxes
• navigational buttons

Don’t get carried away with colour. A different colour for every element of the online manual can quickly lead to visual chaos. If you are unsure of your ability to use colour effectively, be conservative in your use of colour, or hire a graphic artist or experienced Web site designer to help you.