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. Lets take myself as an example. I am a consultant
for Australia’s largest open source ECMS vendor.
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
9
p, table, ul, ol, dl, blockquote, pre, code, form {
10
margin: 001em;
11
}
12
13
h1,h2,h3,h4,h5{
14
font-weight: normal;
15
margin: 2em00.5em;
16
text-shadow: rgba(0, 0, 0, 0.44) 1px1px2px;
17
}
18
19
h1{ font-size: 2em; margin: 2em00.25em; }
20
h2{ font-size:1.7em; }
21
h3{ font-size:1.5em; }
22
h4{ font-size:1.2em; }
23
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
3
content a:visited:after {
4
5
content: " ("attr(href) ") ";
6
font-size: 80%;
7
text-decoration: none;
8
}``
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?
When Visitors Print — About That Print Stylesheet
Reviewed by JohnBlogger
on
1:27 PM
Rating: 5
No comments: