Printer-friendly Page


User need to print content of the page they are viewing


Place a link to a printer-friendly version of the page the users are viewing next to the page content


Use when

Printing web pages is often problematic because the pages are not designed to be printed. Consequently, parts of the page may not be printed or formatted wrongly. On sites that have a content that is likely to involve a significant amount of reading, special arrangements need to be made so that the printed page looks good. News Sites typically need such special arrangements for reading news articles but other content rich sites may also benefit from this. Any site that uses Article Pages but also other special pages where users can be expected to print. e.g. pages with maps, see Map Navigator or schedules.


A 'stripped-down' version for printing
A printer-friendly version is basically a page with only the page content and not any navigation or other general elements. For example, on a News Site, it is the article text itself with the related links but not any navigation. The page consequently will use a different layout than the other pages on the site. Usually the entire width of the page is used, e.g. using Liquid Layout, so that the page can be scaled appropriately in the printing process. Sometimes the printer-friendly page may also use different font-sizes or typefaces that are better suited for printing. The may also be a "print" button on that page that actual sends the page to the printer. This link simply invokes the browser's print functionality.

Linking to the printer-friendly page
Link to such a printer-friendly page can be done using a text link or an icon link placed near the top of the article or in the Footer Bar. Often there is also a Send-a-Friend Link placed near the link to the printer-friendly page. The label of the link to the 'printer-friendly' page should NOT be 'print' but 'Printer-friendly version/page', 'Printable version/page' or something like that.


If you print an article, you don't want to print all the surrounding page elements. In addition, when reading an article the print-ready version is often preferred by many since it doesn't have any disturbing elements such as navigation or advertisements. Many users know that printing web pages is problematic and the 'printer-friendly' version is now a common good that is learnt by users. Some people with disabilities using assisting technology also benefit from a 'printer-friendly' page. The link must preferably be placed at the top of the of the page so that users can see it immediately. That way they don't have to scroll down and notice it there.

More Examples

At the link is placed in the upper-right corner of the content area:

At SonyEricsson, only an icon-link is used for a printable page and located in a Footer Bar together with other elements::

When selecting "print article" on an Article Page at CNN, users get a stripped version of the page with a direct print button.

At, a link to the printer-friendly page is at the bottom of every page.

plml logo


0 comments have been added to this pattern

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below