HTML email best practices

It’s a guide on how to design and code good-looking and mobile-ready HTML email message. It is assumed that you are aware of the basics of HTML and CSS.

  1. Use HTML table. Don’t use divs and floats. Tables will help you in creating an email which will look good in every email client.
  2. Use HTML attributes to define the dimensions and look of the table (width, valign and padding).
  3. Don’t use embedded styles. You need to inline all CSS in your HTML.
  4. Avoid Shorthand CSS (#000).
  5. Avoid Flash and JavaScript.
  6. Try to avoid HTML5 and CSS3.
  7. The width of an email shouldn’t surpass 600px.
  8. Make use of email-safe fonts (here is its list). If you’re using custom fonts e.g. google fonts (https://fonts.google.com) make sure to set a fallback font to be certain that everything will be well displayed in every circumstance.
  9. Use absolute addresses for images.
  10. Keep Email File Size Under 100kb.

Above we mentioned 10 most important things which you should keep in mind by coding HTML emails. However, even more, important is testing as much as you can. Every one of your emails should be tested in various email clients and devices. The majority of messages is currently opened on mobile phones so don’t forget about the mobile-ready quality!

If you want you can make use of ready-made and tested templates such as Tabler Email. If you’re creating your own templates, we advise you applying Litmus to test them.