Where I talk about why you should make your site print-friendly, how to go about doing it, and techniques to measure when users print pages.

1. Making Your Site Printable
Presented by Adrian Roselli

2. About Adrian Roselli
• Co-written four books.
• Technical editor
for two books.
• Written over fifty
articles, most recently
for .net Magazine and
Web Standards Sherpa.
Great bedtime reading!

3. About Adrian Roselli
• Member of W3C HTML Working Group, W3C
Accessibility Task Force, five W3C Community
Groups.
• Building for the web since 1994.
• Founder, owner at Algonquin Studios
(AlgonquinStudios.com).
• Learn more at AdrianRoselli.com.
• Avoid on Twitter @aardrian.
I warned you.

4. What We’ll Cover
• Background
• Techniques
• Measuring
• Questions

5. Background

6. Responsive Web Design (RWD)
• Responsive design (or
adaptive design) is about
supporting any device:
• Desktop computer
• Smartphone
• Tablet
• Television
• Printer?
Photo of printed page from http://elliotjaystocks.com/blog/has-adaptive-design-failed-of-course-it-bloody-hasnt/

7. PrintShame.com
http://www.printshame.com/2012/06/foundationzurbcom.html

8. PrintShame.com
Source page: http://foundation.zurb.com/docs/components/grid.html

9. Print Services
http://rosel.li/040612 “More Evidence of the Need for Print Styles”

10. Techniques

11. Screen versus Print
Screen
• Continuous
• Visual, audible, tactile
• Vector and bitmap
• Interactive
• Online
Print
• Paged
• Visual
• Bitmap
• Static
• Offline

12. Planning
• Is my site built mobile-first?
• Sometimes your mobile-first styles will get you
nearly all the way there.
• If you built desktop-first, you may be able to re-
use your smaller viewport styles.

13. Planning
• Things I want the user to see:
• Branding
• Cross-branding
• Page address
• Copyright
• Path to page (breadcrumb)
• Link addresses (?)

14. Planning
• Things the user may not want to see:
• Primary navigation
• Secondary navigation
• Site search
• Social media icons
• Ad banners
• Fat footers

15. Planning
• Things that probably won’t print anyway:
• Colors
• Backgrounds (images and colors)
• Bits of timed / interactive elements
• White elements (logos, text, effects)

16. Example

17. No Print Styles

18. Calling Print Styles
Make a home for your print styles:
@media print {
/* insert your style declarations here */
}
Or:
<link rel="stylesheet" type="text/css"
href="/css/print.css" media="print">

19. General Styles
• Reset type sizes to points, set text to black.
• Points (mostly) provide more consistent text size
across browsers and devices than pixels.
• Light grey text doesn’t trigger browser overrides
to convert text to black.
• Not all users have color printers. Set red to black
so it doesn’t come out as a medium gray (perhaps
with other styles as appropriate).

20. General Styles
• Clear whitespace around the content.
• User’s print settings will handle page margins.
• Lets user get as much content on a page as
possible (yay for trees!).
• You shouldn’t need to worry about portrait vs.
landscape, A4 vs. 8.5×11, etc.

21. General Styles
• Write values of title (or alt, or data-*, etc.)
attributes into the page.
• Think @cite on blockquote, or @title on abbr.
• You can do this with most attributes on most
elements, although it might not be a good fit.
• Perhaps a @data-shortURL attribute to display a
minified link address to make it easier for users to
type URLs.
• A novel way to promote @longdesc.

22. In-Page Links
Select links in content container(s) and then
display the href value as text after the link.
#Content a[href]:after {
content: " [" attr(href) "] ";
word-wrap: break-word;
}
#Content a[href^="#"]:after, #Content
a[href^="tel"]:after, #Content a[href^="mailto"]:after,
#Content a[href^="javascript"]:after {
content: "";
}
Yes, you can do the inverse selector, but then I don’t get to show the variations!

