HTML Guidelines – QR Codes

Below are some best practices to follow when you are creating a custom HTML template for your Direct Mail campaign, together with ‘QR Codes’ to simply generate highly personalised links and landing experiences. Following these HTML Guidelines – QR Codes will help you to get started.

HTML Guidelines – QR Codes – Postcard A5 Template

HTML Guidelines - QR Codes - Example Template Postcard A5

  /* This HTML code snippet only highlights the part of the QR Code and is not a full version of the postcard displayed above. */

<link href=“https://fonts.googleapis.com/css?family=Open+Sans:400,600,700” rel=“stylesheet”>

<style>

.promo-box {
  margin-top: 90mm;
  margin-left: 70mm;
  width: 45mm;
  height: 55mm;
  border-radius: 15px;
  background-image: -webkit-linear-gradient(#00afde 15%, ##a6ce39 100%);
  box-shadow: 10px 10px 12px grey;
  font-family: ‘Open Sans’, sans-serif;
  text-align: center;
  padding-top: 162px;
  text-transform: uppercase;
  font-size: 14px;
  color: #ffffff;
  line-height: 1.3;
  position: absolute;
}

.qr-box {
  margin-top: 95mm;
  margin-left: 75mm;
  width: 35mm;
  height: 35px;
  background-color: #ffffff;
  position: absolute;
}

</style>

<div class=“promo-box”>
  <p>Scan and activate<br>your discount</p>
</div>

<div class=“qr-code”>
  {{qr_code content=https://postana.com/?{{coupon_code}}/}}
</div>

Using QR Codes

To include QR Codes into your HTML templates you can use the pre-defined merge variable called {{qr_code}}. Inside the double curly braces you can include extra content information, such as the campaign-URL that you want the QR Code to link to.

As shown in the example above, you have the option to include a merge variable inside the campaign-URL to make the QR Code dynamic. For example with an unique Coupon Code to link every user to a personalised landing page, or with variable UTM-codes to keep track of the traffic and commercial results of your Direct Mail campaigns.

QR Code Dimensions

The QR Code is a digitally generated vector graphic with the highest printing quality. This gives you the flexibility to add the QR Code to your design at any size you want, as long as QR Code Scanners can still process it. 

The size of the QR Code is determined by the dimensions of the box that you use for the CSS class. The recommended print size for a QR Code is 30mm. You can still choose smaller print sizes for your QR Code, but you need to be careful that it doesn’t contain too much data.

The higher the number of characters in the campaign-URL, the smaller the squares in the QR Code will be, and the more difficult it becomes for mobile devices to read it. Please keep in mind to always test the readability of your QR Codes by scanning them yourself! Printing QR Codes too small can make them unreadable for some smartphones.