Print Friendly Feature Necessary?

Is the “Print Friendly” feature seen on web pages throughout the web necessary?

Up to a week ago, I thought not.

The Print Friendly feature obtained popularity in the late 90’s, early 2000’s. At that time, most pages were so content & navigation heavy that it didn’t make sense for companies to allow website visitors to print the pages “as is.” So, through programming, sites would dynamically generate a new page, specifically designer to print better. The problem was the duplication of development efforts to perform such a simple task. Additionally, many of these print version provided poor results, with lines of text being cut off along the right edge (just enough to drive you insane).

Once CSS became popular in the early to mid-2000’s, web site owners began to leverage print stylesheets to deliver printable versions of web pages. The benefits were amazing; improved print versions at reduced development effort.

As the CSS method took hold, many people, including myself, believed that the need for the infamous “Print this Page” link had past. Users could always use the browser’s print option to print a web page.

But would they?

I recently noticed a discussion thread in LinkedIn on the topic of the Print Friendly feature. I chimed in with my thoughts, that such a feature was no longer necessary, due to the advent of stylesheets. However, after a week of following the discussion, and having my eyes opened, I have to change my mind.

One response gave me the “light bulb moment.” It was by David Hamill, an Independent Usability Specialist in the U.K. who shared his observations:

I’ve had participants complain about wanting to print a page. When I asked what they would do next, they often don’t know about File> Print. You see this understanding comes from office packages like Word. The personal computer is now so popular that there are people who use it solely for internet browsing and email. They don’t know about File > Print. Similarly I’m noticing people who don’t know how to use a standard mouse because they have a laptop with a touchpad. This being their first computer, it has never occurred to them that they might get a normal mouse for it.

Other responses from UX specialists included considering the context of the page and goal for printing the page, as well as the functional experience once the Print Friendly button/link is clicked.

Print Friendly Best Practices

Following is a list of best practices to follow when implementing a Print Friendly feature. There’s also a comprehensive (and timely) article on this topic on the Boxes & Arrows website.

  • Make sure the context makes sense. Only content heavy pages benefit from a Print Friendly feature. For instance, homepages and movie sites are rarely the right place to place a Print Friendly feature. Yet, information from a medical site or other online reference would make a natural choice.
    Monsters vs. Aliens

    A movie site such as this is not likely to be printed out.

  • Make it clear what will be printed. This may seem straightforward, however, on Web 2.0 sites that use elements like tabs & panels to display only select information, it may not be as intuitive. One suggestion for handling a page that contains tabs of content would be to create separate stylesheets for the individual tabs, then provide a contextual “print” button or link to print just the visible content.
  • Print Preview Page.
  • Use proper labeling. Print, Printer Friendly, Print Page, what to use? Again, here’s where user testing will aid. However, here are some labels that are used on the web today:
    • Print – best to use when printing directly
    • Printer Friendly – Best to use when linking to a print friendly page for preview
    • Print (Graphical Icon) – Again, best used when printing directly.
    • Print Product Details – Good for explaining what will be printed.
    • Print this Page – Possibly wordy & overkill
    • Print Article – Ok for type of site
  • Remove Unnecessary Elements. These include:
    • Images, ads, navigation, links.
    • Background colors.
  • Restyle fonts for print. Serif fonts work better for print. Also, as most printing is black & white, consider black text.
  • Add Contact Information. Both offline (address, phone number) and online (website URL & email address).

Above all, you should consider testing the Print functionality with users. By observing how users interact with your site & functionality.

Example

Below is an example of a site tailoring its print option to its users.

Food Network

fn-01
Food Network has always offered several options for printing recipes on its site. And while they are not using solely CSS, the options offered to site visitors provide valuable flexibility.

Print Version

Print Version

Clicking on the Print Recipe link offers a separate page with just the recipe text shown. You’ll also notice that while there is an advertisement displayed to the right of the recipe, a note below the ad reassures site visitors that the ad will not print.

Another option offered is to provide the recipe in a layout and format similar to traditional recipe cards.

fn-03

Selecting a format then presents the recipe in that format for printing.

Recipe card print version

Recipe card print version

Advertisements

3 Comments

Filed under Best Practices, Web Design

3 responses to “Print Friendly Feature Necessary?

  1. Todd Chaney

    Dennis, Excellent post, this is one thbat I have had to struggle with many times.

  2. Pingback: How to Make Printer-Friendly Pages with Printer-Friendly Page Generators, Creators, Scripts, Code Snippets, and Helpful Articles - Webmaster & Web Design Tools Blog

  3. Thank you for the information, but I do think the quote about file>print is completely wrong taken. Most people in my humble opinion use a shortcut like cntl+p, apple+p or click the print button in their browser.
    So, I think there is not need any more for a printer friendly button. Save clicks, opening other pages, etc.

    regards
    Rob Oudendijk

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s