Web Services

Web Services

Main Office
Building 41, Room 316

How can we help you?

Web — email webmaster@udc.edu
Communications — email UDC-Communications@udc.edu



QR Codes Best Practices

QR codes became popular in Japan years ago and are just now becoming more popular in the US. As such, many people have been asking what they are, how to use them, and how to get the most from them. This page provides the answers to these questions.

The Basics

What are QR Codes?

A QR code is a 2-dimensional (2-D) barcode. QR codes read down and across, not just across like the typical 1-dimensional (1-D) barcode. They are made up of large boxes that mark the corners of the code, and small boxes which contain the data for the barcode. The more data encoded, the larger the QR code will become because it will have to contain more of the small boxes to represent the data.

There are other types of 2-D barcodes on the market, but the QR code is the most popular type. Other types of 2-D barcodes are encumbered by patents and licenses, are not as popular, and are not supported by most barcode readers, making them less useful. QR codes also have built-in error correction, so even if parts of the code are mangled or don't scan properly, it may work anyway from the extra information stored in the rest of the code.

If you are really nerdy and want to know about the structure and history of QR Codes, check out the QR Code page on Wikipedia.

How are QR Codes used?

QR stands for Quick Response. QR codes are used when you want to make some piece of information, like a URL, phone number, SMS message, etc., available for someone to use easily without having to type anything in. They are typically used in print advertising to allow someone reading it to easily go to a web site that relates to the advertisement.

Simply create your QR code (see below) and include them in your print marketing.

They are not typically used on web sites, because you can already simply use a URL link to direct people to other resources. If your web site includes pages that are expected to be printed out, you can include them to allow people reading the printed version to get back to your web site easily.

What do QR Codes cost?

Nothing. There is no cost to use or create QR codes. They are an open standard.

How do I make a QR Code?

You can make them for free at many sites, such as bit.ly and qrcode.kaywa.com. Just select the type of QR Code you want (URL, Text, Phone, SMS, etc) and give it the data you want to be encoded. It will generate your QR code in a second or less.

Best Practices

#1: Put Tracking Codes in the QR Code

In our case, we put Google AdWords tracking variables into each URL so we can track the source of the links without having to create a distinct landing page for everything we link to. This allows us to track our traffic through our regular Google Analytics accounts.

You can use the Google URL Builder tool to add these codes to your URL.

#2: Use a URL Shortener

I see MANY places using QR codes that are using very long encoded URLs. This makes them harder to scan for the end user.

Let's say we want to link to this page, using all our tracking codes. We end up with a huge URL like this:


If you generate a QR code off this URL, it will be huge. Here is the QR code that the above URL would generate:

Big QR Code

Notice how many blocks there are in the code, and how generally huge this code is.

Now compare it to the QR code we get after shortening the URL down to http://bit.ly/mvNZ3Y with the bit.ly URL shortening service:

QR Code - Small

Note how many fewer blocks there are in this one, and how much smaller it is overall.

This second code will be much more easily scanned than the first one, and can be used in print in a smaller format and still be usable.

It will be easier for your users to scan, because each block will be comparatively larger when used in your print ad. Many cell phones have trouble focusing at the short distances typically used when scanning QR codes, so it is vital that you make the code as easy to scan as possible for your end-users.

REMINDER: Add all your tracking codes (Tip #1) to the URL BEFORE shortening it. Don't add them to the shortened URL.

#3: Explain It

Include a readable link under the QR code. Many people won't know what that weird box is, so take the opportunity to engage them.

For example, when working on a recent UDC project, we designed the QR codes like this:

QR Code with Description

This allows UDC to educate their visitors, begin creating a relationship, and provides them with tools to actually use the QR code if they were not already familiar with the technology.

#4: Try It

Never publish anything without actually trying it out on a variety of phones first.

While it may look good in print, many phones do not focus well at close distances, and you should try it first with any iPhone, Blackberry, Android or other available device you can get your hands on and see if it actually works easily.

QR codes are required to have blank space around them. Make sure that you have blank space around the QR code at least 3/4 of the size of the big squares in the corner.

You might need to make the QR code larger, change the background it sits against, put more white space around it, or otherwise tweak it to get good results.

The Final Product

Pulling all of these tips together, which of these do you think presents the more attractive, usable and informative experience for your QR-code-scanning end user?

Before Tips:After Tips:
Big QR CodeQR Code with Description

QR Code Use on Web Pages

QR codes are normally used in print advertining, signage and on other physical products. However, more and more they are appearing on web pages as well.

Here are some possible reasons that you might want to use a QR code on a web page:

  1. To provide a way for mobile users to easily bookmark your site. Some web sites will display a code linking to the page you are viewing, while others will provide a link to the mobile version of the page you are viewing.
  2. To allow users viewing a printed out copy of the page to return to it without having to retype the URL again.
  3. To encode contact information (name, phone, email, address, etc).

Google's Chart API now provides an programmatic way to create QR codes on web pages.