CSS Summit 2014: Making Your Site Printable

We’re promoting our responsive web designs, but forgetting something that dates back more than a decade before responsive design, says Adrian Roselli, author and vice president at Algonquin Studios.

We’ve created responsive websites, ensuring that the design works across multiple devices, resolutions and contexts, but forgotten to consider print style sheets in our workflow.

In his “Making Your Site Printable” presentation at  CSS Summit 2014, Adrian shared tips for planning and creating print style sheets as well as how to use Google Analytics to track the pages printed from your website.

Here are my notes with some of the backchannel conversation during Adrian’s presentation:

• Responsive web design is about supporting numerous devices, including printers
• If your website is mobile-first, styles will get you almost all the way there [to print styles].
• Mulitiple differences between screen and print: screen is continuous while print is paged, screen is visual/audible/tactile while print is visual, screen supports bitmap and vector while print only supports bitmap, screen is interactive while print is static, screen is online while print is offline
• Web builders spend hours on carousels and maybe one hr on print CSS even though visitors print more than engage a carousel
• Content you want users to see: branding, cross-branding, page address, copyright, path to page (breadcrumbs) and link addresses
• Things users likely won’t want to see in printed page: navigation, site search, social media icons, ad banners, fat footers. Remove them with display: none
• Planning your CSS print styles? Consider what won’t print: background, timed/interactive elements, white elements.
• For in-page links, display the href value as text after the link
• For banners, change text to print units, adjust colors, manage spacing, make sure you keep logo (consider SVG for logo for sharper printing)
• For footers, change text to print units, adjust colors, manage spacing, and remove unneeded content (do you really need to include the image in the footer?). Extend text to the edge.
• Use CSS properties page-break-before, page-break-after, and page-break-inside to manage page breaks
• Hide videos, Flash movies, controls for embedded audio
• Use the CSS property box-decoration-break to specify how boxes display across pages
• Firefox, Chrome, default mobile browser on Android can print from mobile.
• Be sure to test your print style sheets. Print to PDF works well in early rounds of testing. Use Chrome Developer Tools (Emulation > CSS Media > Print). Use every browser visiting your site. Change paper size and paper orientation.
• Want to know which website pages are printed? Track when users print a page.

Don’t miss Adrian’s post with his slidedeck and resources he compiled of his talk.