Making Your Site Printable

Presented by Adrian Roselli

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!

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.

What We’ll Cover

• Background

• Techniques

• Measuring

• Questions

Background

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/

PrintShame.com

http://www.printshame.com/2012/06/foundationzurbcom.html

PrintShame.com

Source page: http://foundation.zurb.com/docs/components/grid.html

Print Services

http://rosel.li/040612 “More Evidence of the Need for Print Styles”

Techniques

Screen versus Print

Screen

• Continuous

• Visual, audible, tactile

• Vector and bitmap

• Interactive

• Online

Print

• Paged

• Visual

• Bitmap

• Static

• Offline

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.

Planning

• Things I want the user to see:

• Branding

• Cross-branding

• Page address

• Copyright

• Path to page (breadcrumb)

• Link addresses (?)

Planning

• Things the user may not want to see:

• Primary navigation

• Secondary navigation

• Site search

• Social media icons

• Ad banners

• Fat footers

Planning

• Things that probably won’t print anyway:

• Colors

• Backgrounds (images and colors)

• Bits of timed / interactive elements

• White elements (logos, text, effects)

Example

No Print Styles

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">

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).

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.

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.

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!

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;

}

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: "";

}

Banner

• Change any text to print units,

• Adjust colors,

• Handle spacing,

• Make sure you keep the logo.

• Consider SVG.

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 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).

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.

Before (9 pages)

After (2 pages)

Printing from Mobile

Android Browser Chrome Firefox

Printing from Mobile

Android Browser Chrome Firefox

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

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.

Chrome Developer Tools

Measuring

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

Check the Data

Check the Data

Wrap-up, Questions

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/

Making Your Site Printable

Presented by Adrian RoselliSlides from this talk will be available at rosel.li/Booster