Auto playing background music on a website is one of the most annoying things that can happen to a user. On frustration level, the second frustrating thing is printing a website and wasting expensive ink, toner or paper on website elements that you don’t need.
It’s 2013! Why would I need to make my website printer friendly? Shouldn’t I be focusing on mobile or something? Well… you probably should yes. But depending on the niche and the target audience a printer friendly version could be a great asset to your website. People still print recipes, addresses and long documents even though it’s not always the smartest thing to do. Printing is still often used on recipe websites, sites with legal documents and with tutorials.
In this article I’ll show you the basics of making a website printer friendly with just using a separate printer.css stylesheet. It’s super simple.
Your CSS include probably looks something like this:
<link href="class.css" rel="stylesheet" type="text/css" />
To add a printer friendly version you only need to specify the media (defaults to screen) as print.
<link href="printer.css" rel="stylesheet" media="”print”" type="text/css" />
Now you can simply use the magic of display:none; to remove unnecessary elements. If your not sure what this does, read this tutorial. Almost all of your elements are unnecessary. Remove your logo, navigation, advertisements, header, sidebar, comments, footer, etc. It’s all about the content. Your CSS should look something like this:
#header, #navigation, #search, #shoppingcart, #crumbtrail, #footer { display:none; }
#content_wrapper { margin:0px auto; width:100%; fontfamily:Georgia, "Times New Roman", Times, serif; }
#content_wrapper p { marginbottom:15px; }
Now that your just left with your raw content you can style it as you wish. Your main focus should be readability. Make sure to give your content plenty of breathing room (whitespace!). It’s also adviseable to switch to a serif font (these are considered more readable in print form).
Depending on your browser you can easily check the design without actually printing the page. Simply hit CTRL + P.
Run the following checklist:
- Are there no advertisements or unnecessary items on the page?
- Is the content centered on the page?
- Is the font big enough / readable?
- Is the page in black/white (except images)?
- Does it work for all pages on your site?
Good luck with optimising your website for print. If you need any help or have something to add please feel free to leave a comment.
