Adding Mobile App QR Codes in Web Designs

This tutorial is for custom web designers looking to offer clients optional QR codes, those square barcodes that link mobile devices to websites. The target market to reach is users with an iPhone, smart phone, or other capable mobile device when thinking about adding mobile app QR codes in web designs.

After “What are QR codes?” and “How do you create QR codes?”, the big question becomes “Are QR codes appropriate in web design?” This tutorial answers those questions.

What Are QR Codes?

You’ve likely seen print ads with a box of complicated black and white coded squares and rectangles that remind you of common line bar codes. Perhaps you’ve wondered how to create the complex mobile app version that people scan with their camera, and exactly what data you can embed.

The graphic above shows two versions of QR codes as examples of what designers could use in a custom web design. The left one with the blue background decodes as a clickable hyperlink to the home page of this blog. The right one with a green background will display a simple text message of that same link though not clickable.

The background color is for illustration only and is not required for the QR code to function. The graphic could be further enhanced in a variety of colors for aesthetics, yet that doesn’t improve the ability to scan and decode them with the camera on your iPhone, smart phone, or other mobile device.

At least 7 types of data may be encoded in a custom QR code including: URL website link, text message, phone number, SMS message, email link, contact entry, or calendar entry. At present, and in addition from research I’ve done, less than half of mobile device owners know how to scan a QR code.

How Do You Create QR Codes?

How can you create the customized QR code graphic? This online tool to generate a custom QR code was used for this blog post illustration. Visit that link to try theirs or search Google for others, as well.

The example QR codes above were purposely put close together to make them difficult if not impossible to scan. Think about hyperlinked QR codes in a web design for a moment. That link is viewed while on your website, so it doesn’t make sense to force a site visitor to take the extra time to scan the graphic when a simple text hyperlink will do the job.

Are QR Codes Appropriate in Web Design?

Before adding a QR code to a web design, consider the practical point of view of your website visitor. They don’t need links for navigation. A well designed website will have contact methods to include mailto: links for emailing, your physical address, and certainly phone number info on every page.

A mobile device owner on your website likely has an app to use those links or copy/paste text of contact info. The other data options are secondary until an introduction is made and the casual prospect shows genuine interest in becoming an actual customer.

For those web designers staying in touch with the latest in technology, and hoping to justify adding mobile app QR codes in web designs, all is not lost. Whether you provide graphic design services or your client takes care of artwork for print, you can still use the advice in this QR code tutorial including that online tool to supply the “artwork” of the custom QR code.

Conclusions and QR Code Tutorial Tips

My advice is avoiding QR codes in web design, yet web designers can demonstrate sophistication by teaching clients how to use a QR code with an embedded link to their website for print ads, brochures, and more. Don’t try embedding a lengthy amount of data in a QR code. It may be too complex to scan for some devices and others might give up trying.

Bonus QR code tutorial tip: Before adding mobile app QR codes in web designs or providing a custom QR code graphic for print, make sure to test the artwork to confirm it actually works. Test on a variety of devices, not just top of the line mobile phones.

Don’t offer QR code artwork for print if you do not have software to generate a high resolution version at 300dpi or better. It would be a disaster and likely ruin your reputation if the client pays for 10,000 post cards or 500,000 newspaper ads with a defective QR code.