You can control how your website looks when a user prints a page.
Have you taken a look at what your site looks like when printed out? Give it a try – no trees need to be harmed. Navigate to your website, then bring up the print dialog in your browser (CTRL+P on PCs or CMD+P on Macs). You should see a preview of what it would look like if you printed your site.
Before
Your reaction will probably range from “It definitely could be better.” to “EGADS! Kill it with fire!” – mine was definitely more towards the later. Take a look at the 6-page monstrosity below if you dare (shown in small scale as not to burn out your eyes).
Original Print Preview (aka something out of my nightmares) – view full PDF if you dare
While it may seem minor (and it may actually be for a lot of sites), it could be especially important for sites that feature pages that users may frequently print to read or review later such as news, articles, real estate listings, and products. That little extra bit of time and professionalism can make a difference.
After
Want to see what kind of results you can get for a few hours of work? Take a look at the all kinds of shiny my site looks like now when printed (only 2 pages now).
Improved Print Preview (so pretty) – admire the full PDF
Pretty impressive, right? From 6 pages down to less than 2 and much more readable then before. This was achieved using a print stylesheet to modify the looks, colors, and sizes of most elements while removing any unnecessary parts of the site (like the contact form which isn’t very useful on a piece of paper).
As I pointed out in my last article about mobile development, it’s important give your visitors/customers the best viewing experience for how they are viewing your site (desktop, phone, tablet, print). It will help you stand out of the crowd.
I took out most of the backgrounds (since by default most browsers don’t print those anyway), and the ones I kept in are just to enhance the style – they aren’t necessary and the printed version looks just fine without them.
I also removed most of the color on the site for faster printing. The portfolio images remained in color and the links are still red for emphasis, but if the user prints the page out in grayscale, they degrade gracefully to discernible shades of gray.
You’ll also see I added URLs after links. This is considered good form so users know where those links go if they ever wanted to “follow” a link from a preview.
Try viewing the print preview for this article. You’ll see it is formatted to look good and be readable when printed out as well. In fact, if you feel motivated to print this article out and share it with a friend, you wouldn’t get any arguments from this web developer.
Where To Get Started
A good starting point for a print stylesheet would be the print styles in the HTML5 Boilerplate. It is used widely by web developers, but it won’t make the printable version of your website into a work of art by itself. It will get you partway there however, especially with some of the common practices. I’ve also included some links in the references section that have some great tips if you are a bit more technical and want to strike out on your own.