making your site printable: booster conference
TRANSCRIPT
![Page 1: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/1.jpg)
Making Your Site Printable
Presented by Adrian Roselli
![Page 2: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/2.jpg)
About Adrian Roselli
• Co-written four books.
• Technical editorfor two books.
• Written over fifty articles, most recentlyfor .net Magazine andWeb Standards Sherpa.
Great bedtime reading!
![Page 3: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/3.jpg)
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.
![Page 4: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/4.jpg)
What We’ll Cover
• Background
• Techniques
• Measuring
• Questions
![Page 5: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/5.jpg)
Background
![Page 6: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/6.jpg)
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/
![Page 7: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/7.jpg)
PrintShame.com
http://www.printshame.com/2012/06/foundationzurbcom.html
![Page 8: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/8.jpg)
PrintShame.com
Source page: http://foundation.zurb.com/docs/components/grid.html
![Page 9: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/9.jpg)
Print Services
http://rosel.li/040612 “More Evidence of the Need for Print Styles”
![Page 10: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/10.jpg)
Techniques
![Page 11: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/11.jpg)
Screen versus Print
Screen
• Continuous
• Visual, audible, tactile
• Vector and bitmap
• Interactive
• Online
• Paged
• Visual
• Bitmap
• Static
• Offline
![Page 12: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/12.jpg)
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.
![Page 13: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/13.jpg)
Planning
• Things I want the user to see:
• Branding
• Cross-branding
• Page address
• Copyright
• Path to page (breadcrumb)
• Link addresses (?)
![Page 14: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/14.jpg)
Planning
• Things the user may not want to see:
• Primary navigation
• Secondary navigation
• Site search
• Social media icons
• Ad banners
• Fat footers
![Page 15: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/15.jpg)
Planning
• Things that probably won’t print anyway:
• Colors
• Backgrounds (images and colors)
• Bits of timed / interactive elements
• White elements (logos, text, effects)
![Page 16: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/16.jpg)
Example
![Page 17: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/17.jpg)
No Print Styles
![Page 18: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/18.jpg)
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">
![Page 19: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/19.jpg)
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).
![Page 20: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/20.jpg)
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.
![Page 21: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/21.jpg)
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.
![Page 22: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/22.jpg)
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!
![Page 23: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/23.jpg)
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;
}
![Page 24: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/24.jpg)
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: "";
}
![Page 25: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/25.jpg)
Banner
• Change any text to print units,
• Adjust colors,
• Handle spacing,
• Make sure you keep the logo.
• Consider SVG.
![Page 26: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/26.jpg)
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;
}
![Page 27: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/27.jpg)
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).
![Page 28: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/28.jpg)
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.
![Page 29: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/29.jpg)
Before (9 pages)
![Page 30: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/30.jpg)
After (2 pages)
![Page 31: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/31.jpg)
Printing from Mobile
Android Browser Chrome Firefox
![Page 32: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/32.jpg)
Printing from Mobile
Android Browser Chrome Firefox
![Page 33: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/33.jpg)
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
![Page 34: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/34.jpg)
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.
![Page 35: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/35.jpg)
Chrome Developer Tools
![Page 36: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/36.jpg)
Measuring
![Page 37: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/37.jpg)
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
![Page 38: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/38.jpg)
Check the Data
![Page 39: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/39.jpg)
Check the Data
![Page 40: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/40.jpg)
Wrap-up, Questions
![Page 41: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/41.jpg)
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/
![Page 42: Making Your Site Printable: Booster Conference](https://reader030.vdocuments.site/reader030/viewer/2022020307/55a517ba1a28abd77f8b4735/html5/thumbnails/42.jpg)
Making Your Site Printable
Presented by Adrian RoselliSlides from this talk will be available at rosel.li/Booster