My Presentation Slides: Making Your Site Printable

On Friday, May 17 I had the pleasure of speaking for the first time at Stir Trek, a one-day conference in Columbus, Ohio, that drew over 1,200 attendees (and I understand sold out in just a few minutes). Apparently the name is a reference to the MIX developer conference, for which they were unable to obtain license to use a variation on the name.

I also had the pleasure of presenting for the first time on best practices for making your web site printable, built from my own professional experience, my PrintShame site, and an article I wrote for .net Magazine, among other resources (also linked in the presentation).

With 40 great speakers across 8 different tracks, there was quite a lot on offer throughout the day. Considering the other presentations held at the same time as mine, I was thrilled to get any audience and more excited to see that those who attended saw value in the topic and asked great questions throughout.

As promised in the session, I have made my slides available online via SlideShare and embedded them here:

Well after the talk I got even more questions and feedback on the session, which I truly appreciated. Since there is no official survey for attendees to give feedback on a speaker, I am hoping any attendees will feel comfortable tweeting about it or leaving a comment here. So far I have gotten one great bit of feedback on Twitter:

Lest anyone think I'm just terminally negative, @aardrian had a REALLY GOOD talk on accessibility. And printability.

— David Longshore (@DavidLongshore) May 17, 2013

(I worked in some accessibility tips during my presentation.)

All other feedback is welcome (including if I was loud enough when the lavalier microphone failed).

While in Columbus I also had the pleasure of having a nice dinner (I arrived too late to make the speaker dinner), visiting the North Market, and, as part of the conference, getting to see a double feature of Iron Man 3 and Star Trek: Into Darkness. All around a good time which I look forward to repeating next year.

Calling QR in Print CSS Only When Needed

For those of us who put together print styles for our sites, we've probably tossed around the idea of embedding QR codes so that users can quickly get back to a page they have printed. In the hardcopy version of my article for .net Magazine, "Make your website printable with CSS," I show how you can embed QR codes in your page (it's not included in the online version).

In my example I use the Google Charts API to generate the QR code on the fly. The problem in my example is that the QR code image gets called whether or not you print the page. Not only is this an additional HTTP request, it's also an additional download that immediately gets hidden. This puts a bandwidth burden on users who aren't printing, but it's also the only way to support your users on Internet Explorer 8 and below (who may be the ones trapped at the office who want to bring the document home).

If you truly have no IE8 or below users, then the less bandwidth-hoggy approach is rather simple, if a bit inelegant.

Since each call to the Google Charts API to get the QR code must include the full address of the page, I cannot leave this to my linked CSS file (which is static, not run through any server-side processing), nor would I want to push every URL for every page of my site into that file. Initially I wanted to use a data- attribute to hold the URL and then, using the generated content feature of CSS, have it take that value and feed it into the content: CSS declaration to have it generate the image from there. Except that's not how CSS works. You cannot use CSS to generate an image from a CSS variable.

The easiest solution is to a put a style block at the top of your page (something I hate doing) and feed the current page's URL into the Google Chart API query string to dynamically draw the image. The rest of the styles that affect placement, spacing, etc. should all be in your print stylesheet already. The example:

