Best Practices for HTML Email Templates

The following best practices can be put into use when creating an email within the HTML Editor.

Consider using an HTML email boilerplate to start:
- https://github.com/seanpowell/Email-Boilerplate
Use HTML tables for layouts
Set the width in each cell, not the table
Nest tables rather than using margins / padding
Use inline styles instead of global styles
Guide to CSS:
- https://www.campaignmonitor.com/css/
For mobile compatibility, keep width to 600px max
Remember that the "fold" on webmail clients tends to be extremely high up the page (on a 1024x768 screen, most interfaces won't show more than a hundred pixels or so) - get your identity section in right at the top so the recipient knows who you are.
Do not use the CSS float property.
iPhone might automatically increase text size. Use this if necessary: -webkit-text-size-adjust: none;
Double-check that all link URLs start with http:// or https:// and redirect to the correct page.
- The template will not be saved if there are improperly formatted URLs

Always include image dimensions
Remember that images will not always be visible in emails
Be sure to link all images to your website
Refrain from using background images (they break in Outlook 2007 and Gmail)
If you want to use a background image in your design, always provide a background color the email client can fall back on
Use .gifs and .jpg instead of .png files
Use align for image placement: <img src="image.jpg" align="right">
Videos in emails are not reliable and should rarely be used