How to create an HTML email

Essential rules for coding HTML emails

There are a handful of rules worth following if you want your email to render properly across email clients and look professional while it’s at it:

1. Use HTML tables instead of divs and floats. Tables generally render properly in all email clients.
2. Define table dimensions and layout with HTML attributes like width, valign and padding, which gives you better control.
3. Use inline CSS in your HTML rather than embedded styles. More email clients understand it.
4. Avoid shorthand CSS, like #000. Some email clients don’t interpret it correctly.
5. Don’t use Flash or JavaScript. Most email clients won’t run them anyway.
6. Go easy on HTML5 and CSS3 features, since a lot of email clients still don’t fully support them.
7. Keep the email width under 600px, so it displays correctly on different devices.
8. Use email-safe fonts. Here’s a list of compatible fonts. If you use custom fonts, like the ones from Google Fonts, remember to include a fallback.
9. Use absolute URLs for images, otherwise they often won’t load.
10. Keep the email file size under 100kb, or you risk slow loading and delivery problems.

And then test it

The rules only get you so far. Testing matters just as much, so send your email to as many clients and devices as you can get hold of, and phones especially, since that’s where a lot of people will open it.

If you’d rather not start from scratch, take a look at Tabler Emails, where you’ll find over 80 responsive, customizable templates that have been tested and are ready for mobile.