If you have ever worked with HTML emails, you know how difficult they can be to work with. We also know how important they are in enhancing relationships. So, how can we use them to effectively reach our audience given its difficulties?
Know what email client(s) are you developing for
When I first started working with HTML emails, my biggest mistake was not asking the client what their audience’s primary email client was. If you are provided with this information, that’s a big first step, but also do keep in mind that in use, emails are often opened in any number of clients now.
Some current statistics on email clients according to Email Client Market Share (current top 5):
- Apple iPhone: 28%
- Gmail: 16%
- Apple iPad: 13%
- Outlook: 9%
- Apple Mail: 8%
Constructing your email template
Based on this, you now have a good idea of how to build your template and what to target it to. There are quite a few guidelines that you need to be aware of (and note that HTML emails do not comply to an approved set of guidelines), but in general:
- use background images
- use floats
- use positioned objects
- use pseudo selectors or pseudo elements (i.e. – a:hover or div::after)
- use table-based layouts
- use inline CSS
I do recommend using HTML email boilerplate templates as a starting point. I prefer the Sean Powell’s Email Boilerplate, but here are a few others:
Concentrate on content, not necessarily design
A great looking email is always eye catching, but that initial ‘wow’ factor won’t necessarily lead to a user action. Make sure your content is specific, to the point, and is targeted to the correct audience. More importantly, make sure the subject line is short and targeted.
Test, test, test…then test again
This is by far the most important part of your email template. If you are using a service such as Campaign Monitor or Mailchimp, both provide testing options. Otherwise, Litmus (screenshot below) and Email on Acid provide paid testing solutions that cover just about any email client. I also recommend setting up accounts for as many popular email clients as you can. Send your tests to each and across multiple devices if need be.
In general, unlike the Desktop and Mobile pages, HTML emails do not have a compliance standard and this will probably never change. However, as these challenges will continue, today we have the tools and know how to get past this lack in conformity, and remember, TEST, TEST, and TEST again!