Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making Your Site Printable: Booster Conference

1,363 views

Published on

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.

Published in: Internet
  • Be the first to comment

Making Your Site Printable: Booster Conference

  1. 1. Making Your Site Printable Presented by Adrian Roselli
  2. 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. 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. 4. What We’ll Cover • Background • Techniques • Measuring • Questions
  5. 5. Background
  6. 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. 7. PrintShame.com http://www.printshame.com/2012/06/foundationzurbcom.html
  8. 8. PrintShame.com Source page: http://foundation.zurb.com/docs/components/grid.html
  9. 9. Print Services http://rosel.li/040612 “More Evidence of the Need for Print Styles”
  10. 10. Techniques
  11. 11. Screen versus Print Screen • Continuous • Visual, audible, tactile • Vector and bitmap • Interactive • Online Print • Paged • Visual • Bitmap • Static • Offline
  12. 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. 13. Planning • Things I want the user to see: • Branding • Cross-branding • Page address • Copyright • Path to page (breadcrumb) • Link addresses (?)
  14. 14. Planning • Things the user may not want to see: • Primary navigation • Secondary navigation • Site search • Social media icons • Ad banners • Fat footers
  15. 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. 16. Example
  17. 17. No Print Styles
  18. 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. 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. 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. 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. 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. 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. 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. 25. Banner • Change any text to print units, • Adjust colors, • Handle spacing, • Make sure you keep the logo. • Consider SVG.
  26. 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. 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. 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. 29. Before (9 pages)
  30. 30. After (2 pages)
  31. 31. Printing from Mobile Android Browser Chrome Firefox
  32. 32. Printing from Mobile Android Browser Chrome Firefox
  33. 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. 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. 35. Chrome Developer Tools
  36. 36. Measuring
  37. 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. 38. Check the Data
  39. 39. Check the Data
  40. 40. Wrap-up, Questions
  41. 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. 42. Making Your Site Printable Presented by Adrian Roselli Slides from this talk will be available at rosel.li/Booster

×