Because there are no set standards for HTML emails, designing and coding so that the emails work in every inbox can prove difficult, even for someone with web design experience. Writing code for HTML emails requires using outdated methods of building web pages. Tables are the main structure behind HTML emails, so using the div element will not work. Stylesheets that are external to or embedded in your HTML email are often stripped out by many email clients. And the ever-useful ‘float’ for images won’t work here either. To avoid many of these pitfalls, HTML emails are typically created by using tables, inline CSS, and element attributes (such as cellpadding, valign, and width).
Below is a list of some helpful best practices for HTML emails to help you design and code the best possible HTML email.
- Keep the design simple.
- Build your structure using the table element and nest or stack tables when necessary to get the desired layout.
- Wrap your background color in its own table.
- Use element attributes to set the dimensions of your tables.
- Keep your CSS inline.
- Use absolute links for images, and include the full URL. This means hosting your images on a server.
- Give all images alt tags.
- Host a local version of your email on your website and link to it in the email.
- Use compelling subject lines.
- Encode all special characters.
- Use our templates as a starting point.
- Test, test, test. Be sure to test in multiple email clients.
- Widths larger than 600px.
- Background images.
- Borders, they don’t work.
- Shorthand CSS, use: color:#FFFFFF instead of color:#fff
- Using PNG images.
- Placing important information on images/graphics.
- Spamming your audience.
- Sending large campaigns through a desktop client, like Outlook.