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
HTML email best practices

Essential Tips for Creating HTML Emails

When designing HTML emails, it’s important to follow these best practices to ensure compatibility and a professional look across all email clients:

  1. Use HTML tables instead of divs and floats. Tables help ensure that your emails render properly across all email clients.
  2. Define table dimensions and layout using HTML attributes like width, valign, and padding for better control.
  3. Use inline CSS in your HTML code rather than embedded styles to ensure broader email client compatibility.
  4. Avoid shorthand CSS (e.g., #000), as some email clients may not interpret it correctly.
  5. Do not use Flash or JavaScript as they are not supported by most email clients.
  6. Minimize the use of HTML5 and CSS3 features, as many email clients do not fully support them.
  7. Keep the email width under 600px to ensure that it displays correctly across different devices.
  8. Use email-safe fonts. Here’s a list of compatible fonts. If you use custom fonts like those from Google Fonts, make sure to include a fallback font.
  9. Use absolute URLs for images to guarantee that images load properly.
  10. Keep the email file size under 100kb to avoid slow loading times and potential delivery issues.

Summary

Following these guidelines is essential for crafting visually appealing and functional HTML emails. However, testing is just as important. Always test your emails across as many clients and devices as possible, especially since many users open emails on mobile phones.

404404
One of the templates you can find in our collection. You can find more on our email templates page.

For those who prefer ready-made templates, check out Tabler Emails, where you can explore over 80 responsive, customizable templates that are thoroughly tested and mobile-optimized.

emails banner imageemails banner image dark
NEW VERSION!
80 eye-catching, customizable email templates
Go back