2. 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.
Great bedtime reading!
3. 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.
6. 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/
12. 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.
13. Planning
⢠Things I want the user to see:
⢠Branding
⢠Cross-branding
⢠Page address
⢠Copyright
⢠Path to page (breadcrumb)
⢠Link addresses (?)
14. Planning
⢠Things the user may not want to see:
⢠Primary navigation
⢠Secondary navigation
⢠Site search
⢠Social media icons
⢠Ad banners
⢠Fat footers
15. Planning
⢠Things that probably wonât print anyway:
⢠Colors
⢠Backgrounds (images and colors)
⢠Bits of timed / interactive elements
⢠White elements (logos, text, effects)
18. 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">
19. 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).
20. 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.
21. 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.
22. 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!
23. 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;
}
24. 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: "";
}
25. Banner
⢠Change any text to
print units,
⢠Adjust colors,
⢠Handle spacing,
⢠Make sure you keep
the logo.
⢠Consider SVG.
27. 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).
28. 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.
33. 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
34. 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.
37. 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
41. 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/
42. Making Your Site Printable
Presented by Adrian Roselli
Slides from this talk will be available at rosel.li/Booster