If you’re a digital marketer in 2017 you’re probably experienced with a variety of email platforms and know the difference between an HTML-formated email and a plain text email. In a way, direct mail has been the physical equivalent of a plain text email — static and low frills. There’s also a good chance that as a digital marketer you’ve worked with some basic HTML to create or modify an email template. Recently, we released what might just be the world’s first HTML editor to code direct mail postcards in a way that’s similar to email — we think it’s an even easier! On top of that, HTML templates provide you with the ability to mail merge attributes unique to each recipient such as their name or offer them a custom promotional code so you can track if each user converts.
In this post I’ll explore creating a personalized direct mail postcard in HTML for use in Mailjoy. The default template exists in the Mailjoy editor so the code samples here simply modify that code. If this is your first HTML template with Mailjoy, be sure to read our How to design HTML postcard templates guide first.
Ok, let’s get started. Now let’s assume our company offers an app for food delivery — I’m a foodie so why not — and we want to create a 4″ x 6″ postcard mailer that has a unique promotional code for each recipient.
Front design and strategy
Food can be a very visual thing, and some of the best mailer designs use bold, relevant imagery to catch your attention. I’ve decided to use a nice picture of food as the whole background of my front design. On top of it, I’ll overlay some enticing copy.
I used Unsplash to find a great looking photo. I can either host it and link to it, or just upload it as my postcard’s background design. For this post, I’ll host it and then link to it so I don’t need to do any resizing with Photoshop or Sketch. We’ll now update the #card inline style to add the background.
#card { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: white; background-image: url('http://www.mailjoy.com/images/blog/coding%20mailer%20post_front%20bg.jpg'); background-size: 100%; background-repeat: no-repeat; overflow: hidden; }Great! So now we have a big, beautiful background.
Now let’s add some eye-catching headline text that says “Your favorite foods delivered.” We’ll left-align it and use an H1 tag so it’s a thick font weight. By default, our templates use Sans Source Pro so we’ll keep that for now. We’ll add this to the #Card ID and inside the safe area because that’s where all text should go to ensure it’s not trimmed during the printing process.
<body>
<div id="card">
<div id="safe-area">
<h1 style="color: #FFF; font-size: .5in; line-height:.6in; position: relative; margin-top: 0;">YOUR<br>FAVORITE<br>FOODS<br><span style="color: yellow">DELIVERED</span><br></h1>
</div>
</div>
</body>
So now we have our completed front design. Not only does it look good, but now I want a sandwich. If only there was an app to have it to delivered…
Now just to ensure my design will print perfectly, I’ll turn on the print guidelines for a moment to make sure my text is inside the safe area. Looks like I’m good to go so I’ll move onto the back side.
Back design and strategy
On a 4″ x 6″ postcard we’re a bit more pressed for space on the back due to the address block that covers a lot of the side. Not a problem though, I’ll just design around it. On this side, it’s important that I have a clear call to action so I’ll be asking the recipient to download the app. I’ll also entice them with a unique promo code so I can track to see if that specific person converted.
I’ll change the background of the whole card by updating the #card inline style again.
#card { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: #C96C62; background-image: url('[[back_background]]'); background-size: 100%; background-repeat: no-repeat; overflow: hidden; }I also want to make room for a box that stands out and promotes the promo code. I’ll add this as a style as well.
#promoarea { background-color: #BC5048; color: #FFFFFF; width: 2.4in; padding: .1in; position: relative; top: .8in; border-radius: 10px; text-align: center;}Lastly, I want to have a region for where my big headline text will go.
#headline { position: relative; top: .35in; text-align: center; color: #FFFFFF; font-size: .25in; }Now I’ll add in the content, show you a preview, and then explain what’s going on here.
<body>
<div id="card">
<div id="safe-area">
<h2 id="headline">Download FoodWhale to start eating within an hour</h2>
<div id="promoarea">
<h3>{{firstname}}, you're so great that we want to personally give you $10 off!</h3>
<h5>Enter the below code when you signup</h5>
<h2>{{person_identifier}}</h2>
</div>
</div>
<div id="ink-free"></div>
</div>
</body>
And here it is, our final back design.
The way I approached this design was to define the sections and styling properties in the template’s CSS. From there, I then added in each section and its respective content. You’ll also notice I used two merge tags here: {{firstname}} and {{person_identifier}}. {{firstname}} makes the recipient feel special because the mailer addresses them personally. Second, I’m able to create unique promo codes for each person by using the {{person_identifier}}. This value is unique for every person in your mailing list. This lets me use custom promo codes per person so I know exactly who signed up from my mailing.
Creating dynamic mailers with unique data per mailer is what makes Mailjoy unique. I was able to create this whole mailer in no time at all.
And just like with the front, I’ll test my back design with print guidelines on to ensure no text is outside the safe area.
Previewing the result
With my template designed, I’m ready to use live data to see how it looks. On the Finalize page, I simply hit preview. I’m now able to see the final mailer for each recipient in my list.
Wrap up
I hope you found this helpful as you start to begin coding direct mail templates. Below, you’ll find the full code for both the front and the back. Feel free to copy and paste them into the editor for your next campaign. If you have questions, feel free to reach out.
Front template
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet" type="text/css">
<title></title>
<style>
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: 'Source Sans Pro' }
html { background-color: transparent; overflow: hidden; }
/* The body section defines the whole size of the postcard and some basic properties. */
body { width: 6.25in; height: 4.25in; margin: 0; padding: 0; overflow: hidden; }
/* The card section defines positioning and the overall background of the postcard. */
#card { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: white; background-image: url('http://www.mailjoy.com/images/blog/coding%20mailer%20post_front%20bg.jpg'); background-size: 100%; background-repeat: no-repeat; overflow: hidden; }
/* The safe area defines where your content — especially text — should be contained. Note: You can let your content extend beyond this — i.e. images — but know that some of it may get cut off in the bleed. Modifying this section is not recommended.*/
#safe-area { position: fixed; left: 0.1875in; right: 0.1875in; top: 0.1875in; bottom: 0.1875in; word-wrap: break-word; }
</style>
</head>
<body>
<div id="card">
<div id="safe-area">
<h1 style="color: #FFF; font-size: .5in; line-height:.6in; position: relative; margin-top: 0;">YOUR<br>FAVORITE<br>FOODS<br><span style="color: yellow">DELIVERED</span><br></h1>
</div>
</div>
</body>
</html>
Back template
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="[[back_fonturl]]" rel="stylesheet" type="text/css">
<title></title>
<style>
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: [[back_fontfamily]]; }
html { background-color: transparent; overflow: hidden; }
/* The body section defines the whole size of the postcard and some basic properties. */
body { width: 6.25in; height: 4.25in; margin: 0; padding: 0; font-size: 12px; line-height: 20px; overflow: hidden; }
/* The card section defines positioning and the overall background of the postcard. */
#card { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: #C96C62; background-image: url('[[back_background]]'); background-size: 100%; background-repeat: no-repeat; overflow: hidden; }
/* The safe area defines where your content — especially text — should be contained. Note: You can let your content extend beyond this — i.e. images — but know that some of it may get cut off in the bleed. Modifying this section is not recommended.*/
#safe-area { position: fixed; left: 0.1875in; right: 0.1875in; top: 0.1875in; bottom: 0.1875in; word-wrap: break-word; }
/* The ink-free section only applies to the back of a design. You should always design around this as our printer will insert this block over your design in this specific area. You can see it by clicking "Show print guidelines" when in Preview mode. Modifying this section is not recommended. */
#ink-free { position: absolute; width: 53%; height: 58%; right: 3%; bottom: 4.5%; background-color: rgba(255,255,255,0.0); }
/* Our default back template features a message block that non-technical users can type into from the visual editor. Feel free to remove this section if your design doesn't need it.*/
#message { position: absolute; width: 2.4in; height: 100%; padding-left: .05in; overflow: hidden; white-space: pre-line; }
#headline { position: relative; top: .35in; text-align: center; color: #FFFFFF; font-size: .25in; }
#promoarea { background-color: #BC5048; color: #FFFFFF; width: 2.4in; padding: .1in; position: relative; top: .8in; border-radius: 10px; text-align: center;}
</style>
</head>
<body>
<div id="card">
<div id="safe-area">
<h2 id="headline">Download FoodWhale to start eating within an hour</h2>
<div id="promoarea">
<h3>{{firstname}}, you're so great that we want to personally give you $10 off!</h3>
<h5>Enter the below code when you signup</h5>
<h2>{{person_identifier}}</h2>
</div>
</div>
<div id="ink-free"></div>
</div>
</body>
</html>