@media print {
  header::before
    { content: url(http://chart.apis.google.com/chart?chs=120x120&cht=qr&chl=http%3A%2F%2Falgonquinstudios.com/Engage/Careers); }
}

That's it. Now when (and only when) you call the print styles, the image will load. As proof, here is a screen shot using HTTPFox showing the page before the print styles were called and after, where you can clearly see the QR code is called only when the print styles are fired.

Screen shots of the list of HTTP requests before and after the print styles were fired. You can click / tap to see the full-size image.

Screen shot of the print preview with the generated QR code in place.

Note: This technique will not work in any version of Internet Explorer that doesn't support CSS generated content, which includes IE 8 and below. Internet Explorer 9 and above happily include the QR code generated with this method.

Update: March 26, 2013

I build on this technique to show you how you can use Google Analytics to track which and when pages of your site are printed: Tracking When Users Print Pages.

Find QR Code Mistakes Before Making Your Own

The local AAF chapter here in Buffalo, Advertising Club of Buffalo, presented a primer on social media in its monthly AdLab event a couple nights ago. At the request of members, QR codes made an appearance on the topic list at the end of the presentation. While I could discuss the curious association QR codes seem to have with social media, that's outside the scope of what I want to discuss.

Technology issues aside, the presenters tried to explain to attendees that QR codes themselves are a call to action, and just as any call to action you have to be prepared to support it. One audience member suggested that just sending someone to a web site was a bad idea, another tweeted that they should be ignored:

In general, I think the crowd missed the point. And I think that's ok. If they don't immediately see the value of a QR code then they probably haven't identified a business case where it applies. I haven't identified a business case for a blimp for my business, so I can pretty much forget about blimps. I think we can all agree that's a safe way for me to go.

I have written about uses for QR codes before, but after my experience on Tuesday I am taking a different approach and writing up some practical, real-life experiences of where they fail in the hopes that I can provide some cautions when a real business case for their use does present itself.

Most people who will use a QR code will be using a smartphone. You don't see too many people wrangle their netbook or laptop out of the case just to capture a QR code in a print ad at their local coffee shop. Some might even have their tablet computer (ok, iPad) handy and will use that instead (ok, iPad 2).

Mobile Unfriendly

This ad promotes a series of local events that spanned a few days over assorted venues. As a smartphone user, I was looking forward to the prospect of maps, timelines, and descriptions of all the events, though I really only expected the same web site I could view on my desktop computer.

But this is what I saw on my phone:

And this what I saw on an iPad (I am showing the contact page to demonstrate that it is definitely not the correct site):

For context, here is the site as it appears in my Flash-enabled desktop computer (note, no handshake stock image):

I reached out to the organization to tell them there were problems, and they were quick to address as best they could, but they were also limited by the platform they chose. They used a platform called Wix, which allows clients to make Flash-based web sites for free, and automatically shunts users to an HTML-powered mobile template if it senses the user is on a smartphone. The problem is that for non-technical clients, it is not clear that there is a mobile site nor is it clear how to maintain it. This is a classic example of You Get What You Pay For.

Not Mobile Optimized

The same newspaper where I found the QR code I discuss above had another advertisement for a local college promoting its open house. The text below the QR code directs readers to scan the code to RSVP for the open house.

This is what I saw on my smartphone:

Here's what they did right with this: in the absence of being able to make a mobile-friendly site, they did nothing at all. It's not a Flash-based site, and it's not so reliant on cutting edge technology that a smartphone cannot render it. In fact, mobile browsers can handle this page pretty well.

Here's what's wrong: the user, having come to this page on his or her phone, now has to fill out 12 fields, including a simple spam blocker, to RSVP for the event. As an end user who just loaded the page on the phone to RSVP as the ad suggests, I didn't expect I'd have to bloody my thumbs entering this much information (hyperbole anyone?). As a technical user, I was hoping for an easy way to add this event to my calendar and maybe directions to the college that aren't a PDF download.

Context (added July 1, 2011)

In this example, I proudly wore my QR-code-embroidered shirt (well, one of them from my growing collection) to the Social Media Day event last night. Throughout the evening people asked about it and a few even scanned it — successfully.

As the night wore on and the bar became darker, there just wasn't enough light to get good enough contrast for a QR code scanner. Once that happened, people asked what it linked to and one, as evidenced by the tweet above, even made his own assumption.

Knowing how people will scan your QR code comes from understanding where they will be when scanning (a water park, the office, a car) and what they will be doing (drowning, working, driving). It's fair to assume that not all scenarios will be a good fit for a QR code, including some obvious ones like billboards on highways, so make an effort to understand the context of where it will appear along with the value of the reward for making the user go to the trouble.

Wrap-up

These are examples of good intentions. However, lack of a solid business case leading up to putting the QR code into advertisements, compounded by lack of understanding the medium after the QR code is scanned can result in a negative experience. Pile on the clear lack of testing on mobile devices for the first one and you have a recipe for disaster.

Now, to connect this with social media (because that's where I am borrowing these rules and where this discussion started), if you don't understand the medium, don't have a business case, and aren't prepared to commit (whether by testing or engaging) then that tweet way above is spot on — forget about QR codes.

Related

• How To Use QR Codes: A Marketer's Guide
• 5 Qr Code Failures To Learn From, May 14, 2011.
• Making and Using QR Codes, March 28, 2011 at evolt.org (also at my site).
• Real World Hyperlinks, March 8, 2010 at evolt.org (also at my site).

Making and Using QR Codes (at evolt.org)

Having spent a good deal of time answering questions about QR codes lately, I figured the easiest thing to do for everyone was just write an article. And so I did. It went live very early this morning at evolt.org. Go check it out: Making and Using QR Codes.

If you aren't familiar with QR codes, they are those pixelated-looking collections of black and white squares that have been popping up more and more in recent weeks and months, even though they have existed for years. The QR (Quick Response) code was first developed in 1994 in Japan to track vehicle parts but has since grown to become a handy way to encode all sorts of data, most notably web site addresses for use in traditional media campaigns.

In the article I outline the general process of using QR codes in your own projects by providing suggestions on encoding web page addresses, how to build the QR code itself, and basic pre-press tips. I also push some other ideas, such as embedding on your printed web pages or embroidering into your headgear.

So again, go read Making and Using QR Codes at evolt.org and consider my year-old QR code primer, Real World Hyperlinks.

Bar Codes as Web Portals

The same night my article about QR codes (Real World Hyperlinks) goes up on evolt.org, TechCrunch posts an article about a company using bar codes in a novel way — The Secret Lives Of Objects: StickyBits Turn Barcodes Into Personal Message Boards.

StickyBits, the name of the company and product, is based on the ubiquity of bar codes in everyday life. If you have an iPhone or Android phone, you'll be able to download an app that reads bar codes off anything and allows you to attach notes (comments, videos, URLs, etc.) to that bar code. If you are the first person to scan that code, then all new scans can only add to that, allowing for some interesting community discourse. This is a different implementation than a QR code, which doesn't come on every item on earth and must be generated and printed with a certain value (such as a URL) already embedded.

In the TechCrunch article, the author gives an example of scanning a bar code off a greeting card and attaching a note for the recipient to find. What the example doesn't mention is what happens when you have millions of cards using the same code and a few people trying to post his/her own message "on" one particular card.

Each scan is also geo-tagged, which means the location where you scanned the code will be tracked. You can track the movement of an item, if not the people who held on to it. Think Where's George?, but easier to implement (since currency doesn't come with bar codes).

StickyBits also sells packs of vinyl bar code stickers so that you can tag things in the real world, too. The advantage to using them is that people will likely understand that there is a reason someone posted one, and will hopefully scan it to check it out.

In my article on QR codes I talked about the Google Favorite Places stickers and how those would be a great way to hook into Foursquare and other geolocation social media applications. The StickyBits app will give you the option to check into the place where you are standing (or sitting) by scanning the bar code. This assumes there is a place in Foursquare and the bar code is also checked in there. StickyBits also supports broadcast to Twitter and Facebook.

I'll reserve comments about how the StickyBits web site has very little plain-text content on it, violating lots of accessibility rules, along with other best practices in web development failures...

"Real World Hyperlinks" Article at evolt.org

You may be wondering what this graphic means. Perhaps it's your first time seeing it, but perhaps you've seen it here and there and not understood its significance. It is called a Quick Response Code, or QR code. If you've got a cell phone camera and a reader (many already do), then you can use this little guy as a hyperlink in the real world.

I've got more history, examples, suggestions, and even a glimpse at the competing code Microsoft is pushing all in my new article over at evolt.org: Real World Hyperlinks