QR Codes

Let's talk about QR Codes and shared URL links

Example QR Code

The best QR codes should look good and hopefully complement the places they are seen. A good QR code should encode the minimum amount of data needed to deliver the working link. 

Make your QR code scanning attractive, reliable and quick to decode by the smartphone camera, especially at greater distances.

 

Note: This information is provided to help other local companies and entreprenuers understand and explore what is possible.
Additional useful information can be found at

CanadaTips

 

Let’s first talk about the actual link you want to encode with QR


Edit the encoding URL to remove unnecessary ’extra’ data

I often see QR codes that when scanned, include a bunch of ‘junk’.
For example, after searching for Blueberry on our web store and then clicking on the product, the URL in the browser address bar is;
https://granolala.ca/products/granolala-blueberry?_pos=1&_sid=f7622410e&_ss=r

For most cases, everything after the ? should NOT be included in your QR encoding. Even the ? should be trimmed away, which shrinks it down to
https://granolala.ca/products/granolala-blueberry

This trimmed URL could now be pasted into a QR generator tool and it would work just fine.

URL shortening with Redirect

A further refinement can be done if your web host* offers URL Redirects (sometimes known as link shorteners).
In our case we use Shopify to host our web store, which includes URL Redirects. Many other website hosting services offer redirects.

So, we have created a shortened URL for our ecommerce store in Shopify
https://Granolala.ca/Blueberry 

When our QR is scanned, the smartphone will first go to the shortened /Blueberry link and be instantly redirected to the longer ’full’ URL which in turn will display the actual Blueberry product page.

https://Granolala.ca/Blueberry ==> https://granolala.ca/products/granolala-blueberry


Future Proofing: Another benefit of using Link Redirect (link shortening) for your QR codes 

When you have your QR code linking through a redirect, you have the ability in the future to change where the scanned QR code goes to. Without changing the existing QR code dot pattern. 

Just edit the redirect setting for that shortened URL to point it at some other web page you now want to send your customers to. No need to generate a replacement QR code or reprint signs and business cards.

This future proofs your QR codes so they never fail to ‘work’ even when you change your website pages or product links. For each existing QR code, edit the redirect to wherever you now want the scanned QR code to lead your customer.

Bonus: If you include actual text URL links in your ads, social media, or printed cards and signs, a shortened link can look much tidier. Easier to type in and less chance for typos. Here is an example we use

Granolala.ca/Contact

We use shortened redirect URLs for almost every link we share. Especially for social media sharing and certainly every QR code we post or print.

 

* Third party URL link shorteners 

These services have been around for ages and there are many to choose from. Bitly, TinyURL and so on. Be aware that these services are separate from and independent of the actual company that hosts your web site.

They want to get paid somehow, so using a third party redirect service may involve showing ads to your customers (sooner or later) when they use the link, or you must pay a subscription (sooner or later), or there is a limit to how many times in a month the link can be used ‘for free’.

If the hosting service for your web site includes link shortening redirects for free, I recommend using that. 

If you do use an external link shortening service, make sure you understand how it will work for you, including long term. Especially, but not only, whether it will show ads and/or collect your customer traffic data, and so on.

Meta, Facebook, Instagram, etc using Pemalink URL

If you wish to directly link to your presence on a specific social media platform, look for instructions to find the correct 'permalink' for that. You want to use the technically correct URL that will continue to work over time, even if Meta (or whoever) rearranges how their internal links work.

Again, I will suggest your generated QR code points to a redirect URL, from which you can then direct to the actual page on Facebook, Instagram, etc.

Example; QR code URL is 
https://mynicewebsite.ca/MeOnFacebook
Inside your website redirect service, you include;
/MeOnFacebook ==> MyActualFacebookPermalinkURL

If you have a Personal Profile on Facebook and a Business Page, be sure to link to the permalink for the Page if you want to have customers arrive there.

Note about WWW.

Years ago it was common and sometimes required to include the WWW. prefix when typing web addresses. This has mostly gone away and most web addresses work just fine without the WWW portion.
If the URL you wish to share includes the WWW prefix, try deleting the WWW. (including the dot). If it still works, use the non-WWW version

HTTPS versus HTTP

These days almost all web sites incorporate ’security’ for your web pages. The S in httpS means the link to your web site is ‘Secure’. In fact, many/most http links will be automatically converted to httpS in use.

The recommendation is to always include the https:// in all your shared links. Check that the https link really does work, of course, before sharing it. Sometimes an old web site will require the non-secure http link, but these are becoming much less common.

It generally does not matter whether you use https:// or HTTPS:// as the prefix

Often letter case does not matter for the entire web link or email address. Sometimes a website will be picky about letter casing, but maybe only for certain links.

Creating a QR code with your URL link

What can a QR code look like?

We have all seen QR codes. Most appear as a block of small black dots or small squares within a solid white larger square. If printed clearly, these stark images will of course scan and link to the targeted web page (or whatever).

QR codes can look much nicer!
You can use color, and more than one color.

The dots can be rounded or sharp cornered. Adjacent dots can be joined to appear as small bars. The three ‘eyes’ can be round, square or not so square. The eyes can have their own colour.

As long as the QR code style you use has plenty of visual contrast with the background colours (or image) and the QR appears large enough to be reliably scanned even with a crappy phone camera, you can use it!


QRCode Monkey

