Did you know users still use printers? Of course, you did, but have you considered what you website looks like printed out? If someone prints out your website, odds are they plan to show it to someone else. This is the moment you have been waiting for. They call it “word of mouth” advertising. However, your webpage might look like complete garbage in a print preview. Browsers try very hard to give the best print previews possible, but they cannot guess exactly what you want.
Create a Print Friendly Website
Really, this entire topic is probably the easiest of all of the Usability tutorials to understand. Do you know how browsers figure out how to display your page in a print preview? You might think they just use your regular CSS. If you think that, then you are absolutely correct. However, you just made a terrible error. The browser defaults to your standard screen display CSS, but browsers accept a “media” that can take the value of “print”. Basically, you can craft a separate style sheet for your print preview.
Why Create a Print CSS?
First, go print out a few web pages on your website. Does it look professional to you? Are there any odd formatting issues? Oh, you didn’t want those ads that are not yours to be printed… Precisely the great reason to create a style sheet for printing. The number one thing you will probably put in your new style sheet is the “display:none” CSS property on some classes. We all have a few things on our websites that we would not want shown on paper. For instance, I use ads to keep this website floating, but I certainly do not want a user to advertise their ads on my printed web page to other people. They do not pay me for that. No, I want the user to have a professional looking tutorial that I wrote to show to their friends. I only want to brand my name across the top and show the content that I wrote. My navigation categories are probably not important for them to show their friends.
Creating a style sheet for printing is an excellent idea. However, you get guys like me that border on overstepping the boundaries on a good print style sheet. I suppose the user could want to show exactly how my website looks, but I would bet that more would like to show only my article content. This is exactly where Usability becomes an art. It is practically impossible to please everyone, so we should seek to please the majority of our users.
You have a snarky voice in your writing… Thanks for the great tutorial anyway!
Oh, I have not heard of Print CSS solution before. Thank you for the article!