Making Your
Site Printable
Presented by Adrian Roselli
September 14, 2013, WordCamp Buffalo
#wcbuf
Making Your
Site Printable
Presented by Adrian Roselli
September 14, 2013, WordCamp Buffalo
#wcbuf
Photo (and notes) of La...
About Adrian Roselli
• Co-written four books.
• Technical editor
for two books.
• Written over fifty
articles, most recent...
About Adrian Roselli
• Member of W3C HTML Working Group, W3C
Accessibility Task Force, five W3C Community
Groups.
• Buildi...
What We’ll Cover
#wcbuf
What We’ll Cover
• Background
• Techniques
• Measuring
• Future
• Questions (ongoing!)
#wcbuf
Background
#wcbuf
Responsive Web Design (RWD)
• Responsive design (or
adaptive design) is about
supporting any device:
• Desktop computer
• ...
PrintShame.com
• As developers tout their responsive designs,
they often forget the printed page.
• Support for print styl...
PrintShame.com
#wcbufhttp://www.printshame.com/2013/09/generateconfcom.html
PrintShame.com
#wcbufSource page: http://www.generateconf.com/schedule/
Maturing (a bit)
• Decided the best approach would be teaching.
• Used lessons, common issues from
PrintShame to develop t...
Print Services
• Add a third-party “print” button to your site.
• You have no control over layout.
• You have no control o...
Print Services
#wcbufhttp://rosel.li/040612 “More Evidence of the Need for Print Styles”
Techniques
#wcbuf
Screen versus Print
Screen
• Continuous
• Visual, audible, tactile
• Vector and bitmap
• Interactive
• Online
Print
• Page...
Planning
• Is my site built mobile-first?
• Things I want the user to see.
• Things the user may not want to see.
• Things...
Planning
• Is my site built mobile-first?
• Sometimes your mobile-first styles will get you
nearly all the way there.
• If...
Planning
• Things I want the user to see:
• Branding
• Cross-branding
• Page address
• Copyright
• Path to page (breadcrum...
Planning
• Things the user may not want to see:
• Primary navigation
• Secondary navigation
• Site search
• Social media i...
Planning
• Things that probably won’t print anyway:
• Colors
• Backgrounds (images and colors)
• Bits of timed / interacti...
Example Site
#wcbufhttp://AdrianRoselli.com/Bio
Example Site
#wcbufhttp://AdrianRoselli.com/Bio
Example Site
#wcbufhttp://AdrianRoselli.com/Bio
Example Site
#wcbufhttp://algonquinstudios.com/Engage/Careers/DeveloperI
Example Site
#wcbufhttp://algonquinstudios.com/Engage/Careers/DeveloperI
Example Site
#wcbufhttp://algonquinstudios.com/Engage/Careers/DeveloperI
Example Site
#wcbufhttp://buffalosoccerclub.org/about
Example Site
#wcbufhttp://buffalosoccerclub.org/about
Example Site
#wcbufhttp://buffalosoccerclub.org/about
Embedding Print Styles
Make a home for your print styles:
@media print {
/* insert your style declarations here */
}
Or:
<...
Page Rules
The @page rule allows you to specify page
margins (CSS 2.1), size and orientation (CSS3).
@page {
margin: 20cm;...
Banner
Change the banner text to print units, adjust the
color so the printer doesn’t replace it with gray.
#Banner p#Titl...
Navigation
Get rid of the primary, secondary, tertiary
navigation, remove social media links, and other
bits that won’t ma...
Breadcrumb
Keep the breadcrumb as a wayfinding method, but
reduce its size and remove any links.
#Bread a:link, #Bread a:v...
Footer
Shrink the text, remove the search box, handle
my cross-branding.
#Footer {
font-size: 6pt;
color: #000;
}
#SearchF...
In-Page Links
Select links in content container(s) and then
display the href value as text after the link.
#Content a[href...
General Styles
• Clear whitespace around the content.
• User’s print settings will handle page margins.
• Let’s user get a...
General Styles
• Reset type sizes to points, set text to black.
• Points (mostly) provide more consistent text size
across...
General Styles
body {
background: #fff;
color: #000;
font-size: 8pt;
line-height: 150%;
margin: 0;
}
hr {
color: #ccc;
bac...
General Styles
h1 {
font-size: 11pt;
margin-top: 1em;
}
h2 {
font-size: 10pt;
}
h3 {
font-size: 9pt;
}
h4, h5, h6 {
font-s...
General Styles
code, pre {
font-size: 8pt;
background-color: transparent;
}
blockquote {
background-image: none;
}
a:link,...
General Styles
• Write values of title (or alt, or data-*, etc.)
attributes into the page.
• Think @cite on blockquote, or...
Page Breaks
The CSS properties page-break-before, page-
break-after and page-break-inside have the
following values:
• aut...
Widows and Orphans
Use these to control how many lines must be at
the end of a page (orphans) or how many at the
start of ...
Invert Logos
For those rare cases with a white logo where
you can’t load an alternate image (Chrome &
Safari only):
Img#Lo...
Further Consideration
• Hide videos.
• Hide controls for embedded audio.
• Hide Flash movies.
• Hide canvas elements (assu...
QR Codes
• They’re a personal (lifestyle) choice.
• Allows more savvy users to get directly to the
source of the printed p...
Call the QR Code
<html>
<head>
<style>
@media print {
header::before { content:
url(http://chart.apis.google.com/chart?chs...
QR Code in Use
#wcbuf
Outliers
• Sadly, not every device
behaves.
• Samsung Galaxy S4,
default Android browser.
#wcbuf
Outliers
#wcbuf
TEST!
• Print to PDF for your first (most) rounds.
• Use every browser you can.
• At very least, use every browser that vi...
Measuring
#wcbuf
Google Analytics
• Call the GA tracking image, but only when the
print styles get used.
• Attach a custom event to that im...
Query String Parameters
#wcbuf
Variable Description
utmac Account String. Appears on all requests. This is your UA-#######...
Sample Query String
http://www.google-analytics.com/__utm.gif
?utmac=UA-1464893-3
&utmwv=4.3
&utmn=2013326124551
&utmhn=al...
Call the Image
<html>
<head>
<style>
@media print {
header::after { content: url(http://www.google-
analytics.com/__utm.gi...
Check the Data
#wcbuf
Check the Data
#wcbuf
Future
#wcbuf
Here or on Its Way
• Browser support for existing features.
• Electronic Books.
• HTML5 as a publishing platform.
• CSS3, ...
Left, Right, First Pages
• Use @page rule with pseudo classes to specify
right, left, first:
• :right will affect the page...
Bleed and Crops
• The bleed property relies on the crops
property having a value.
• Bleed specifies how much the page can
...
Boxes across Pages
• The box-decoration-break specifies how a
box’s background, margin and border behave
when broken acros...
Page Margin Boxes
@page {
@bottom-left {
content: "Copyright me."
}
@bottom-right {
counter-increment: page;
content: "Pag...
Wrap-up, Questions
#wcbuf
Further Reading
• Make your website printable with CSS:
http://netm.ag/WA93Xg
• Calling QR in Print CSS Only When Needed:
...
Making Your
Site Printable
Presented by Adrian Roselli
September 14, 2013, WordCamp Buffalo
#wcbuf
Thanks for staying! Tel...
Upcoming SlideShare
Loading in …5
×

Making your site printable: WordCamp Buffalo 2013

4,021 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,021
On SlideShare
0
From Embeds
0
Number of Embeds
1,235
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Making your site printable: WordCamp Buffalo 2013

  1. 1. Making Your Site Printable Presented by Adrian Roselli September 14, 2013, WordCamp Buffalo #wcbuf
  2. 2. Making Your Site Printable Presented by Adrian Roselli September 14, 2013, WordCamp Buffalo #wcbuf Photo (and notes) of Lafayette Square (1905) available at Shorpy: http://www.shorpy.com/node/12193
  3. 3. 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. #wcbuf
  4. 4. 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. #wcbuf
  5. 5. What We’ll Cover #wcbuf
  6. 6. What We’ll Cover • Background • Techniques • Measuring • Future • Questions (ongoing!) #wcbuf
  7. 7. Background #wcbuf
  8. 8. Responsive Web Design (RWD) • Responsive design (or adaptive design) is about supporting any device: • Desktop computer • Smartphone • Tablet • Television • Printer? #wcbufPhoto of printed page from http://elliotjaystocks.com/blog/has-adaptive-design-failed-of-course-it-bloody-hasnt/
  9. 9. PrintShame.com • As developers tout their responsive designs, they often forget the printed page. • Support for print styles goes back more than a decade, before RWD. • Used MediaQueri.es as initial seed, then picked up from articles, awards, etc. • Hoped shaming might improve state of print styles. • http://PrintShame.com #wcbuf
  10. 10. PrintShame.com #wcbufhttp://www.printshame.com/2013/09/generateconfcom.html
  11. 11. PrintShame.com #wcbufSource page: http://www.generateconf.com/schedule/
  12. 12. Maturing (a bit) • Decided the best approach would be teaching. • Used lessons, common issues from PrintShame to develop tutorial(s). • Pitched this very talk. #wcbuf
  13. 13. 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. #wcbuf
  14. 14. Print Services #wcbufhttp://rosel.li/040612 “More Evidence of the Need for Print Styles”
  15. 15. Techniques #wcbuf
  16. 16. Screen versus Print Screen • Continuous • Visual, audible, tactile • Vector and bitmap • Interactive • Online Print • Paged • Visual • Bitmap • Static • Offline #wcbuf
  17. 17. Planning • Is my 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. #wcbuf
  18. 18. 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. #wcbuf
  19. 19. Planning • Things I want the user to see: • Branding • Cross-branding • Page address • Copyright • Path to page (breadcrumb) • Link addresses (?) #wcbuf
  20. 20. Planning • Things the user may not want to see: • Primary navigation • Secondary navigation • Site search • Social media icons • Ad banners • Fat footers #wcbuf
  21. 21. Planning • Things that probably won’t print anyway: • Colors • Backgrounds (images and colors) • Bits of timed / interactive elements • White elements (logos, text, effects) #wcbuf
  22. 22. Example Site #wcbufhttp://AdrianRoselli.com/Bio
  23. 23. Example Site #wcbufhttp://AdrianRoselli.com/Bio
  24. 24. Example Site #wcbufhttp://AdrianRoselli.com/Bio
  25. 25. Example Site #wcbufhttp://algonquinstudios.com/Engage/Careers/DeveloperI
  26. 26. Example Site #wcbufhttp://algonquinstudios.com/Engage/Careers/DeveloperI
  27. 27. Example Site #wcbufhttp://algonquinstudios.com/Engage/Careers/DeveloperI
  28. 28. Example Site #wcbufhttp://buffalosoccerclub.org/about
  29. 29. Example Site #wcbufhttp://buffalosoccerclub.org/about
  30. 30. Example Site #wcbufhttp://buffalosoccerclub.org/about
  31. 31. Embedding 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"> #wcbuf
  32. 32. Page Rules The @page rule allows you to specify page margins (CSS 2.1), size and orientation (CSS3). @page { margin: 20cm; size: A4 landscape; } I recommend you do not use it and defer to user preferences. #wcbuf
  33. 33. Banner Change the banner text to print units, adjust the color 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#Title a:visited { color: #000; } #wcbuf
  34. 34. Navigation Get rid of the primary, secondary, tertiary navigation, remove social media links, and other bits that won’t make sense when printed. #Nav, #FlyOutNav, #SubNav, .NoPrint, p.CodeAlert, #SMLinks, { display: none; } #wcbuf
  35. 35. Breadcrumb Keep the breadcrumb as a wayfinding method, but reduce 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: ""; } #wcbuf
  36. 36. Footer Shrink the text, remove the search box, handle my cross-branding. #Footer { font-size: 6pt; color: #000; } #SearchForm { display: none; } #Footer img { float: right; } #wcbuf
  37. 37. 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! #wcbuf
  38. 38. General Styles • Clear whitespace around the content. • User’s print settings will handle page margins. • Let’s 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. #wcbuf
  39. 39. 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). #wcbuf
  40. 40. General Styles body { 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; } #wcbuf
  41. 41. General Styles h1 { font-size: 11pt; margin-top: 1em; } h2 { font-size: 10pt; } h3 { font-size: 9pt; } h4, h5, h6 { font-size: 8pt; } img { max-width: 100%; } #wcbuf
  42. 42. General Styles code, 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; } #wcbuf
  43. 43. 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. #wcbuf
  44. 44. 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). #wcbuf
  45. 45. Widows and Orphans Use these to control how many lines must be at the end of a page (orphans) or how many at the start of a page (widows). p { orphans: 3; /* 3 consecutive lines at end of page */ widows: 2; /* 2 lines at start of new page */ } Because widows and orphans are confusing: http://en.wikipedia.org/wiki/Widows_and_orphans #wcbuf
  46. 46. Invert Logos For those rare cases with a white logo where you 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/ #wcbuf
  47. 47. Further Consideration • Hide videos. • Hide controls for embedded audio. • Hide Flash movies. • Hide canvas elements (assuming interactive). • Don’t scale images to 100% width. • Determine if ads should be printed or not. #wcbuf
  48. 48. QR Codes • They’re a personal (lifestyle) choice. • Allows more savvy users to get directly to the source of the printed page. • Easy to implement without burdening mobile users, users who do not print. #wcbuf
  49. 49. 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> #wcbuf
  50. 50. QR Code in Use #wcbuf
  51. 51. Outliers • Sadly, not every device behaves. • Samsung Galaxy S4, default Android browser. #wcbuf
  52. 52. Outliers #wcbuf
  53. 53. TEST! • Print to PDF for your first (most) rounds. • Use every browser you can. • At very least, use every browser that visits your site. • Change paper size (8.5″ × 11″, A4, etc.). • Change paper orientation. • Scale the content in the print dialog. #wcbuf
  54. 54. Measuring #wcbuf
  55. 55. 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. • Compare to your carousel. #wcbufFull tutorial: http://rosel.li/032613
  56. 56. Query String Parameters #wcbuf Variable Description utmac Account String. Appears on all requests. This is your UA-#######-# ID. utmwv Tracking code version. While my standard GA requests use 5.4.0, I opted to use 4.3 for reasons I no longer recall. utmn Unique ID generated for each GIF request to prevent caching of the GIF image. I just concatenate the current 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. utmt Indicates the type of request, which is one of: event, transaction, item, or a custom variable. If you 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}). utmcc Cookie values. This request parameter sends all the cookies requested from the page. It can get pretty long. It must be URL encoded. It must include __utma and __utmz values.
  57. 57. Sample Query String 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%3 B%2B__utmz%3D267504222.1364314722.1.1.utmcsr%3D%28direct%2 9|utmccn%3D%28direct%29|utmcmd%3D%28none%29 #wcbuf
  58. 58. 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*/Enga ge/Careers%29&utmcc=__utma%3D267504222.1477743002.13643147 22.1364314722.1364314722.1%3B%2B__utmb%3D267504222.17.7.13 64314901604%3B%2B__utmz%3D267504222.1364314722.1.1.utmcsr% 3D%28direct%29|utmccn%3D%28direct%29|utmcmd%3D%28none%29); } } </style> </head> #wcbuf
  59. 59. Check the Data #wcbuf
  60. 60. Check the Data #wcbuf
  61. 61. Future #wcbuf
  62. 62. Here or on Its Way • Browser support for existing features. • Electronic Books. • HTML5 as a publishing platform. • CSS3, CSS4. #wcbuf
  63. 63. Left, Right, First Pages • Use @page rule with pseudo classes to specify right, 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 applies to all pages. #wcbuf
  64. 64. Bleed and Crops • The bleed property relies on the crops property having a value. • Bleed specifies how much the page can extend 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. #wcbuf
  65. 65. Boxes across Pages • The box-decoration-break specifies how a box’s background, margin and border behave when broken across pages: • slice: chops the box in two. • clone: duplicates the styles onto each box. #wcbuf
  66. 66. Page Margin Boxes @page { @bottom-left { content: "Copyright me." } @bottom-right { counter-increment: page; content: "Page " counter(page); } } #wcbuf
  67. 67. Wrap-up, Questions #wcbuf
  68. 68. 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/ • Can you typeset a book with CSS? http://www.w3.org/Talks/2013/0604-CSS-Tokyo/ #wcbuf
  69. 69. Making Your Site Printable Presented by Adrian Roselli September 14, 2013, WordCamp Buffalo #wcbuf Thanks for staying! Tell your friends! Photo (and notes) of Lafayette Square (1905) available at Shorpy: http://www.shorpy.com/node/12193

×