Using HTML Email Templates: How to

28 May 2013

Although not every situation calls for a HTML email template there are plenty of places a good one can drive action and increase your conversions.

If you’re not a HTML whiz (and even if you are) it can be difficult to know where you should get started with finding or creating your first HTML email template.

As any web designer will attest, implementing HTML email templates is tricky. It takes patience and a little skill.

So here’s a a few pointers for getting started with HTML email templates.

1. Three resources for great HTML email templates

The best place to start when creating your own template is to leverage the awesome resources you can find around the web.

Here are three great places you can find quality email template resources. Most of the templates here are plug-and-play with Vero as well as the other common email marketing platforms.

  1. Themeforest’s Email Templates Section – Themeforest is a great resource for all things digital design. When it comes to email, they have hundreds of great templates for as little as $15. You’d be hard-pressed not to find something good here.
  2. Templateria – Templateria is a source of professional templates from the guys at W3P in Brazil. Their templates are professional and Pedro and Juliana have years of email marketing design experience to help you out if you need a hand.
  3. Campaign Monitor’s Free Email Templates – Campaign Monitor had a bunch of the world’s best designers release over 100 free templates. They’re smooth, simple and professional. If they have a layout that suits your needs this is a great option (it’s free!)

2. Customize your template to get things ‘just right’

Generally speaking you’re going to want to make a few changes to whichever template you choose to suit your business. To make changes you’ll definitely want to be at least a little familiar with HTML.

When editing a campaign here are five things to remember to ensure your templates work well across multiple email clients:

  1. Use tables. Think of most email clients as ‘old school’. That is, coding for email clients is almost like coding for the web in 1999. When it comes to email, tables can give you a lot of quick wins, including centred text, borders, spacing and so on. Embrace them, even though you probably wouldn’t on your website.
  2. Use ‘spacer‘ GIF files. Need to add 10px of space at the top of a table? One sure-fire way to do this can be to use ‘spacier’ images. Inserting an invisible GIF that is X pixels high can force the spacing you need across a wider range of clients and browsers, including IE (which has a problem with empty cells, for example).
  3. Use proper CSS. Don’t take shortcuts! An example is using #ccc instead of #cccccc when using hex colours. Using full CSS, such as “font: 12px/14px Arial,sans-serif;” is good practice. Check out the w3schools tutorials for easy to understand guides on how your CSS should look.
  4. Test your templates. If you’ve never used Litmus or EmailOnAcid, now is a good time to start. Litmus is a fantastic tool for checking your email templates across all sorts of email clients. If you’re trying to get the best possible coversion rates on your email I’d highly recommend using one of these tools.
  5. Get your links and buttons right. When creating buttons in templates it’s often a good idea to use a table instead of a button image. This will ensure the button area is editable also means that your button will show whether images are on or off. After all, it’s best to make your call to action as strong as possible! For coloring links, one trick is to include the style inline and also to include a span with the same colour inside the link tag. Consider this a worthwhile extra precaution

<a style=”color: #3147ca;” href=””><span style=”color: #3147ca;”>some link text</span></a>

3. Embrace responsive design

“Mobile is the future”.

You may have heard this phrase a lot recently…but not only is it true, it’s certainly true in world of email marketing.

MarketingLand recently reported that as high as 41% of opens are now on mobile.

That’s massive.

When creating your email marketing templates you should begin to consider the @media query CSS code. When coding a mobile email template, here’s an example of how you might lay out your CSS to start styling for mobile devices:

The ‘max-device-width’ setting tells the mobile client to use the CSS styles within that block if the devices screen width is equal to or less than 480px. Media queries, as this is known, are supported in nearly all email clients, except for:

  • Android 2.1 Eclair
  • Blackberry OS 5.0
  • Mobile Windows Mobile 6.1
  • Mobile Windows Phone 7
  • Microsoft Surface
  • Yahoo Mail Mobile
  • Gmail Mobile
  • Microsoft Outlook Exchange 3 Android App

(Data courtesy of Campaign Monitor)

Trial and error works well here and the best way to check your handiwork is again with Litmus or even to simply email yourself a preview of your design and use your mobile to retrieve it!

4. Great examples of HTML email in the wild

No guide is complete without a few examples of companies killing it.

This campaign from TSUBO (courtesy of HTML Email Gallery) is a great example of responsive design in a template:


Another campaign you can draw inspiration from is this one from 500px who really nail the design even when images are turned off. In many cases images will not be enabled by default so having a clean, readable design that works even when images are turned off is a great way


A great example of a simple HTML email design comes from Amazon. Remember: just because you’re using HTML doesn’t mean you need to go overboard. A little HTML goes a long way. Amazon’s use of images to represent stars that link directly to the conversion goals of this email is a really powerful example of how you can use HTML within a very simple template.


On the opposite end of the spectrum, for an example of a full HTML campaign executed cleanly and elegantly, check out BigCommerce’s welcome series design:

bigcommerce-example-html-email-templateThis template fills the entire client window when you open it, it uses bold colours and it looks extremely professional. A nice example of what you can do with some solid design and consistent, on-brand colours.

5. Other resources

Things I’ve mentioned (or failed to mention) above that you can use to improve your HTML templates:

  1. Litmus and Email On Acid – test your campaigns.
  2. Mozify (by Email On Acid) – make your images smarter!
  3. Use media queries – checkout this guide on getting started.
  4. HTML Email Examples – HEAPS of real world examples of quality HTML emails.
  5. PSD2HTML – need to convert a PSD design into an email template? These guys will do it ASAP.
  6. W3P – a great design studio run by Juliana and Pedro Padron. If you need great design work done, check them out!
  7. Dribbble’s ‘email’ tag – all sorts of email-related designs and often a gem for email tempting ideas.

Share your HTML template

Share your HTML template in the comments (maybe even a screenshot, if you’re game!) or email it to me ( as I’d love to discuss what has worked for you and share a few ideas of what you could test next.

What other campaigns have you seen out there in the wild that have really made an impression?

The following two tabs change content below.
Chris is the CEO and co-founder of Vero. He thrives on helping customers do better and loves solving problems for Vero's customers.