Introduction
How many times have your clients complained about web pages not printing properly?
Probably not even once!!!
Surprised, well you shouldn't be as they are so used to NOT getting quality printouts. They have subconsciously given into to the fact that web pages are not meant to be printed. Probably they are expecting a catalogue of your products and services created in PDF or Word that they can download and print or even handed over for free. That's the norm and they expect no better.
But they do get frustrated when they need to print your web page and it doesn't print properly. Well you know a frustrated customer is definitely not a loyal customer!
So you go to lengths to make your customers as happy as you can. You get a team of designers to create your product and services catalogue specifically for print. Spend all that money and get truckloads of printed material ready to be distributed across your stores and through marketing channels. May be overspending in the process... what a waste of money you will think!
It's not just money; you will over-use paper, ink, valuable time in duplicating information and not to mention putting stress on environment that can be avoided.
Wouldn't that be nice to have a web page or your product page or your online catalogue printer friendly?
Is you answer yes, let's see how you can achieve this.
Comparison
Let's first see what are the differences between three views.
Web page as displayed on screen.
Non printer friendly preview on A4 paper.
Printer friendly preview on A4 paper.
As you can see above the online web page is what you see when you access a web page from browser. If the page is optimised for web and is responsive, it will display well on any device including tablets and mobile phones.
But this page is not optimised for print and when you try to print this page you see what you don't want to. Page is chopped off from the edges and half of the information is missing. You get a ten page printout and a lot of that is web page styling you don't care about. The critical information is hidden behind the hyperlinks which you just can't click on paper. Content is overlapping over each other and font is so small that you need a magnifying glass to see it.
Now let's have a look at printer friendly webpage. This page is carefully optimised and set to print just as you would like to see on paper. No unwanted styles push your content over ten pages but just two pages which can be printed back to back on one sheet of paper. Font is big enough for most of the readers to read properly. All important information is included and rest is hidden. Not to mention links behind hyperlinks are visible and scannable QR codes are available which are not there when accessing webpage online. How much better the page looks now on paper and what a difference it makes to the usability of your print out!
How it works?
Ok, so if you have reached this far you clearly are interested and keen to make a difference.
Great work and congratulations, you have just won half the battle!
Let's get started with basics first.
- CSS styling on web page geared for screen and print: The most important part of converting an ordinary web page to printer friendly is styling. You can learn a lot more about this on w3 site. With help of media queries you can fine-tune your page for a specific media type like print, screen etc.
- Hiding elements that are not required on print: Next important step is to identify the elements that you want to show or hide on print e.g. form buttons or animations will be of no use on a paper so you can hide them on print media query.
- Styling hyperlinks to show full URL: Another important element that tends to be ignored is hyperlink. On screen a hyperlink can be clicked so you can hide it behind a text or an image or a button, but it is no good on paper if the link is hidden. With CSS you can make your hyperlinks show full URL when the page is printed. That ensures you don't duplicate links and when a link changes you only change it in one place.
- Adding QR/bar codes where possible: Expanding link is good for readability, but what if that link is long enough to wrap in two lines or includes number, special characters and mixed case. It will become difficult for users to type the URL and access your page. You could make use of shorten URL tools or use of QR/bar codes that people can scan on their mobile App and quickly access the webpage. The QR code will again be controlled by CSS to show on print but not on screen.
- Adding page breaks: Now this one will be a little fiddly but worth investigating. There is nothing like controlling what you show on one page rather than letting your tables and images cut by auto page breaks. Page breaks at right points will ensure a friendly user experience.
- Image quality and print: Websites usually are designed to be as light as possible to load the content quickly. However that also means that you have to have light weight images for web that may not print so well on paper. You can print pages without images though and keep colours to minimum, but sometimes you do need those good quality images on your printouts. You can again use CSS to control two sets of images; one for web and other for print which will be high resolution, ensuring you get best of both the worlds.
- Understanding print settings: You have done all you can and now the page is ready to be printed as you want. Finally this is one last step where you have to rely on user who is printing the actual page as you will be having no control of print settings on user's computer. The settings of printer are controlled by the operating system and not the web page itself. Your best bet here is to create an instruction manual to help user set the right settings for your page and eliminating chances of errors.
If you find the information above to be a bit technical, we are here to help you with it...
