Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Making Your Site Printable: Stir Trek 2013

2 701 vues

Publié le

My presentation at Stir Trek 2013 on best practices for making your site printable. Description from the schedule:
The push for responsive web design has helped web developers consider how the sites they develop can adapt to different devices, including sizes, screen resolutions, and even contexts. It should now be easier than ever to respond to a format that has existed since the start of the web -- print. I'll walk through the process for making your responsive sites respond to the format we most often forget.

Publié dans : Technologie, Design
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Making Your Site Printable: Stir Trek 2013

  1. 1. Making Your Site PrintablePresented by Adrian RoselliMay 17, 2013#StirTrek
  2. 2. About Adrian Roselli• Co-written four books.• Technical editorfor two books.• Written over fiftyarticles, most recentlyfor .net Magazine andWeb Standards Sherpa.#StirTrek
  3. 3. About Adrian Roselli• Member of W3C HTML Working Group, W3CAccessibility Task Force, five W3C CommunityGroups.• Building for the web since 1994.• Founder, owner at Algonquin Studios(AlgonquinStudios.com).• Learn more at AdrianRoselli.com.• Avoid on Twitter @aardrian.#StirTrek
  4. 4. What We’ll Cover#StirTrek
  5. 5. What We’ll Cover• Background• Techniques• Measuring• Future#StirTrek
  6. 6. Background#StirTrek
  7. 7. Responsive Web Design (RWD)• Responsive design (oradaptive design) is aboutsupporting any device:• Desktop computer• Smartphone• Tablet• Television• Printer?#StirTrekPhoto of printed page from http://elliotjaystocks.com/blog/has-adaptive-design-failed-of-course-it-bloody-hasnt/
  8. 8. PrintShame.com• As developers tout their responsive designs,they often forget the printed page.• Support for print styles goes back more than adecade, before RWD.• Used MediaQueri.es as initial seed, thenpicked up from articles, awards, etc.• Hoped shaming might improve state of printstyles.• http://PrintShame.com#StirTrek
  9. 9. PrintShame.com#StirTrekhttp://www.printshame.com/2012/04/2012newadventuresconfcom.html
  10. 10. PrintShame.com#StirTrekSource page: http://2012.newadventuresconf.com/conference/
  11. 11. Maturing (a bit)• Decided the best approach would be teaching.• Used lessons, common issues fromPrintShame to develop tutorial(s).• Pitched this very talk.#StirTrek
  12. 12. Print Services• Add a third-party “print” button to your site.• You have no control over layout.• You have no control over ads.• You have no control.#StirTrek
  13. 13. Print Services#StirTrekhttp://rosel.li/040612 “More Evidence of the Need for Print Styles”
  14. 14. Techniques#StirTrek
  15. 15. Screen versus PrintScreen• Continuous• Visual, audible, tactile• Vector and bitmap• Interactive• OnlinePrint• Paged• Visual• Bitmap• Static• Offline#StirTrek
  16. 16. Planning• Is your site built mobile-first?• Things I want the user to see.• Things the user may not want to see.• Things that probably won’t print anyway.#StirTrek
  17. 17. Planning• Is your site built mobile-first?• Sometimes your mobile-first styles will get younearly all the way there.• If you built desktop-first, you may be able to re-use your smaller viewport styles.#StirTrek
  18. 18. Planning• Things I want the user to see:• Branding• Cross-branding• Page address• Copyright• Link addresses (?)#StirTrek
  19. 19. Planning• Things the user may not want to see:• Primary navigation• Secondary navigation• Site search• Social media icons• Ad banners• Fat footers#StirTrek
  20. 20. Planning• Things that probably won’t print anyway:• Colors• Backgrounds (images and colors)• Bits of timed / interactive elements• White elements (logos, text, effects)#StirTrek
  21. 21. Example Site#StirTrekhttp://AdrianRoselli.com/Bio
  22. 22. Example Site#StirTrekhttp://AdrianRoselli.com/Bio
  23. 23. Example Site#StirTrekhttp://AdrianRoselli.com/Bio
  24. 24. Example Site#StirTrekhttp://algonquinstudios.com/Engage/Careers/DeveloperI
  25. 25. Example Site#StirTrekhttp://algonquinstudios.com/Engage/Careers/DeveloperI
  26. 26. Example Site#StirTrekhttp://algonquinstudios.com/Engage/Careers/DeveloperI
  27. 27. Example Site#StirTrekhttp://buffalosoccerclub.org/about
  28. 28. Example Site#StirTrekhttp://buffalosoccerclub.org/about
  29. 29. Example Site#StirTrekhttp://buffalosoccerclub.org/about
  30. 30. Embedding Print StylesMake 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">#StirTrek
  31. 31. Page RulesThe @page rule allows you to specify pagemargins (CSS 2.1), size and orientation (CSS3). Irecommend you do not use it and defer to userpreferences.@page {margin: 20cm;size: A4 landscape;}#StirTrek
  32. 32. BannerChange the banner text to print units, adjust thecolor so the printer doesn’t replace it with gray.#Banner p#Title {font-size: 24pt;}#Banner p#Title a, #Banner p#Title a:link, #Banner p#Titlea:visited {color: #000;}#StirTrek
  33. 33. NavigationGet rid of the primary, secondary, tertiarynavigation, remove the search box, social medialinks, and other bits that won’t make sensewhen printed.#Nav, #FlyOutNav, #SubNav, .NoPrint, p.CodeAlert,#SMLinks, #SearchForm {display: none;}#StirTrek
  34. 34. BreadcrumbKeep the breadcrumb as a wayfinding method, butreduce its size and remove any links.#Bread a:link, #Bread a:visited {text-decoration: underline;color: #000;}#Bread {color: #000;font-size: 6pt;}#Bread > a:after {content: "";}#StirTrek
  35. 35. FooterShrink the text, keep the search box, handle mycross-branding.#Footer {font-size: 6pt;color: #000;}#SearchForm {display: none;}#Footer img {float: right;}#StirTrek
  36. 36. In-Page LinksSelect links in content container(s) and thendisplay the href value as text after the link.#Content a[href]:after {content: " [" attr(href) "] ";word-wrap: break-word;}#Content a[href^="#"]:after, #Contenta[href^="tel"]:after, #Contenta[href^="mailto"]:after, #Contenta[href^="javascript"]:after {content: "";}#StirTrek
  37. 37. General Styles• Clear whitespace around the content.• User’s print settings will handle page margins.• You shouldn’t need to worry about portrait vs.landscape, A4 vs. 8.5×11, etc.#StirTrek
  38. 38. General Styles• Reset type sizes to points, set text to black.• Your neat, light grey text won’t trigger browseroverrides to convert text to black when printing.• Not all users have color printers. It might be worthsetting your bold red to black so it doesn’t comeout as a medium gray.#StirTrek
  39. 39. General Stylesbody {background: #fff;color: #000;font-size: 8pt;line-height: 150%;margin: 0;}hr {color: #ccc;background-color: #ccc;}h1, h2, h3, h4, h5, h6, code, pre {color: #000;text-transform: none;page-break-after: avoid;}#StirTrek
  40. 40. General Stylesh1 {font-size: 11pt;margin-top: 1em;}h2 {font-size: 10pt;}h3 {font-size: 9pt;}h4, h5, h6 {font-size: 8pt;}img {max-width: 100%;}#StirTrek
  41. 41. General Stylescode, pre {font-size: 8pt;background-color: transparent;}blockquote {background-image: none;}a:link, a:visited {text-decoration: underline;color: #000;}abbr:after, acronym:after {content: " (" attr(title) ") ";}ol, ul, img, table {page-break-inside: avoid;}#StirTrek
  42. 42. General Styles• Write values of title (or alt, or data-*, etc)attributes into the page.• You can do this with most attributes on mostelements, although it might not be a good fit.• Perhaps a data-shortURL attribute to display aminified link address to make it easier for users totype URLs.• A novel way to promote longdesc.#StirTrek
  43. 43. Page BreaksThe CSS properties page-break-before, page-break-after and page-break-inside have thefollowing 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 pageon the left or right, for when you are printing bound material(books, magazines, etc.) (not for page-break-inside).#StirTrek
  44. 44. Widows and OrphansUse these to control how many lines must be atthe end of a page (orphans) or how many at thestart of a page (widows).p {orphans: 3; /* 3 consecutive lines at end of page */widows: 2; /* 2 lines at start of new page */}#StirTrek
  45. 45. Invert LogosFor those rare cases with a white logo whereyou can’t load an alternate image (Chrome &Safari only):Img#Logo {-webkit-filter: invert(100%);filter: invert(100%);}If you can load an alternate, a quick tutorial:http://www.456bereastreet.com/archive/201305/replacing_images_when_printing/#StirTrek
  46. 46. Further Consideration• Hide videos.• Hide Flash movies.• Hide canvas elements.• Don’t scale images to 100% width.#StirTrek
  47. 47. QR Codes• They’re a personal choice.• Allows more savvy users to get directly to thesource of the printed page.• Easy to implement without burdening mobileusers, users who do not print.#StirTrek
  48. 48. Call the QR Code<html><head><style>@media print {header::before { content:url(http://chart.apis.google.com/chart?chs=120x120&cht=qr&chl=http%3A%2F%2Falgonquinstudios.com/Engage/Careers); }}</style></head>#StirTrek
  49. 49. QR Code in Use#StirTrek
  50. 50. Outliers• Sadly, not every devicebehaves.• Samsung Galaxy S4,default Android browser.#StirTrek
  51. 51. Outliers#StirTrek
  52. 52. TEST!• Print to PDF for your first round (or many).• Use every browser you can.• Change paper size.• Change paper orientation.• Scale the content in the print dialog.#StirTrek
  53. 53. Measuring#StirTrek
  54. 54. Google Analytics• Call the GA tracking image, but only when theprint styles get used.• Attach a custom event to that image.• View custom events in Google Analytics.• Make sure that at least those pages print well.#StirTrek
  55. 55. Query String Parameters#StirTrekVariable Descriptionutmac Account String. Appears on all requests. This is your UA-#######-# ID.utmwvTracking code version. While my standard GA requests use 5.4.0, I opted to use 4.3 for reasons I nolonger recall.utmnUnique ID generated for each GIF request to prevent caching of the GIF image. I just concatenate thecurrent year, month, day, hour, minute and second.utmhn Host Name of your site, which is a URL-encoded string.utmr Referral, complete URL. In this case I just insert a dash so it is not blank.utmp Page request of the current page.utmtIndicates the type of request, which is one of: event, transaction, item, or a custom variable. Ifyou leave it blank, it defaults to page. Because I am tracking events, I use event.utme Extensible parameter. This is where you write your event. I use 5(Print*{page address}).utmccCookie values. This request parameter sends all the cookies requested from the page. It can getpretty long. It must be URL encoded. It must include __utma and __utmz values.
  56. 56. Sample Query Stringhttp://www.google-analytics.com/__utm.gif?utmac=UA-1464893-3&utmwv=4.3&utmn=2013326124551&utmhn=algonquinstudios.com&utmr=-&utmp=/Engage/Careers&utmt=event&utme=5%28Print*/Engage/Careers%29&utmcc=__utma%3D267504222.1477743002.1364314722.1364314722.1364314722.1%3B%2B__utmb%3D267504222.17.7.1364314901604%3B%2B__utmz%3D267504222.1364314722.1.1.utmcsr%3D%28direct%29|utmccn%3D%28direct%29|utmcmd%3D%28none%29#StirTrek
  57. 57. Call the Image<html><head><style>@media print {header::after { content: url(http://www.google-analytics.com/__utm.gif?utmac=UA-1464893-3&utmwv=4.3&utmn=2013326124551&utmhn=algonquinstudios.com&utmr=&utmp=/Engage/Careers&utmt=event&utme=5%28Print*/Engage/Careers%29&utmcc=__utma%3D267504222.1477743002.1364314722.1364314722.1364314722.1%3B%2B__utmb%3D267504222.17.7.1364314901604%3B%2B__utmz%3D267504222.1364314722.1.1.utmcsr%3D%28direct%29|utmccn%3D%28direct%29|utmcmd%3D%28none%29);}}</style></head>#StirTrek
  58. 58. Check the Data#StirTrek
  59. 59. Check the Data#StirTrek
  60. 60. Future#StirTrek
  61. 61. Here or on Its Way• Browser support for existing features• Electronic Books• HTML5 as a publishing platform• CSS3, CSS4#StirTrek
  62. 62. Left, Right, First Pages• Use @page rule with pseudo classes to specifyright, left, first:• :right will affect the page on the right.• :left will affect the page on the left.• :first will affect the first page.• :blank will affect the blank pages resulting from forced break.• An @page rule with no pseudo classes appliesto all pages.#StirTrek
  63. 63. Bleed and Crops• The bleed property relies on the cropsproperty having a value.• Bleed specifies how much the page canextend outside the page box:• <length> units, referring to width of page box.• Crop draws marks outside page box:• crop: shows where a page should be cut.• cross: used to align sheets.#StirTrek
  64. 64. Boxes across Pages• The box-decoration-break specifies how abox’s background, margin and border behavewhen broken across pages:• slice: chops the box in two.• clone: duplicates the stylesonto each box.#StirTrek
  65. 65. Page Margin Boxes@page {@bottom-left {content: "Copyright me."}@bottom-right {counter-increment: page;content: "Page " counter(page);}}#StirTrek
  66. 66. Wrap-up#StirTrek
  67. 67. Further Reading• Make your website printable with CSS:http://netm.ag/WA93Xg• Calling QR in Print CSS Only When Needed:http://rosel.li/030813• Tracking When Users Print Pages:http://rosel.li/032613• Tips And Tricks For Print Style Sheets:http://coding.smashingmagazine.com/2013/03/08/tips-tricks-print-style-sheets/• Printing The Web:http://drublic.de/blog/printing-the-web/• CSS Paged Media Level 2:http://www.w3.org/TR/CSS2/page.html• CSS Paged Media Module Level 3:http://www.w3.org/TR/css3-page/• Proposals for the future of CSS Paged Media:http://dev.w3.org/csswg/css-page-4/#StirTrek
  68. 68. Making Your Site PrintablePresented by Adrian RoselliMay 17, 2013#StirTrekYou have just survived…