Unlike so many other ‘free’ QR code generators, QRCode Monkey allows you to generate ‘static’ QR codes that have no cost. Not only can these static QR code patterns look quite nice, there is no charge to use them. Once generated the QR image is yours.
Actual use of your static* QR code does not involve QR Monkey at all, in any way.

  • A static QR code that links to a URL redirect is in effect actually a dynamic link. You are in control of where the scanned QR actually leads to.
    Note: This is what is happening when you use the Edit function of any Dynamic QR service. The physical QR image does not change, just where the link redirect is going. Editing the redirect is what they call Editing the QRcode.

  • QRcode Monkey does offer a Professional service which requires payment. 
    We do not use the Professional services ourselves.

  • We use QRcode Monkey and avoid online QR generators that do not offer STATIC QR codes or insist on any sort of payment, subscription, or free with limits.
  • Unless you really need or want some of the click tracking and traffic reporting features. And even then, I would probably use QR Monkey and and direct the QR link through a redirect service that just does those things.


Experiment and be Bold!

Start by entering the exact URL you wish it to be encoded. Verify it has no extraneous characters and is precisely as it should be.

Then work down through the options to adjust the appearance settings.

QRcode Monkey allows you to change settings and immediately see how the generated image will look. Click Create QR Code button to see each change.

Note that Download PNG button will delay several seconds (while showing you an ad for their own Professional QR Code offering*) before delivering the full resolution QR image to your computer. You only need to click Download and endure the delay when you have the final look you want.

You can of course download multiple versions of your QR with different looks. Print them out and ask others what they think of each.

* The ad displayed during each PNG download is just for you. Your customers will not see an add from or about QRcode Monkey.

Compare these QR codes, each of which will deliver the customer to the same page on our web site.

QR CanadaTips B&W demo with Monkey logo

QR Center Logo

A logo or anything else positioned in front, on top, or otherwise obscuring part of the QR pattern is a form of 'damage' which forces the QR dot image to be more visually complex, larger, and potentially less reliable to scan.

If you add a logo into the centre during QR code generation you will see the generated dot pattern has to expand to compensate for the ‘unreadable’ dots that are now hidden in the centre. The additional pattern size is necessary to provide enough error correction for the obscuring centre logo.

An alternative is to position a logo image underlaid as background across the QR pattern but with reduced logo density/opacity. Done well (with enough contrast between background and QR dot pattern), there should be no QR encoding impact (no increase in pattern size or density). The actual QR pattern can be compact and still quite scannable.

 

QR code scan checking apps

Qrafter

Works well enough, shows the scanned URL and the redirect target URL
 (which can be quite useful).

QR Reader app

Just Scan mode shows the exact content of the scanned QR code.

Honeywell SwiftDecoder app for iOS

Honeywell SwiftDecoder app for Android

Rather technical app, can do a lot of different things.

 

QR Styles and Colours

To maximize QR scanning reliability and ease, you want the QR code to be big enough, with plenty of contrast. 

Yet, amazingly, most modern smartphones are capable of successfully decoding rather awful QR codes. Small, fuzzy, dirty, with an off angle camera view, and somehow it still makes it happen. 

Which means that you actually have a lot of room for artistic QR codd endeavours. As long as you don't truely ruin the QR scanability, you really can have some fun with them.

 

Test your QR codes 

Don't just point your phone camera at the thing and see if it 'works'.

Use one or more of the QR scan checking apps mentioned above.
Test how far away it will still scan.
Check whether it works reliably when not facing straight on.
Test in semi-dim lighting.

How long does it take for the scan to succeed?
Should be nearly instant. If it has to work longer, it may be borderline.

Check that the decoded URL is perfectly correct. No extra characters, a clean and precise URL that does indeed point to and resolve the online address it is supposed to.

Test with more than one phone.
Try an older phone, or perhaps a tablet.

More testing tips

 

Tips for QR codes on your signage

Make the QR code as large and bold as you dare.

Is it scanable from across the room, or even from halfway across the market?

Now that you know your QR can overlay an image, think about ways you can incorporate your QR as part of the art of your sign or card, something more fun and interesting than just a B&W square block parked in a corner.


Chef with QR code apron

On your business card, consider making the QR code a primary design element. No longer something to shrink as small as possible or apologize for, but something bold and noteworthy. 

 

Market table price list?

Consider including a big visible QR code that can be scanned from several paces away, so people can view your menu and pricing on their phone, easily readable* and can be zoomed in as much as they need

Tip: The QR code on your table sign can be a link (or redirect) that goes to a special page on your web site that is specifically for the markets. Perhaps just your menu and some other specific info when a customer is standing nearby - the things people often ask about when they step up to your table.

* I often see market signs on tables that are unnecessarily small and impossible to read even from a step away. If this describes your signage, consider redoing your signs so they can be read from one or two full steps away, perhaps even farther.

And readable for customers that maybe did not put on their glasses.
Clear big fonts, clean layout and clear messaging.
This is what we make, this is who we are.

 

Other messaging

You can create specific QR codes (and signs) to request a Google Review, another QR for your Facebook Reviews, and so on.
The sign should say what each link will do, before they scan it.

Make sure each QR really does leads to the exact correct place for leaving the review!

 

Encoding other things into a QR code

Less common, it is possible to use a QR code to initiate an email to your contact address.
Just create the QR code using the mailto: command

mailto:ContactMe@MyEmailserver.ca

 

 

QR Codes

 

Reviews, Questions, Comments, let us know! We would love to hear from you - Marion