Home > Articles > Open Source > Ajax & JavaScript

Using jQuery Mobile with QR Codes

Phil Dutson, coauthor of Sams Teach Yourself jQuery Mobile in 24 Hours, discusses marketing strategy for mobile devices using QR codes and shows how jQuery Mobile can be used to create a mobile friendly landing page.
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 
09     <style>
10       /** Global/Phone styles first **/
11       img {max-width: 100%;}
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" 
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.

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information

To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.


Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.


If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information

Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.


This site is not directed to children under the age of 13.


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information

If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information

Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents

California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure

Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact

Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice

We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020