How to create an HTML email

Designing and coding an attractive and mobile-ready HTML email message might seem like a difficult task. In fact, it doesn’t have to be, as long as you remember about a few basic rules. Assuming that you are familiar with the basics of HTML and CSS, we’ve put the rules together. Following them will make your work much easier and the results will speak for themselves. Read the article to find out more.
How to create an HTML email
Sample email you can find in the Tabler Emails package
Sample email you can find in the Tabler Emails package
  1. Use an HTML table. Don’t use divs and floats. Tables will help you create emails that will look good in every email client.
  2. Use HTML attributes to define the dimensions and the design of the table (width, valign and padding).
  3. Don’t use embedded styles. Instead, use inline CSS in your HTML code.
  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 be more than 600px.
  8. Use of email-safe fonts. (Here is the list). If you use custom fonts, e.g. Google Fonts (https://fonts.google.com), set a fallback font, to be sure that everything will display correctly no matter what.
  9. Use absolute addresses for images.
  10. Keep the email file size under 100kb.

Sticking to the rules above is an absolute must-do if you want to code attractive HTML emails. However, it’s equally (or even more) important to test them across as many email clients and devices, as possible. Also, don’t forget that these days, most users open email messages on their mobile phones, so they must be mobile-optimized. If you create your own templates, we’d recommend applying Litmus to test them. If you prefer to use ready-made email templates that have been thoroughly tested and mobile-optimized, take a look at Tabler Emails, where you can find over 54 responsive and customizable templates.

Consider becoming a GitHub Sponsor to support Tabler development and sustainability!
Support the project
Go back

Ready to download?

Look like a PRO in every inbox. Start with one of our templates!