While email builders within services like Campaign Monitor and MailChimp are becoming increasingly more powerful, there are still great reasons to use an HTML email template that’s unique to your brand.
In this snappy tutorial, we’ll outline how to get started using an HTML email template in Campaign Monitor, for your email campaigns and automated workflows. Depending on how much you want to customize the template, it can take anywhere from five minutes to import and start sending, to quite a few hours of coding and testing for more customized design work.
Once you have found (and even customized) a template that you love, you’ll be able to use it repeatedly—and with Campaign Monitor’s design and spam testing tools, be confident that your email messages look great to recipients everywhere.
What is an HTML Email Template?
In short, an HTML email template (which we’ll simply call a “template” from now on) is an HTML document and accompanying image files, which are designed to be imported to an email platform like Campaign Monitor or MailChimp. Once imported, templates can be used time and time again to create email marketing messages, which can be sent to a list of subscribers (ie. email recipients). These can take the form of newsletters, weekly blog content summaries, event invitations and more.
Campaign Monitor Template Tags
An email template should come with editable text and image areas–either standalone, or within repeatable “layouts” as defined by Campaign Monitor’s template tag language. This versatile language can be used to personalize downloaded HTML email templates, convert existing HTML email newsletters to templates, or create your own templates from scratch.
<repeater>is a content block which can be repeated an infinite number of times.
<layout>includes multiple separate designs inside a repeating element.
<multiline>outputs HTML you can modify using the Campaign Monitor WYSIWYG editor.
Why Use a Template?
If your business (or that of your client) has specific brand guidelines, then it’s likely that the email newsletters you’re working with already have an established look-and-feel. Alternately, if you’re making a first foray into email marketing, you might want to make all your messages look a certain way; one which can’t be achieved using the email builder.
In both cases, having a template can allow you to maintain your brand, plus reduce the design-to-send turnaround time dramatically in comparison to say, coding an HTML email from scratch.
If you’ve found a template which has exactly the layout, and aesthetic that you’re after, well done! You can skip the next section, import it into Campaign Monitor and start creating email campaigns. However, if you need to make edits, then the following may come in handy.
Skills You Need to Edit a Template
Back in the day, if you wanted to create a webpage, you would fire up Notepad to create an HTML file, create a folder for the images (usually called, well, /images), then after a few hours of adding content and testing in your browser, you’d upload the whole lot to a public folder on the web.
All these years later, working with template files is not that dissimilar, however instead of uploading, we’ll be importing the template to Campaign Monitor. To reach this step you need:
- Basic HTML / CSS coding skills
- Campaign Monitor’s template tag language
- Guide to CSS Support in HTML Email
- A code editor like TextMate, Sublime Text or Brackets
If you can confidently edit and test HTML documents (keeping in mind that CSS support in email clients like Gmail, Outlook and others is fabulously quirky), then you can edit email templates to your heart’s delight.
How to Import a Template into Campaign Monitor
To prepare your template for import, you’ll need:
- The HTML file.
- Any other files that your HTML references (such as images and CSS) contained in a single folder and compressed to ZIP format.
Once ready, you’ll be able to import the template to the Templates section of your Campaign Monitor account:
- Click your profile image and go to Templates.
- Go to Import.
- Assign your new template a name, such as “My Newsletter.”
- Click Choose file (below HTML page) to select the HTML file from your computer.
- Then click Choose file (below All other image and CSS files) to select the ZIP file (if you have one) from your computer.
- Click Add template to upload the files.
Is the Template Working?
If you’ve been able to import the template, congratulations! You should see it under My Templates when you create a new email campaign or workflow. Once selected, you can start adding content in the Campaign Monitor email editor.
Once you create a campaign, you can automatically test it across 20+ major email clients such as Mail for the iPhone & iPad, Gmail, Outlook and more, using Campaign Monitor’s design and spam tests. Alternately, you can manually test the campaign by sending a test email to your email accounts across various devices.
What Can Possibly go Wrong?
There can always be hiccups along the way, from the moment you attempt to import a template, through to the testing stage. So, here’s a quick look at some classic problems and solutions:
The Template Won’t Import into Campaign Monitor
Check that the HTML code (including template tags) is well-formed.
Make sure that you’re not accidentally attempting to import large and unnecessary files, like Photoshop assets and video.
My Campaign Doesn’t Look Good on Mobile Devices
Ensure the HTML email document is “responsive”, ie. contains valid media queries in the CSS stylesheet. Note that not all email clients support media queries, including Gmail on iOS/Android.
Emails Look Different in a Variety of Inboxes
You may find, for example, that results in Gmail appear different from say, Apple Mail. Check if the HTML email contains CSS3 properties, web fonts - and provides fallbacks where possible. Not all email clients provide comprehensive CSS support, but it’s often possible to ensure the message is still readable and degrades gracefully, even under less-than-perfect circumstances.
A good email template will make your campaigns look great on both mobile, web and desktop devices alike–while there may be variation between how it looks in a web browser and in the inbox, the message should be always readable and easy to navigate.
However, if you’ve been manually importing HTML emails up to this point, you’ll likely find that using a good email template will save you and your team countless hours creating, importing and testing email messages. You’ll wonder how you ever survived without it!
I hope you enjoyed this tutorial and now feel confident selecting a template, preparing it for Campaign Monitor, then importing and using it for your email campaigns and automated workflows. For inspiration, I recommend visiting Campaign Monitor’s email design gallery - then using your template know-how to create your own unique design!
- Campaign Monitor templates on Envato Market
- Campaign Monitor email design gallery, for inspiration
Creating a Future-Proof Responsive Email Without Media Queries
Getting Started with Email Marketing
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post