How to create an HTML newsletter
An HTML newsletter is definitely the best weapon for a modern and compelling email marketing strategy. By now almost every company relies on HTML emails to promote its own brand or products: in comparison with text-only messages, in fact, they are much more appealing, they provide a better reading experience, and allow to keep track of all users’ actions with an analytics tool. Provided they’re masterfully crafted, of course.
In other words: an HTML newsletter template must obey to some precise technical rules to be really effective on every device. It’s not just a matter of graphic taste – which is anyway crucial, to be sure – but also of neat coding.
Here’s a list of the 10 main things you need to remember when you start crafting an HTML email template:
- Structure your code along classical tags, such as <p> and related inline elements; taking care of creating a good flow of information starting from the most relevant content to the rest.
- Use tables. It sounds odd thinking of modern HTML standards, but tables are still the best way to organize your content in a newsletter. However, don’t insert them one inside another, and possibly don’t use the rowspan and colspan attributes (that join several cells in the same row or column).
- Avoid <div> if possible. Although the <div> tag is not prohibited, it is advisable to use it as sparingly as possible, as it and any associated CSS styles are not always read in the same way by different email clients. In addition, CSS styles that have made the <div> tag so popular (position, display, etc) don’t work with most mail clients. The same applies to <ol>, <ul> and <li> tags.
- Write CSS inline. Like this: <p style=”font-size:12px”>Text</p>. Linked stylesheets are generally ignored by the majority of email clients.
- Keep en eye on the width. The maximum width of the newsletter body should not exceed 600px; the only height limits are based on common sense and the assumed level of interest of recipients.
- Choose the right font. Given that emails are often read via webmail, it is necessary to limit the choice amongst the set of standard web characters. In general, it’s recommendable to rely on the classical ones like Arial, Palatino Linotype, Verdana etc.
- Always provide an alt text to images. Since the majority of desktop and webmail clients simply block images by default, it’s a good rule to always insert an alternative text and explanation (tag “alt”). More in general, remember that your final newsletter should never be completely based on images – also to avoid to end up in the junk folder. Also, make sure that your call to action is available in plain text as well.
- Think about your industry and brand. The more you focus on what you want to offer, the more your design will convey the intended message. In other words, diverse targets and categories should be matched with proper HTML layouts: also to make the reader feel instinctively comfortable with the information you’re proposing.
- Keep it light. The global weight of your template should never exceed 100Kb: if it does, the recipient could find it hard to download it (especially if he uses a 3G connection).
- Test. This is very important, since templates can be displayed very differently from one client to the other. So it’s a good practice to try your email layout on a number of platforms: we recommend that testing should be carried out on at least AOL, Yahoo, Gmail, Hotmail (Outlook.com), Android Mail, Android Gmail, Apple Mail, Gmail for iOS, and clients like Thunderbird, Windows Mail, Apple Mail, Outlook 2007/10/13+, Outlook 2000/03.
Creating a good HTML newsletter, though, can be very challenging even if you follow all these rules. If you’re not an expert coder, however, here’s an easy solution: a wide choice among 300 templates, fully tested and compatible with all major email clients or webmails (mobile versions included) ready to be put into your favorite software’s editor and personalized as you wish.
