Printer Friendly Version | Adobe PDF Version

Introduction

Providing course content on a Web site is a great way to make your course more accessible to students. For example, publishing a Web-version of a lecture or an online syllabus allows students who have Internet access to download the course materials from their home, office, or even while they are on the road. In addition, you can add interactive elements to your materials through the use of hyperlinks, animation, audio streaming, video streaming, etc.

One problem with online course content, however, is that most people don't like to read long documents on a computer screen. According to Lynch and Horton [Lynch, P. and Horton, S. (1999), Web Style Guide: Basic Desing Principles for Creating Web Sites. Yale University Press, New Haven and London.], researchers have noted that disorientation results from scrolling through long texts on a monitor. Eye fatigue can also occur after staring at a computer monitor for long periods of time. Moreover, many students prefer to read printed material because it is more portable and it is easier to make notations. As a result, it is not uncommon for students to print a majority of the Web pages found in an online course. (See ION's February 2001 Poll [link no longer available, Jan 2002], which asks the question "What percent of online course materials do you think students print?")

Nevertheless, many Web pages are not well-suited for printing. For example, it is not uncommon to print a Web page, only to find the text or an image has run off the right side of the page (For example, print the Daily Illini home page). Another typical problem occurs when light colored text is used in a Web page, making it difficult or impossible to read the printed version (For example, print the Web Page For Designers home page using Netscape and notice how the white text is not readable). Students also get frustrated when required to print each individual section of a document rather than just printing the entire document.

I recommend preparing two versions of online course documents that are likely to be printed (e.g. syllabus, lecture notes, readings): a Web-friendly version meant to be viewed online and a printer-friendly version meant to be printed and viewed off-line.

Here are ten tips on how to design a printer-friendly Web page (Click on a tip for more information):

Tip #1 - Combine all sections of a document into one page.

