CSS Summit 2014 Slides: Making Your Site Printable
This afternoon I awkwardly stumbled through my talk for CSS Summit, Making Your Site Printable. I can tell you that speaking to a screen instead of to a room full of people is a whole different experience than I was expecting. Fortunately for you I do not have an audio/video recording. I do however, have all the slides.
Slides
Making Your Site Printable: CSS Summit 2014
Links
Links to resources referenced in the slides (in the order they appear):
- PrintShame and the Zurb print styles update (June 27, 2014).
- More Evidence of the Need for Print Styles, April 6, 2012.
- The example page/site from my slides (which may go away once our next site design comes out).
- Replacing images when printing, May 14, 2013.
- Printing from Mobile Has Improved, June 30, 2014.
- Tracking When Users Print Pages, March 26, 2013.
- Tracking Printed Pages (or How to Validate Assumptions), December 11, 2013.
- Make your website printable with CSS, posted online March 5, 2013.
- Calling QR in Print CSS Only When Needed, March 8, 2013.
- Tracking When Users Print Pages, March 26, 2013.
- Tips And Tricks For Print Style Sheets, March 8, 2013.
- Printing The Web, March 25, 2013.
- CSS Paged Media Level 2
- CSS Paged Media Module Level 3
- Proposals for the future of CSS Paged Media
- Can you typeset a book with CSS?
Ticket Giveaway
I’d like to note that thanks to the generosity of CSS Summit, I was provided with two tickets to today’s talks that I could give away as I saw fit. I opted to offer them to two deserving young women from the Buffalo chapter of Girl Develop It (neither heckled me):
Congrats to @gdiBuffalo attendees @dennrodriguez & Elizabeth Canas for winning tickets to tomorrow's #CSSSummit. Perhaps they'll heckle me.
— Adrian Roselli (@aardrian) July 14, 2014Good luck with your talk @aardrian! Thanks again for giving away two tickets to #CSSSummit ! #womenwhocode #buffalo
— Girl Develop It Bflo (@gdiBuffalo) July 15, 2014The Twitters
Finally, one of the novel things about an online conference is that attendees seem to be more active on Twitter. I got feedback and questions, and even fielded a few sub-tweets (I happen to know the print styles aren’t glamorous, but most of the fundamentals aren’t). I’ve collected and embedded the tweets:
My view of the #CSSSummit audience right before I spoke. Quieter than meat space. Yes, that is a fur lamp (left). http://t.co/WeTdn71ZdM
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
As people promote their responsive web designs, they forgot their print styles. Oops. See http://t.co/DESg3cgfIU. #CSSsummit
— Deborah Edwards-Onoro (@redcrew) July 15, 2014
http://t.co/OZlV6YWzCX is awesome — websites with great responsive design and no print styles. Good work @aardrian. #CSSsummit
— Ivan Boothe (@rootwork) July 15, 2014
How many of you take the time to create a quality print style sheet? #csssummit @aardrian
— Kenzey B (@WebQ2) July 15, 2014
"If your website is mobile-first, styles will get you almost all the way there [to print styles]." Win! @aardrian #CSSsummit
— Ivan Boothe (@rootwork) July 15, 2014
Gallery of #RWD sites with poor print style sheet support by @aardrian – http://t.co/dVV3dtyeN9 #csssummit
— Christopher Schmitt (@teleject) July 15, 2014
Planning your CSS print styles? Consider what won't print: background, timed/interactive elements, white elements. #CSSsummit
— Deborah Edwards-Onoro (@redcrew) July 15, 2014
#csssummit "I admit to having lied to co-workers that our printer was broken – to force them to consider what they were printing."
— Martina Freundorfer (@heartbeaz) July 15, 2014
CSS print styles: for links on page, display href value as text after link. Include word-wrap: break-word. #CSSsummit
— Deborah Edwards-Onoro (@redcrew) July 15, 2014
Print stylesheets are like the perfect use case for all the html/css attributes I've wondered who would ever use. #csssummit
— Than (@GoldenApples) July 15, 2014
Pro-tip for print styles: "Don't scale images to 100% width. (Looking at you, mobile styles and frameworks." —@aardrian #CSSsummit
— Ivan Boothe (@rootwork) July 15, 2014
What else to remove from CSS print styles? Videos, controls for embedded audio, and Flash movies. —@aardrian #CSSsummit
— Deborah Edwards-Onoro (@redcrew) July 15, 2014
Nice technique: Including in print media query a Google Charts QR code at the top of the printed page. —@aardrian #CSSsummit
— Ivan Boothe (@rootwork) July 15, 2014
Whoa. Firefox, Chrome, default mobile browser on Android can print from mobile. #csssummit pic.twitter.com/ZoPTHVg5rd
— Deborah Edwards-Onoro (@redcrew) July 15, 2014
Web builders spend hours on carousels & maybe 1 hr on print CSS even though visitors print more than engage a carousel —@aardrian #CSSsummit
— Christopher Schmitt (@teleject) July 15, 2014
Track when users print your pages: http://t.co/G2AItKllzQ via @aardrian #csssummit
— John Dezember (@johndezember) July 15, 2014
People who print pages-> more engaged with your content. Perhaps do something more with that content? ~ @aardrian #CSSsummit
— Deborah Edwards-Onoro (@redcrew) July 15, 2014
Tipp: Print in Google Analytics tracken. Denn Print CSS lohnt sich, weil Leute eher drucken, als sich zB Slider anzusehen. #csssummit
— Kerschtindel 🇪🇺 (@Kerschtindel) July 15, 2014
Love you speak @Adrian Roselli about print styles at #CssSummit. This is very handy for my current project :)
— Morten Kirstein (@Mortenkirstein) July 15, 2014
Let's be honest here, print styles are not -that- exciting. #CSSsummit
— Net Oldtrality (@tahini) July 15, 2014
You lost me at QR Code. #csssummit
— Jeff [TSD] (@leisure) July 15, 2014
@leisure I actually thought that was an awesome use of QR codes… first useful QR code hack I've seen in a long time. #csssummit
— Than (@GoldenApples) July 15, 2014
@aardrian Thank you for your presentation on CSS print styles. I learned all kinds of new methods. #CSSsummit
— Deborah Edwards-Onoro (@redcrew) July 15, 2014
#CSSSummit attendees, thanks! Just getting back to Twitter, feel free to ask more questions. Sorry if I was too loud / too fast.
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
@GoldenApples I’m of the No QR code is useful mindset. #csssummit
— Jeff [TSD] (@leisure) July 15, 2014
@oompt until you build an online ticketing site & they want to print tickets from the site… :) (also – tix are good use case for QR codes)
— Jason Pamental (@jpamental) July 15, 2014
@teleject @clarklab Also some more measuring context at http://t.co/P429AJNEln Thanks!
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
@jpamental Print styles and QR codes! This party is getting out of hand, guys.
— Net Oldtrality (@tahini) July 15, 2014
@oompt DAMN STRAIGHT! #itsaprintstyleqrcodebonanza #csssummit #raveon w00t!
— Jason Pamental (@jpamental) July 15, 2014
@clarklab No. I found none. Nobody was measuring as no-one knew how or cared. As far as I know, mine was first technique. @teleject
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
@clarklab I'd suggest throwing it on your site and sitting back and waiting for the meager data points to trickle in. @teleject
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
RT @oompt: Let's be honest here, print styles are not -that- exciting. #CSSsummit
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
RT @leisure: You lost me at QR Code. #csssummit
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
Thanks! RT @rootwork: http://t.co/4ycBH81CKH awesome—websites with great responsive design, no print styles. Good work @aardrian. #CSSsummit
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
@redcrew Glad you found it useful! Hard to gauge a room and I can't see, especially in full panic.
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
@zairon87 Thanks! I'm looking forward to margin content as well, mostly to insert terrible puns on a serious page.
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
@FryOakley The fact that you have any is a huge step. Thanks for the feedback!
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
@WebQ2 Thanks for the feedback. Glad I didn't pound a coffee before the talk, would have been *much* louder and faster.
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
Print Style Sheets, are like referees & umpires they shouldn't interrupt the UX, but they're a vital piece to any site @aardrian #csssummit
— Kenzey B (@WebQ2) July 15, 2014
I buy that. RT @WebQ2: Print styles are like referees & umpires they shouldn't interrupt UX, but they're vital piece to any site #csssummit
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
@redcrew Thanks. Much appreciated.
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
@GoldenApples Thanks! @leisure FWIW, in real life I lose half the room when I mention QR codes.
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
I throw the best (worst) parties. #CSSSummit
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
RT @oompt: @jpamental Print styles and QR codes! This party is getting out of hand, guys.
@aardrian @GoldenApples makes sense. Having to download an app to scan something makes me cry tears of sad.
— Jeff [TSD] (@leisure) July 15, 2014
@leisure Yeah, I agree with you. At least more and more phones have QR scanners pre-installed, Opera Mini as well. @GoldenApples
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
@aardrian @leisure I figure the only thing worse than having to open a barcode app is trying to type an address into my phone's location bar
— Than (@GoldenApples) July 15, 2014
@dixonge @aardrian People with printers that need things printed from the web. On paper.
— Christopher Schmitt (@teleject) July 15, 2014
@dixonge IME on my and client sites, more than use carousels. Run your own numbers, you may be surprised: http://t.co/P429AJNEln @teleject
— Adrian Roselli 🗯 (@aardrian) July 15, 2014
Update: July 21, 2014
Based on the activity from these two tweets alone, I am really hopeful that web developers are starting to see that print styles have value and belong in a responsive workflow. Only time will tell. The tweets:
So let's build a good print stylesheet for a website. A nice slide deck by @aardrian. http://t.co/TJW7uvu99z
— Smashing Magazine (@smashingmag) July 19, 2014Web builders spend hours on carousels & maybe 1 hr on print CSS even though visitors print more than engage a carousel —@aardrian #CSSsummit
— Christopher Schmitt (@teleject) July 15, 2014
Leave a Comment or Response