What is a Printer-Friendly Web Page?

How to Design a Printer-Friendly Version of Your Page

Ready printer sheet
Stephan Zabel/E+/Getty Images

You never know how people will choose to consume your website's content. They may choose to visit your site on a traditional desktop or laptop computer, or they may be one of the many visitors who is visiting on a mobile device of some kind. To accommodate this wide range of visitors, today's web professionals create sites that look great and work well across this wide range of devices and screen sizes, but one possible consumption method that many fail to consider is print.

What happens when someone prints out your web pages?

Many Web designers feel that if a web page is created for the web, that's where it should be read, but that is somewhat narrow minded thinking. Some Web pages can be difficult to read online, perhaps because a reader has special needs that make it challenging for them to view content on the screen and they are more comfortable doing so from the written page. Some content may also be desirable to have in print. For some people reading a "how to" article, it may be easier to have the article printed out to follow along with, perhaps writing notes or checking off the steps as they are completed.

The bottom line is that you should not ignore site visitors who may choose to print your web pages out, and you should take steps to ensure your site's content is consumable when it is printed to a page.

What Makes a Printer-Friendly Page Printer-Friendly?

There are some disagreements in the web industry about how to write a printer-friendly page.

Some people feel that only the article content and title (with perhaps a by-line) should be included on the page. Other developers just remove the side and top navigation or replace them with text links at the bottom of the article. Some sites remove advertising, other sites remove some advertising, and still others leave all of the advertising intact.

You will need to decide what makes the most sense in your specific use case, but here are some tips to consider.

What I Recommend for Print-Friendly Pages

  • Change colors to black on white.
    If your web page has a background color, or you use colored fonts, your printer-friendly page should be black text on a white background. Most people use black & white printers, and colored backgrounds can use up a lot of ink or toner.
  • Change the font to a readable face
    If your web page uses a stylistic font, you may want to change it to an easily readable serif or sans-serif for the printed page to make reading easier.
  • Watch the font size.
    If you're writing a web page with a small font size, you should definitely increase the font size for printing. I recommend 16pt text or larger, depending upon your audience.
  • Underline all links.
    The links will not be clickable on your printer-friendly page, so making it obvious that they are links will clarify the page information and let readers know what functionality they are missing from the digital page. I like to also change the color of links to blue, which works for color printers.
  • Remove non-essential images.
    What makes an essential image depends on the developer and the marketing department. I limit images to those that are required for the article and a brand logo at the top left of the page.
  • Remove navigation.
    A lot of what makes a page difficult to print is caused by advertising and side-navigation. Removing it allows the text more room to flow across the screen - making it easier to read when printed out. Also, since the page is meant to be printed, navigation is just a waste of ink.
  • Remove some or most of the advertising.
    This is a sticky subject, as some printer-friendly mavens would have all images removed from the printer-friendly pages, including and especially advertisements. The reality, however, is that many sites are supported by advertising and removing all ads affects the ability of those sites to stay in business. If I had to choose between ads on a printout or the site being gone, I'd choose ads. After all, if I like it enough to print out, I would like the site to continue.
  • Remove all JavaScript and animated images.
    These don't print out well or at all, and in some cases can cause problems printing web pages.
  • Include a by-line.
    Even if you don't typically have a by-line on your articles, you should include one on the printer-friendly version. This way, if a customer files the article she can quickly find who wrote it later without having to return to your Web site.
  • Include the original URL.
    It is very important to include the URL to the original article at the bottom of the printout. This way, your customers can get back to the exact page online if they need to follow a link or get more information from your site. Also, if they photocopy the printout, your site will get more exposure.
  • Include a copyright notification.
    What you write on the web is your writing. Just because a customer can print it out or copy and paste the text does not mean that it is public domain. It won't stop the determined thief, but it will remind casual users of your rights.

With these simple guidelines, you can create printer-friendly pages for your site that will have your customers happy to use and return to.

How to Implement a Print-Friendly Solution

You can use CSS media types to create print friendly pages, adding a separate style sheet for the "print" media type. Yes, it's possible to write scripts to convert your Web pages to print friendly, but there is really no need to go that route when you can just write a second style sheet for when your pages are printed.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 6/6/17