Grab yourself a beverage, hit print and read about the simple things that make a big difference when visitors print. But its not all about paper, inspired by Safari Reader we take a look at a modern day take on the once dreaded print preview.
Isn’t it funny, no matter how much effort you put into designing a new site for a client, one of their first instincts is to print it off!
Then come the visitors who rather than spending time admiring the hours you have lovingly poured into creating a design go and print off content to enjoy elsewhere.
You’re right, that’s such a dramatization, not everybody comes to your site and hits the print button but when they do have you them covered?
Why Do Visitors Print?
Before we continue, lets take a look at why someone may print your site in today’s world. I read, research, experiment with and talk about the web all day every day. Most of that, in front of a screen or on one of the several tech gadgets I own. So why do I print?
I can scribble on paper to my heart’s content.
I can escape from my desk onto a sunny balcony with fresh air and a good read in hand.
I am able to spot content issues more easily on paper than on a screen (I review a lot of content)
Call me wasteful but after spending all day on a computer the feel of paper and the smell of freshly printed ink is irresistible.
I often hand colleagues and clients reports, articles and so on.
I print heaps of articles to read on the tram/train ride to and from work.
Sure I am a unique case but visitors, just like me, print content from sites on a regular basis to paper and PDF. Reviews, maps/directions, spreadsheets in applications like Google Docs, to-do lists from applications like Basecamp, eCommerce transaction confirmation screens and so on are at the top of the list.
Read on to walk through the creation of a quick print stylesheet that will make visitors happier when they walk over to the printer.
For something different, we will also take a look at a modern day print preview with inspiration from Safari Reader.
Creating a Print Stylesheet in a Flash
Start With a Clean Slate
I find that the best approach to creating a print stylesheet is starting with a clean slate by dividing all screen styles from print styles like so:
- A file for screen and a file for print
Note: If you do decide to inherit screen styles into your print stylesheet by using media=“all” on the above screen stylesheet link element, be sure to override any background image replacement and nullify any absolute positioning. The reason for this is that many browsers disable all background properties (images and colors) and run into problems with positioning of elements.
Remove Clutter and Save the Environment
When visitors print off a web page they do so for the content. Do them and the environment a favor and remove any elements that won’t be read: navigation, photo gallery, carousel controls, social media links, search forms, widgets and so on all turn into clutter on a piece of paper.
Think of everything that is irrelevant once on paper and remove it with a single swipe:
1
``/* -- Hide screen specific elements -- */
2
nav,
3
footer .footer-links,
4
feature a.prev,
5
feature a.next {
6
display: none;
7
}``
Make Reading a Pleasure
It’s often cited that while Sans Serif type is great for reading on screen and the better option for print is a Serif type.
It doesn’t have to be Times New Roman and yet more Times New Roman, here’s an example that uses simple spacing, Georgia and some CSS3 flair to spice up the page:
1
``/* -- Typography -- */
2
body {
3
background: #FFF;
4
color: #000;
5
font-family: Georgia, serif;
6
line-height: 1.2;
7
}
8
p, table, ul, ol, dl, blockquote, pre, code, form {
9
margin: 001em;
10
}
11
h1,h2,h3,h4,h5{
12
font-weight: normal;
13
margin: 2em00.5em;
14
text-shadow: rgba(0, 0, 0, 0.44) 1px1px2px;
15
}
16
h1{ font-size: 2em; margin: 2em00.25em; }
17
h2{ font-size:1.7em; }
18
h3{ font-size:1.5em; }
19
h4{ font-size:1.2em; }
20
h5{ font-size:1em; }``
The above code in action
Branding
If you would like to add a little touch of branding to your site when its printed why not bring in a print friendly version of your logo.
The key here is remembering that all today’s browsers will strip background images meaning that no image replacement can be used.
ABC News (Australian Broadcasting Authority News) has a great example of this where they have included a print version of their logo that is waiting to be picked up when somebody prints:
A print friendly version of the ABC logo waiting for the right moment:
An excerpt of ABC screen stylesheet hiding the print friendly logo:
1
.print{
2
position: absolute;
3
top: -32768px;
4
left: -32768px;
5
}
Screen and print versions of the ABC news logo (abc.net.au/news) pictured top and bottom respectively
Alternatively, you can always keep things simple and make your header a little bigger and bolder like so:
1
#header strong {
2
color: #000;
3
display: block;
4
font-weight: normal;
5
font-size: 3em;
6
margin: 001em;
7
padding: 0;
8
text-shadow: rgba(0, 0, 0, 0.44) 1px1px2px;
9
}
Keeping the header simple with a touch of flair
You Can’t Click on a Piece of Paper
At some point, you have probably found yourself reading a printed article when you get to an engrossing section that includes a link for more information. A link that sits there teasing you with its blue underline. Without a mouse or Apple’s latest interfacing doo-hicky you have no chance of finding out where that link goes unless you return to the original article on screen.
The solution to unclickable links is an easy one to deploy. Use some CSS to print out the location of the link that would otherwise be hidden:
1
``#content a:link:after,
2
content a:visited:after {
3
content: " ("attr(href) ") ";
4
font-size: 80%;
5
text-decoration: none;
6
}``
A solution to unclickable links, first mentioned back in 2002 by Eric Meyer and still as popular as ever.
Notice that the above CSS limits itself to all links in the content. So things like a link around logos don’t show up.
Bring Those Visitors Back to Your Site
An example of a message that only shows on print
When you’re targeting visitors on screen, encouraging them to click through other pages or subscribing through RSS, email or newsletter is quite simple. But what about those who print?
With a little additional CSS its easy to add a helpful message that also acts as an opportunity to help bring them back to a site.
1
#content:before {
2
content: "Thank you for printing this page. Do come back to foo.tld, we are constantly adding new and interesting articles and tutorials. Note: To help the environment we have automatically removed navigation and other unnecessary elements from the page.";
3
display: block;
4
border: 1pxsolid#ccc;
5
font-style: italic;
6
margin: 001em;
7
padding: 8px10px;
8
}
- The CSS above prints a message at the top of the page with a border and some padding. This message can be changed to anything suitable depending the site’s audience.
Note: The above CSS also adds a note to remind visitors and clients that you have removed unnecessary clutter such as navigation, helping reduce confusion in the transition from screen to paper.
Accommodating for Interactive Elements
So what about all those fancy JavaScript driven elements that make their way into content such as photo galleries and tabs? These elements often add inline styles to cycle through content, it may be a simple
1
display: none;
declaration to hide whats not being shown.
Part of the benefit of dividing styles between screen and print mentioned earlier in this article is that conquering thEse elements comes down to identifying what inline CSS is being added by JS controlling interactive/animated elements.
Lets take a photo gallery as an example. Head on over to the jQuery Tools site for a demo of their scrollable image gallery in action. If you open up Firebug or your favorite equivalent and target the containing element of the photos you will see that the jQuery Tools Scrollable plugin is adding an inline ‘left’ declaration that pulls and pushes the gallery left and right.
Now for printing this in a suitable fashion, lets start with a declaration with an important statement that overrides this inline styling:
1
.scrollable .items {
2
left: auto!important;
3
}
With this in place the photos will print one below the other. Lets bring that back to more of a photo gallery layout by floating them side by side:
1
.scrollable .items {
2
left: auto!important;
3
overflow: hidden;
4
}
1
.scrollable .items div {
2
float: left;
3
margin: 010px00;
4
}
Print Preview With Style
Ever since I first saw Safari’s Reader, I have wondered how it would be like for a visitor to click on a print link and see an A4 piece of paper sliding up the screen including a preview of what they are about to print. Then I started to think about the merits of a jQuery plugin that is simple to roll out on any site that had a print stylesheet. Something that showed visitors what they were going to print before they printed without needing a ‘print version’ of the site.
So that’s exactly what I wrote. Introducing a jQuery plugin called Print Preview that does exactly what it says on the can with a demo to boot.
Click on the print preview button on the top right, or for an added bonus simply hit the ‘P’ key on your keyboard.
Get Set-up in Three Steps:
Setting up a print stylesheet
Including the jQuery plugin and a little CSS (packaged) to style the sliding lightbox/modal window.
Adding a print preview link and initializing the plugin
And that is all you need to produce a robust print stylesheet that will bring readability and focus to content for anyone who prints off a page.
If you are they type of going the extra mile, here there are some further ideas:
Style additional elements such as tables. For some ideas read Jonathan Snook’s article titled Terrific Tales with CSS over on Sitepoint.
If applying a print stylesheet to a site with comments why not look into “page-break-before: always;” to push all comments to new page — offering the option for visitors to drop off the last pages when printing
Accommodate for JS by overriding any JS driven styles like opacity. See the above demo for some ideas.
All of the ideas in this article can be seen in this demo.
What else have you done with print stylesheets?
What crazy things have you seen people print from the web?
Do you think the art of scribbling on paper will be a lost art in the years to come?
Alternatively, you can always keep things simple and make your header a little bigger and bolder like so:
When you’re targeting visitors on screen, encouraging them to click through other pages or subscribing through RSS, email or newsletter is quite simple. But what about those who print?
No comments:
Post a Comment