An often-practiced Web design principle is to divide a long document into smaller pages ("chunks") that contain no more than three screens of information and then connect the chunks using hyperlinks. Instructors frequently divide an online syllabus into chunks so that the course description, objectives, requirements, and assessment criteria are presented as individual Web pages (for an example, see the syllabus for MVCR's Web Design Principles For Online Educators). However, it is very time-consuming for a student to print each individual "chunk" of a long document.

Consider combining all of the sections of a document into a single printer-friendly version so the reader can print all the related information in one step. To see this technique in action, compare the Web-friendly and printer-friendly versions of the syllabus for the MVCR Web Design Principles course. [editor's note Jan. 2003 - Links no longer valid as the MVCR site has been redesigned and is now dynamic]

Back to Top

 

Tip #2 - Remove unnecessary graphics and text.

Many times graphics and text contained on a page are not directly related to the main content. For example, a typical online article from the Chronicle of Higher Education Web site contains a left column full of site navigation links, a right column full of links to related stories, and some graphics at the top and the bottom of the page advertising other sections of the Web site. In the printer-friendly version of the article (click on the link at the bottom of the article), all of the graphics and text that are not part of the actual story have been removed, leaving only the essential text to be printed.

Another example can be found on Nancy Johnson's online syllabus for her course entitled Computerized Foodservice Management. Notice that the graphic links and the animated graphic used in the Web-friendly version have been removed in the printer-friendly version.

Back to Top

 

Tip #3 - Do not use dark-colored backgrounds or light-colored text.

Web designers commonly use a column or a row with a dark-colored background and light-colored text for navigation links or supplementary information. However, printing colored backgrounds uses a lot of ink. And if the browser is configured not to print background colors, the light colored text may not provide enough contrast with the white paper to be readable. (For example, try printing a Daily Illini article in Netscape, and you will notice that the white navigational links in the left column do not print.)

Printer-friendly pages should use dark font colors and should not use background colors. For instance, in the printer-friendly version of an article published by Northwest Regional Educational Laboratory, the dark-pink column containing the table of contents hyperlinks in the Web-friendly version is removed and the table of contents appears at the top of the document instead.

Back to Top

 

Tip #4 - Spell out the full location of hyperlinks.

Online instructors often like to include a list of related Web resources that students might find interesting. Students often like to print the list for future reference. This printed list can be very handy if the course site ever goes off-line and the page with the links becomes inaccessible. However, if the list simply consists of hyperlinks to the resources without the actual URL spelled out, it is useless.

Web pages containing links to resources (e.g. course readings, related Web sites, etc.) should also have a printer-friendly version that contains the links and the full URL for each link. For example, in Jesse Berst's online column published by ZDNet , hyperlinks to related articles are listed in the right-hand column. Notice that the URLs of those links are not spelled out. However, in the printer-friendly version [no longer available, Jan. 2002], these links are presented at the bottom of the page and the full URL is presented along with each link

Back to Top

 

Tip #5 - Do not use frames.

Web designers occasionally like to divide the browser window into two or more frames, usually to separate navigation from content. For example, Bernard Turnock's online Public Health Concepts And Practice course employs frames in order to maintain course navigation links in the left column as students scroll up and down through the main content on the page. While frames are often useful, frames-based pages do not function as an integrated unit, making it difficult for users to print material on a page. For example, if you click on the syllabus link of the Public Health Concepts and Practice course and then click your browser's Print button, only the navigation links will print.

Whenever frames are used, printer-friendly versions of the framed-documents should be provided. For example, Bernard Turnock's syllabus has a link to a "full screen" version [http://www.uic.edu/classes/chsc/chsc400/syllabus/syllabus.htm no longer available, Jan. 2002] in which the frames have been removed, thus making it easier to print.

Back to Top

 

Tip #6 - Include the URL of the page.

Students who print pages from your Web site may later decide they want to view the online version in order to view the elements that have been removed from the print version or to explore the hyperlinks or other aspects of the document that may not translate well into print.

Therefore, it is a good practice to include the URL of the online version of the page so that when it is printed, the user knows where that document is located and can easily return to it. For example, the printer-friendly versions of articles published by the Chronicle of Higher Education display the URL at the top of each page.

Back to Top

 

Tip #7 - Do not use graphics larger than the "safe area" dimensions.

According to Lynch and Horton (1999), in order for Web graphics to be printed well, they should not exceed 535 pixels in width and 295 pixels in height.

Graphics should also be kept to a minimum because printing large pictures is a slow process and uses a lot of ink. One option is to use a thumbnail (a smaller-version of an image) on a printer-friendly version.

Back to Top

 

Tip #8 - Include navigation back to the original page.

Usually, users will navigate to your printer-friendly pages by clicking a link on the Web-friendly version (see Tip #10 below). In such cases, the user can easily return to the Web-friendly version by clicking the browser's "Back" button. However, some users may find your printer-friendly page through a Web search engine, bypassing the Web-friendly version entirely. If this occurs, the user will not know how to find the Web-friendly version.

Therefore, every printer-friendly Web page should have a link to the original Web-friendly version. For example, the printer-friendly version of Bill Machrone's article places the return link right under the title.

Back to Top

 

Tip #9 - Use scripting to automate the printing function.

Though not essential for a printer-friendly Web page, it can be helpful to provide a link that automatically brings up the user's printer dialog window. Bill Machrone's article has a good example of this feature.

To include this feature in your printer-friendly Web pages, simply cut-and-paste the following HTML code into your Web page:

Back to Top

 

Tip #10 - Include a hyperlink to the printer-friendly page.

The user needs to know that a printer-friendly version is available, so remember to include an appropriate icon (e.g. a printer or a page of paper) as a graphic link and/or a text link to the printer-friendly version. It's a good idea to place the link somewhere near the top of the page.

A good example of a well-positioned hyperlink to a printer-friendly version of an online syllabus can be found on the homepage of Steve Klein's online course Practicing Journalism In An Online World. Notice the use of both an icon and a text link.

Back to Top