Loading...

What should we change when setting up styles for printing?

a printerUsing the media type "print", a website can be styled to be better formatted for printed copies. But what do we changed? The reasons for having a print version of a website is to save ink, minimize the paper needed, and optimize readability. So what CSS properties can we alter to accomplish these tasks?

Saving ink is one of the most important reasons for having a print format. Websites that are covered in images and background colors will needlessly blast through the ink cartridges. If a user is printing out a copy of a web page, it's not usually to keep all of the pretty imagery, but rather to have information readily on hand. In this spirit, some or all images that do not contribute information should be hidden. Also, background color use should be minimized. If background colors were being used to separate sections of content, consider an alternative that would use up far less ink, such as borders.

As far as saving paper, a layout proportion that's not conducive to paper dimensions will chew it up faster than anything. It's true that content can be shrunk to fit the page, but this could result in text so small that it's more or less unreadable. So when preparing styles for your print version, consider the proportions of your content. Arrange your elements so that they fit pretty close to the 8.5"x11" or 11"x8.5" proportion of typical printer paper. Even if the content doesn't fit perfectly, it shouldn't have to shrink much, and it'll still make the best use of the paper.

Finally, in order to increase readability, we should remove media and information that has no purpose in a printed format. (This will also save ink and paper.) Your page may have some external links, videos and audio players. The video and audio players should be removed in the print version as they obviously won't be functional in that state. If you have transcripts, you may want to include a download somewhere on the page so that users have the option of printing them out if they'd like. As for external links, they are more of a judgment call. They can be removed for a print version, but should be kept if they'd be beneficial as a reference list for "additional reading" about your topic. The main takeaway here is, removing any superfluous elements possible will cut down on the amount of content that needs to be printed, and will declutter the page to make the information easier to absorb.