Creating HTML emails is a pain in the ass! It’s much worse than just trying to get your website to look right in all the browsers. Here are some things I learned that can save you some time.
- You must specify line-height explicitly.
- Use Premailer to optimize html email code (make CSS inline, changes relative links to absolute links, etc)
- If using CSS, make it all inline
- All links must be absolute to a file hosted online
- Background images don’t work in CSS and aren’t reliable in HTML. For more consistent results, don’t use them.
- For images <img> tags in HTML tables, set their display to block so that there isn’t any white space around them
- For tables, set border-spacing: 0 to remove whitespace
- For table cells <td>, set their padding: 0 to remove whitespace
- Use HTML table instead of CSS for spacing and layout
- Use http://www.putsmail.com/ to test sending an HTML email to yourself or someone else
- Some HTML email boilerplaters
- For fonts, use font-family: ‘Open Sans’, ‘Lucida Grande’, ‘Lucida Sans Unicode’, sans-serif;
The above font stack means the following:
– Email clients will use Open Sans font if they can load it from the internet.
– Email clients that only use native fonts (there are several such clients in popular use) will use one of these equivalent fonts: Lucida Grande (Mac) or Lucida Sans Unicode (PC).
– Extremely old email clients (that don’t have the common default fonts) will use whatever sans-serif font is available to them. Get the Open Sans font using the following
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
</style>