HTML Guidelines – Basic

Below are some best practices to follow when you are creating a custom HTML template for an A5-Postcard in landscape orientation. The same principles apply however also to the other sizes formats. Following these HTML Guidelines – Basic will help you to get started.

HTML Guidelines – Basic – Postcard A5 Front Side Template

We highly recommend you to use HTML to design your Direct Mail. You have a lot of flexibility when using HTML and you can add merge variables into your HTML to easily generate dynamic content. 

HTML Guidelines - Basic - Example Template Postcard A5 Front

<link href=“https://fonts.googleapis.com/css?family=Bitter:400,400i,700” rel=“stylesheet”>
<style>

.postcard {
  background-imageurl(https://assets.postana.com/example/postcard_A5_front-side-03.jpg);
  /* your comments go here */
  background-size: 216mm 154mm;
  background-repeat: no-repeat;
}

.text {
  width: 50mm;
  height: 80mm;
  left: 150mm;
  top: 10mm;
  font-family: ‘Bitter’, serif;
  font-size: 25px;
  text-align: left;
  color: #FFFFFF;
  line-height: 1.2;
  font-weight: 400;
  text-transform: uppercase;
  position: absolute;
}

.percentage {
  font-size: 90px;
  line-height: 0.9;
}

.discount {
  font-size: 37px;
}

</style>

<div class=“text”>
  <span class=“percentage”>25%</span>
  <span class=“discount”>discount</span>
  <span>on your next<br>purchase!</span>
</div>

HTML and CSS

When you are creating and designing content with HTML, you should use inline styles or an internal stylesheet. Do not use an external stylesheet. Because the content is only being designed for a single size, we recommend using absolute positioning, as shown above.

Because different browsers have varying user-agent styles, the HTML preview you see in your browser will not always look identical to what is produced for printing. It is strongly recommended that you test all HTML designs by reviewing the final PDF files in your campaign environment, as these are the files that will be printed.

Hosting Content

If you are using an image, logo or illustration in your design, we recommend you to host the content yourself on a file hosting provider (for example a public folder on your own domain) and linking the URL of the content in your HTML, as shown above.

Image Formats

When using PNG or JPG images formats we require a minimum of 300 dpi to ensure a high printing quality and prevent blurry images. The dpi is calculated as (width of an image in pixels) / (width of product in inches) and (length of an image in pixels) / (length of product in inches).

For Example: to create a 216 x 154mm background visual for an A5 postcard with a minimum of 300 dpi the image should have a dimension of 2551 x 1819 pixels.

HTML also supports other image formats such as SVG. These images are generally in a vector format, which means they can be resized without compromising on resolution and printing quality. SVG is a file format that we highly recommend you to use.

Font and Lettertypes

With the HTML template you can use any font to make your design. By default we support the import of Google Web Fonts into your HTML without having to download or upload any assets. After you have found a suitable font on the Google platform, all you have to do is include a link to the font in the beginning of your HTML. Then you simply refer to the font in your CSS, as shown in the HTML example above.

Outside the use of the standard Google Fonts you are free to use any custom font that you like. Simple upload your font files to a file hosting platform and use CSS’s @font-face declaration to load them into your design, as shown in the example below.

<style>

@font-face {
  font-family: ‘My Font Name’;
  src: url(https://link-to-your-font/my_font_name.ttfformat(‘truetype’);
  font-style: normal;
}

.text {
  width: 50mm;
  height: 80mm;
  left: 150mm;
  top: 10mm;
  font-family: ‘My Font Name’;
  font-size: 25px;
  text-align: left;
  color: #FFFFFF;
}