Tuesday, January 25, 2011

Fun with QR Codes - Encoding URLs and contact information in images

I've been playing with QR Codes recently.  What is a QR code you ask?  It is one of those square bar-code looking images that you may have started to see lately, and are used to encode text which can be URLs, vCards (contact info), phone numbers, or other data.  By encoding this information in the QR Code, the data can be easily decoded by say a camera phone, and the information acted upon.  Common uses are sharing URLs, avoiding having to type in a long sequence of characters on a small keyboard, or sharing electronic business cards (vCards).

Here is an example that encodes the URL to the Wikipedia page on QR Codes.

Use a QR Code reader on your mobile phone and it should launch your browser on that site.  Most readers I've come across have this built-in behavior for URLs, but what about other forms of text encoded in the image?

I've done a fair amount of experimentation with several readers on the iPhone and have discovered some that simply show the text for non-URLs, while others have nicer behavior, especially with vCards.  For example, the following QR Code has a name, work phone, e-mail, company, and title.

On an iPhone, scanning this with QRReader just displays the vCard text.  i-nigma 4 recognizes it as a vCard, parses it, and lets me add it to my contacts, but ignores the company (ORG) and title (TITLE) fields as well as the work attribute on the phone number.  ScanLife does the best, recognizing the vCard and all the fields.

So, your success with using a QR Code as your business card will depend on the reader your audience is using.  Feel free to comment on how your reader works.

As you can see, when more information is added the QR code larger/denser which is natural and to be expected.  The specification calls for a maximum number of characters of 4,296 but that would have an image that was 177x177 pixels and the dense one above is 1/9 as large.  So when using it as a business card, particularly if you are printing it on the back of your business card, at some point it is too dense to print on such a small card and have readers still be able to process it, so you are somewhat limited in what you can include.  You'll notice that I didn't include an address or secondary phone numbers in either case above and those would add significant characters.

The other thing I learned in trying things out is that while there are numerous services on the Web that will create the image from text you enter, they don't all properly format the vCard with the proper syntax and punctuation when you fill in their vCard form.  But part of my project was to find a way to encode without internet access so I had to write my own anyway and did so using the Google's zxing project.  That project seems focused on readers, but has encoding classes in it too.

What is your experience with QR Codes?  What readers do you use and which work well?

2 comments:

  1. I just scanned the image above with my Droid2. The vCard info came up with options at the bottom of the screen to Add Contact and Call Number. Pretty cool.

    I'm wondering how this wold work from phone to phone.

    ReplyDelete
  2. Fantastic post. Learn how to incorporate QR codes in your web apps to deliver quick information directly to your users' mobile device http://blog.caspio.com/web_apps/4-ways-to-use-qr-codes-in-your-web-apps/

    ReplyDelete