Using jQuery Mobile with QR Codes
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Mobile is an extremely hot topic lately, and it makes sense why. More and more mobile devices are being purchased and activated daily, According to Cisco's Visual Networking Index (VNI) Global Mobile Data Traffic Forecast Update, by 2016, there will be more than 10 billion mobile-connected devices, or 1.4 mobile devices per every person on the planet.
While on a shopping trip with my kids I noticed that quite a few brightly colored and creatively marketed toy boxes contained QR codes with bold text urging parents to scan the box so that their kids could see the toy in action. I was happy to see more people using QR codes for marketing because I have been in the business of creating and marketing QR codes for various companies and brands. Using QR codes effectively for marketing your products to a busy and somewhat time-sensitive consumer should be one of your top marketing goals right now, especially if you have not already implemented them. Let's take a look at why QR codes are valuable:
- Your customer has shown an interest in or is considering purchasing your product
- You have a fairly captive and committed audience
- It gives you another chance to demo or inform the customer
- You have an opportunity to cross-sell or upsell the current product
- QR codes can reinforce the need or desire of the product
- They can answer questions
- You can use them to show reviews and testimonials
Let's go through the list and expand on exactly how QR codes work. If a customer has scanned your code, you already know that there is some interest in your product. This means that if your product was scanned in a brick-and-mortar retailer you can safely bet that they looked at your competitors and have shown some interest in learning about why they should choose your product over the competition.
Where the consumer goes is completely up to you--they have signed up to go on a ride and see where it takes them. You can lead them to a detail page, a comparison page, a contact form, or even a multimedia experience. While there is no magic formula that works on everyone, you should be able to work QR code messaging in with your existing marketing campaign to maximize the details and benefits that will be shown to the customer.
Just because your product box may not have room for those important or secondary details that will sell your product doesn't mean that you cannot include them in your linked page. If your box art has taken up most of the good real estate on your packaging and you had to eliminate some resources, why not bring those to light on the landing page of the scanned product? This is a fantastic way to provide more details, incentive, and value to the customer when they scan your code.
Do you want to feature other products that can be used in conjunction with the current product? Then why not create an accessories list or a comparison chart that showcases different editions or builds of your product? All of this can be done and controlled from within the landing page of your scanned code. Cross-selling and upselling opportunities can be created and reinforced just as easily as on the box packaging.
Do you have a unique product that consumers want but may have questions about using? You can create a FAQ or demonstration page to help answer questions and soothe customer concerns.
While the idea of trusting third party reviews and testimonials has shifted to trusting "friends" and doing research on social sites, reviews and testimonials can still be leveraged and even incorporated with those same networks. If you have a truly stellar product, you could tap into some public review sites and show that your product is a winner. If you have some trusted commercial personalities pushing your product, you can take their endorsement and feature it on the page. Even if you don't have a sponsor or any product reviews, you can still incorporate a share/like/love/+/pin button from many of the existing social sites that shows how popular your product is. All of this can be done by adding a simple QR code to your packaging.
Creating a QR Code
How do you create a QR code? With the right tools or website, it's actually quite simple. While there are many excellent places that you can use to generate codes, I'm going to point you towards a generator that was put together by the ZXing team of Google. Open a browser tab up to http://zxing.appspot.com/generator, and you will be greeted by a very functional QR code generator. Figure 1 shows a screen shot of the initial page load.
)
On the page you will see that you have several options that relate to filling out contact information. If you are making a QR code for a business card then this would be quite suitable; however if you plan to create some rich content and want to direct traffic to a specific website you will need to change the value of the "contents" select box to "URL". Once that change has been made you need to type in the URL you want to direct users to as well as pick a size, error correction level, and character encoding type. For optimal results, the larger the code the better (at least 1" x 1" on printed materials is recommended, but some people opt for smaller codes that have higher fail rates when scanned). The error correction level allows you to choose how much redundant data is included in your generated QR code. While this does have a direct impact on the overall viewable area of your QR code, it does allow up to 30% of the code to be destroyed, manipulated, or covered and still be read by scanners. The "L" setting is the lowest amount of error correction (up to 7%) while the "H" setting is the highest amount (up to 30%).
When it comes to deciding on the URL to direct traffic to, you need to consider adding analytical data. While I won't be diving into how analytics work or the various ways this can be done, I will give you a few examples of what can be done.
There are three ways of adding Analytics to QR codes:
- Using third party analytics on the landing page
- Using a URL shortening service with tracking
- Bouncing through another website that adds analytics before redirecting
To use third party analytics in conjunction with a QR code, you can create a QR code with a direct link to a URL that includes a tracking pixel from services such as Google Analytics, Omniture, Yahoo!, etc. This method allows the user to see exactly where the QR code will take them and can be added to a targeting campaign inside of your analytics platform.
Short URL services like bit.ly offer various degrees of analytics that can be used to track mobile devices used, times scanned, and even some geo-location features. While some platforms require an enterprise account to create shortened links, using a short URL is an easy way to gain analytics. The down side is that users who read the link before opening it in a browser may not open your link if it looks dodgy or if they cannot see the actual end-point.
The last option I will talk about is using a page to bounce or redirect the user through. This basically offers the same functionality as a shortened link and can be optimally tied into a third party analytics package as well. For this you simply point the user at a URL that contains an index.html file that calls the analytics pixel and then uses some JavaScript to forward the browser to another location.
While all of these options have pros and cons, you will have to think about how they fit into your branding and marketing strategy as well as how you will control the codes. Something many people seem to overlook is the fact that when you make a QR code and put it on a package you are tied to whatever resource it points at until the end of life for the product. So make sure you have a plan (and no, creating a httpd.conf or similar configuration file full of 301 redirects to handle your old codes does not count as a plan).
Create a Landing Page
Now that you have created a QR code, it's time to create a landing page for it. Something that still seems to skip the minds of some marketing people is that the page you are directing users to needs to be designed and built for mobile devices. That doesn't mean that desktop or large screen devices will not view the same site, but you do need to plan for displaying your site on as many devices as possible. What is the quickest way to create a page that can scale to any device? This is where jQuery Mobile comes into play. jQuery Mobile allows you to quickly and easily create a great looking page that is optimized for just about every device out there. Granted, some legacy devices may not behave the same as newer devices, but it will still give the user an experience that should easily convey the quality of the product you are marketing.
Let's start with a simple page layout. Figure 2 shows a wireframe of how the page should look on a small screen (phone) and mid-to-large screen (tablet) device.
)
The idea for this page is that we can give a great looking page to the user that is packed with product information that loads quickly and efficiently.
Let's get started with creating the page. Below is some sample HTML that can be used as a starting point for creating a landing page using jQuery Mobile.
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>QR Codes with jQuery Mobile</title>
05 <meta name="viewport" content="width=device-width, initial-scale=1">
06 <link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
07 <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
08 <script
src="https://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js">
</script>
09 <style>
10 /** Global/Phone styles first **/
11 img {max-width: 100%;}
12
13 /** Tablet and above **/
14 @media all and (min-width: 800px){
15 #main {float: left;width: 66%;padding: 1%;}
16 #sidebar {margin-left: 70%;width: 28%;padding: 1%;}
17 }
18 </style>
19 </head>
20 <body>
21 <div data-role="page">
22 <div data-role="header"><h1>Product Name Here</h1></div>
23 <div data-role="content">
24 <div id="main">
25 <div data-role="collapsible" data-collapsed="false"
data-theme="b" data-content-theme="d">
26 <h3>This product is amazing!</h3>
27 <img src="images/product_logo.png" alt="Product Logo" />
28 <p>
29 Let me tell you why you need our product and how it will revolutionize your life.
This is where all the descriptive text that highlights and showcases your product
will be. You can enrich it with images, videos, and more to really drive the point home.
30 </p>
31 <ul>
32 <li>Consider using bullet points</li>
33 <li>They draw the eye and are concise<li>
34 <li>People like quick solid facts</li>
35 <li>Extra long paragraphs may be a negative</li>
36 </ul>
37 </div>
38 <div data-role="collapsible" data-theme="b"
data-content-theme="d">
39 <h3>Extra Content</h3>
40 <p>This is for extra data that you want to showcase.</p>
41 <p>
42 Use this for an image gallery, a video, or secondary product information.
It really could be anything that helps you sell your product.
43 </p>
44 </div>
45 </div><!-- /#main -->
46 <div id="sidebar">
47 <div data-role="collapsible" data-collapsed="false"
data-theme="a" data-content-theme="d">
48 <h3>Related products</h3>
49 <img src="images/sidebar_image.png"
alt="sidebar product image" />
50 <p>Another Product</p>
51 <p>
52 Make this part of your marketing strategy to cross-sell or up-sell items.
53 </p>
54 <p>You can put as many products here as you want.</p>
55 </div>
56 </div><!-- /#sidebar -->
57 </div><!-- /dr:content -->
58 <div data-role="footer"><h4>http://yourwebsite.com</h4></div>
59 </div><!-- /dr:page -->
60 </body>
61 </html>
Let's take a quick walk through the code. Lines 1-4 should look very familiar, while line 5 uses a meta tag that helps with the rendering and scaling of the page. Lines 6-8 show the CSS as well as the JavaScript files needed for jQuery Mobile to work. Lines 9-18 are inline styles that are included for the sake of readability. I strongly recommend moving these to an external file when deploying your code to production.
The next piece of code that may be new to you is on line 21. Here you can see a div element that contains an attribute of data-role="page". This is used by jQuery Mobile to define what data will actually consist of a single page. While we haven't done it in this example, you could define multiple div elements with data-role="page", and then you could link them to each other.
Inside of the page are three elements: the header, the content, and the footer. These are designated on lines 22, 23, and 58. The header and footer will style any heading elements to have centered text on a colored bar, and the content area does exactly what the name implies. This area will hold all of your code and styles.
Inside of the content area there are several div elements that contain an attribute of data-role="collapsible". This attribute is used by jQuery Mobile to create areas of content that can be shown and hidden on click. By default the collapsible content will be collapsed, but can be changed by adding an attribute of data-collapsed="false". The colors that are used with collapsible content are controlled through the very robust theme engine included in jQuery Mobile. By default jQuery Mobile includes five styles; a, b, c, d, and e. On line 26 you can see that the default theme for the collapsed content area as well as the content within is going to have a different style than the default. This is changed with the attributes data-theme="b" and data-content-theme="d". When you get a minute to play with it try using the other theme letters.
The rest of the code in the template should be fairly straightforward as it is regular HTML. That is another fringe benefit of using the jQuery Mobile framework--you can use regular HTML as much as you want and it will generally display in the fashion you would normally expect.
We now have a landing page that looks good and has some simple user interaction (collapsible content areas) that helps create a pleasant experience for almost all mobile device users. To take care of tablet and large screen devices, we have added a media query that uses the content containers to reorganize the page flow.
Figures 3 and 4 show the site loaded on both a phone and tablet.
)
)
Parting Thoughts
Figure 5 shows a QR code that will take you to a page that gives an example of what the template we created can look like when populated with real data.
)
Remember that every second counts when marketing to mobile users, so make sure you take into consideration your page layout, presentation, and file size. The template used here may work for some products but not for others. Use analytics, focus groups, and plenty of testing to tweak your formula until you find what works for your product and consumer.
For those interested in learning more about using jQuery Mobile and QR codes, both are covered in Sams Teach Yourself jQuery Mobile in 24 Hours.