Creating a Print Version of Your Website

Once upon a time, a user searches for “how to care for roses” in Google and stumbles upon your website. They see that your website contains a lot of valuable information, and they want to print off your page so that they can refer to it later when they’re gardening. So they hit the print button and go to their printer to collect the page… only to see that the page is weirdly formatted, runs off the page, and wasted a LOT of their printer ink. Needless to say, they’re a bit disappointed.

This problem could’ve been avoided if you had a print version of your website. This means optimizing your website so that when the user tries to print your page directly from the web browser they’ll have something they can actually use. In order to accomplish this, you’ll have to create some CSS styles that alter your webpages’ design only when the user hits print. Once you’ve created this optimized stylesheet (we’ll call it “print.css”), you’ll link to this stylesheet under your main stylesheet. This link would look something like this:

<link rel=”stylesheet” media=”print” scrc=”print.css” />

As you can see, the media is set to “print”; this tells the browser to only implement this stylesheet when the user tries to print, and no other time.

Now that we know how to link to this stylesheet properly, here are some tips to follow to create a stylesheet that formats your webpage properly for printing:

  1. Remove All Background Images/Colors: The quickest way to eat up all of the visitor’s printer ink is to leave in your background colors and images, and believe me, you DON’T want to do that to them. In your stylesheet you should override any “background-image” or “background-color” style with either “none” or “white”.
  2. Remove Color in General: In fact, you should try to avoid using any color altogether. Colored ink is much more costly than black ink, and so you should try to be mindful of that. Set all your elements to black or white, and maybe gray if you need some variation to maintain your design. Even if your logo is in color, you should have a black and white version that is print-ready.
  3. Remove Unnecessary Content: The reason that a visitor is printing off your webpage is that they want the important content that contains the information they were seeking, and that should be all you give them. Cut out any and all unnecessary elements such as your primary and secondary navigation, search box, social media icons, advertisements, etc. However, don’t go on a cutting frenzy and cut everything BUT the content; some elements you might want to keep or add in addition to your main content might be things like your website’s logo or a URL to the page they printed off so they can find you again.
  4. Readjust Font Sizes: More than likely you’re going to need to increase the “font-size” for your printed page. Your visiting gardening enthusiast may want to be able to read the page while their hands are full of dirt, and so having your content at an increased size is very helpful.
  5. Insert Page Breaks: One thing you might notice is that when you print off your web page, your content may break in weird places onto the next page. To avoid this problem add page breaks within your content by targeting them with the “page-break-before” or “page-break-after” properties in your CSS stylesheet. For example, if you want the page to break to a new page when reaching a new section of the page, you could add a style such as “page-break-before: always” that will tell the browser to always insert a page break right before this element.

Sources: [ Make Your Website Printable with CSS ], [ Make Your Site Printer-Friendly With CSS ], [ Optimizing Your Website Structure for Print Using CSS ]

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s