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):
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:
<i>To print</i>:
< a href="javascript:if (window.print != null)
{ window.print(); }
else { alert('Unfortunately, your browser
does not support this shortcut.
Please select Print from the File menu.'); }">
< b>Click here</b></a>
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