HTML Email Design Tips for Best Practices

blog-html-email

It’s no secret that email marketing is one of the most effective and cost-efficient methods of marketing. As far as digital solutions go, this is one of the top ways to reach an audience. The key to email marketing is to make your email look interesting and worth reading. This is where HTML email design tips come in. With the right format for look and feel, your readers are more likely to engage with your email. However, HTML coding for emails used to be the bane of every email marketer’s existence. So much could go wrong. Thankfully, huge advances have been made over the last few years, which means that your email will be easier to format and test.

What are these advances? The biggest advance is the formation of the Email Standards Project. This initiative works with email client developers and designers to improve and standardize the way different software and clients display emails. This means that we are moving towards having HTML and CSS standards across the board and the headache of creating beautiful HTML emails is becoming a thing of the past. Another very important advance is the emergence of different services that allow you to test your campaign on various desktop and web-based email clients. These are essential to ensure that your HTML email looks great and is user friendly, no matter how people receive it. Many of these services also check if your email is likely to set off any spam filters, which is vital for any email marketing campaign. The next great addition is the availability of HTML templates. These make creating beautiful and interesting emails a breeze, even if you know very little about coding. Just take a look at the TotalSend templates as an example.

Using a template versus your own code Starting with a pre-built template makes life a lot easier, even if you know a lot about working with HTML. Templates are pre-designed to allow you to simply add in your logo, edit the text and replace the images. If you want something a little more specific, most ESPs give you the option of editing the code directly. If you are particular about your email’s look and feel and prefer to mess around with the HTML and CSS yourself, here are some HTML email design tips for best practices:

  1. If not responsive, then big – people are reading emails on a wide range of different technologies and platforms, from desktops to smartphones and everything in between. With responsive coding you’ll make every reader happy as they won’t have to scroll from side to side. Unless your content needs are more complex, one column template designs work the best. Nonetheless, always make sure your font is no smaller than 14px and your images are big enough to view on smaller devices.
  2. Keep the email width at 600px or less – this is becoming pretty standard for templates, but initially it was advised because it fits well with the viewing pane of some desktop email clients like Outlook and Thunderbird – limiting the need to scroll sideways, which might annoy some people.
  3. Use <table> and <td>, not <div> – email design is very different to web design and rule number one is to put everything in tables and apply styling only to tds, unless using anchor tags or image tags which you can apply styling to too. Another important concept is to nest the tables, but try not to go any deeper than three levels.
  4. Keep your file sizes small – huge images within the email or large attachments are very likely to trigger spam filters, meaning your readers won’t be getting your message. If the email does get through, you’re likely to annoy recipients because it may take quite a while to download.
  5. Only use PNGs, JPEGs and GIFs –other image file formats may run the risk of not opening in various email clients.
  6. Consider using video in email –with the help of HTML5, you can insert a video file that will be read on some email clients. Find out more about it here.
  7. Always use “display: block” for your images – some prominent email clients have a sneaky habit of adding white space around images, which can really mess with your design.
  8. Never use margins – Hotmail and Outlook.com have dropped support for the Margin properties within any HTML element. Although padding doesn’t quite work the same as margins, it’s safe to use in tds and gets the job done.
  9. Use web-safe fonts – email clients don’t always read a wide variety of fonts; but keeping it simple can also prove the ultimate form of sophistication.
  10. ALT Text is king – avoid relying on images too much and definitely rely on your text in your alt attribute tag! Some email clients routinely block images from downloading and many recipients don’t really bother downloading the images so make sure it’s top on your to-do list. You can even style this so it looks good, check out this Litmus article on how to do this here.
  11. Avoid images for buttons – using HTML & CSS for buttons will ensure that your call-to-actions work everywhere, in all email clients.
  12. Use inline styles – these get priority over the styles that are further away, and also work around browser based email clients like Gmail and Hotmail that will strip out your DOCTYPE, BODY, and HEAD tags.
  13. Include a pre-header – this valuable piece of real-estate follows the subject line and is often neglected. Use this to elaborate on the subject line and help grab the subscriber’s attention, potentially increasing open rates and click-throughs.

The golden rule? Keep testing!

It cannot be reiterated enough how vital it is that you test your HTML email on as many different email clients and devices as possible – even reusing a template you’ve already tested and sent out. Test, test and test again! If you don’t have the resources to test across the hundreds of email clients and devices, TotalSend provides an in app solution to review your email campaign across multiple clients and devices.

The essential pre-flight testing checklist: Now that you’ve got the coding dos and don’ts, remember to do one final check before you hit the send button:

  1. Does the from address display?
  2. Is there a link to a web version on the top of your email?
  3. Have you put in the right subject line?
  4. Have you used spell-checker on your copy?
  5. Is there an opt-out in the footer and is it working properly?
  6. Is your design fully responsive?
  7. Are all your links working and directing to the correct landing pages?
  8. Have you given all of your images alt text?
  9. Have you tested on all of the major email clients and platforms to make sure your email is rendering consistently?
  10. Have you checked to see that your spam score is lower than the spam threshold?

Even though HTML emails are rapidly improving, providing both the sender and the reader with a better experience, it’s clear that as an email marketer, there’s a lot of work to do. However knowing the best practices ensures that you get the best possible response from your email efforts. Get started with your very own HTML email marketing campaign today and get the benefit of excellent measurable data to check the effectiveness of your campaign with TotalSend.