23. Navigation
• Get rid of the primary, secondary, tertiary
navigation,
• Remove social media links,
• Remove other bits that won’t make sense
when printed.
#Nav, #FlyOutNav, #SubNav, .NoPrint, #SMLinks {
display: none;
}

24. Breadcrumb
Keep the breadcrumb as a wayfinding method, but
reduce its size and don’t expand the links.
#Bread a:link, #Bread a:visited {
text-decoration: underline;
color: #000;
}
#Bread {
color: #000;
font-size: 6pt;
}
#Bread > a:after {
content: "";
}

25. Banner
• Change any text to
print units,
• Adjust colors,
• Handle spacing,
• Make sure you keep
the logo.
• Consider SVG.

26. Footer
• Change any text to print units,
• Adjust colors,
• Handle spacing,
• Remove unneeded bits.
footer {
border-top: 1px solid #000;
font-size: 6pt;
color: #000;
background-color: transparent;
}
footer p {
margin: 0;
color: #000;
}
footer p a::after {
content: attr(data-alt);
}
footer img {
display: none;
}

27. Page Breaks
The CSS properties page-break-before, page-
break-after and page-break-inside have the
following values:
• auto: default value, no specified behavior.
• avoid: tries to avoid a page-break.
• always: invokes a page-break (not for page-break-
inside).
• left | right: Tries to place element on the start of a page
on the left or right, for when you are printing bound material
(books, magazines, etc.) (not for page-break-inside).

28. Further Consideration
• Hide videos.
• Hide controls for embedded audio.
• Hide Flash movies.
• Hide canvas elements (assuming interactive).
• Don’t scale images to 100% width (looking at
you, mobile styles and frameworks).
• Determine if ads should be printed or not.

29. Before (9 pages)

30. After (2 pages)

31. Printing from Mobile
Android Browser Chrome Firefox

32. Printing from Mobile
Android Browser Chrome Firefox

33. Printing from Mobile
• Consider the explosion of mobile.
• Same goals on mobile as desktop.
• Mobile has played catch-up in print, but has
arrived within past year.
• Firefox & Safari print background colors.
• Firefox used odd page size.
• Android browser outputs raster PDF.
Printing from Mobile Has Improved: http://rosel.li/063014

34. TEST!
• Print to PDF for your first (most) rounds.
• Chrome Developer Tools (next slide).
• Use every browser you can.
• Use each browser visiting your site.
• Change paper size (8.5" × 11", A4, etc.).
• Change paper orientation.
• Scale the content in the print dialog.

35. Chrome Developer Tools

36. Measuring

37. Google Analytics
• Call the GA tracking image, but only when the
print styles get used.
• Attach a custom event to that image.
• View custom events in Google Analytics.
• Identify which pages get printed.
• Make sure that at least those pages print well.
• For fun, compare to your carousel.
Full tutorial: http://rosel.li/032613

38. Check the Data

39. Check the Data

40. Wrap-up, Questions

41. Further Reading
• Tracking Printed Pages (or How to Validate Assumptions)
webstandardssherpa.com/reviews/tracking-printed-pages/
• Make your website printable with CSS:
www.creativebloq.com/responsive-web-design/make-your-website-printable-css-3132929
• Calling QR in Print CSS Only When Needed:
rosel.li/030813
• Tracking When Users Print Pages:
rosel.li/032613
• Tips And Tricks For Print Style Sheets:
coding.smashingmagazine.com/2013/03/08/tips-tricks-print-style-sheets/
• Printing The Web:
drublic.de/blog/printing-the-web/
• CSS Paged Media Level 2:
www.w3.org/TR/CSS2/page.html
• CSS Paged Media Module Level 3:
www.w3.org/TR/css3-page/
• Proposals for the future of CSS Paged Media:
dev.w3.org/csswg/css-page-4/
• Can you typeset a book with CSS?
www.w3.org/Talks/2013/0604-CSS-Tokyo/

42. Making Your Site Printable
Presented by Adrian Roselli
Slides from this talk will be available at rosel.li/Booster