HTML Email Design Guidelines & Resources
for html emails you create
The biggest challenge for HTML email designers is building an email that renders well in all popular email applications. Building an HTML email is not like building an HTML web page. HTML emails look different depending upon the email application used to view the email.
The key is to focus on these things:
- Keep your HTML email simple. The more complex your email design, the more likely it won't render well on one of the popular email applications.
- Only use basic HTML code. That often means nesting tables, bringing CSS inline, and following the coding guidelines outlined below.
- Make your email subject line interesting and an accurate reflection of the email's content. Check out this resource for ideas: The Art of the Subject Line
- Test your HTML email in as many email applications as possible before sending it.
HTML Coding Guidelines
- Use tables to layout your HTML email. Instead of setting the width of the entire table, set the width of each cell individually.
- Use inline styles. Though on a website you might create a class, most browsers will block this out.
- Post your images on your publicly accessible web server. In your HTML code, use absolute paths to point to images.
- Give all images Alt tags and do not set width or height.
- Wrap the entire email in a 100% width table. This is especially important if you want to create a background color for your entire email.
- Limit email width to 600px.
- Use codes for all characters. This ensures all characters are displayed correctly by all web browsers and email applications. For example: For quotes, use " in the HTML.
- Test, Test, Test! Be sure to test your email on all major web browsers and email applications.