- Use an HTML table. Don’t use divs and floats. Tables will help you create emails that will look good in every email client.
- Use HTML attributes to define the dimensions and the design of the table (width, valign and padding).
- Don’t use embedded styles. Instead, use inline CSS in your HTML code.
- Avoid Shorthand CSS (
#000). - Avoid Flash and JavaScript.
- Try to avoid HTML5 and CSS3.
- The width of an email shouldn’t be more than
600px. - 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.
- Use absolute addresses for images.
- 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 80 responsive and customizable templates.