Menu

Use CSS Print Styles For Offline Marketing

Print styles in CSS are the instructions for a browser that say how should your web look like when printed on a paper. Many web sites used (or are still using) a link to a “Print version”. This function, however, usually not only leads to duplicate content in the search engines, but moreover this type of link is completely outdated. The print styles in particular are the right alternative for the web printing.

How do the print styles work? Basically, there are the same CSS rules as you are using for your web site’s layout and design today. The only difference is using a print media to mark the rules valid for printing. You can, for example, add a print style on your web site just like this:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Do you really want to print everything?

Except from the actual non-ecological nature of printing the web pages the way you see it displayed on the screen, you should also think if all those sections are really necessary when printing. Does the printed left menu help your visitors in any way? And what about those ad banners – what’s their actual role on a printed sheet? And what if you would like to provide an additional information in print that is not visible on your web site? Or even more – you would like to have your logo and photos printed in better quality?

Print styles come to your help. Eliminate the unnecessary elements of a page or simplify the printing layout of your web site. Let’s say that an element banner contains advertisement you don’t want to print. We will also remove the left menu that is useless on a paper. And a logo, of course, will look better when printed, if we provide it in higher quality. We will add the following rules in the print.css stylesheet:

#banner, #menu { display: none }
#logo { background: url(images/logo-hq.png); }

Call to action on a paper

On the other hand, we want to show an address of a page (URL) that is printed out – we will add a hidden element printurl into HTML and a rule to make it visible to the print stylesheets:

#printurl { display: block; font-size: 120%; font-weight: bold; }

A reader of the printed version will immediately know the actual web page address. You can even add a call to action to an element visible only when printed, e.g. “Visit www.example.com and get a 5% discount!” or “If you order until September 30th, you get a free shipping!”.

Printed order available for an immediate checking

Ideally, you should be using the specific CSS print styles during shopping process for every “thank you” screen offering a summary of an order, travel itinerary, important contacts or a date of delivery. That’s the good time, when the use of special CSS rules makes the printed pages easily scannable with all information available immediately. Save your customers a bunch of frustration and yourself time spent answering the same questions about the orders repeatedly.

By the way: you will even get this article served a bit differently when printed (use the Print Preview to see an example).

Do you know other uses of printed stylesheets for offline marketing? Let us know about them in the comments!

//pizzaseo.com/blog/print-styles-offline-marketing/