There are no standards we can work to when we are coding HTML emails but there are some generally accepted best practices for HTML email design. Here are mine:
- Use tables for layout (yes I know it’s makes you twitch to type ancient code but it works!)
- Maximum width of 600 pixels (try to minimize the need for horizontal scrolling)
- Do not use images if I can achieve the same result with text (images are typically blocked by default)
- Optimize images for fast download times (choose the right file types and the right compression)
- Use alt text (images are usually turned off, alt text isn’t – so use it wisely.)
- Keep image height and width attributes so that when images are not loaded by default in most email clients your layout is still intact and your descriptive alt text is displayed.
- Use inline CSS (Gmail will strip out any content in the <head> tags)
- Ensure images are hosted on a server and they are linked using an absolute path.
- Use abstracts of information and link to pages for more info (unless it is a press release type of email.)
- No multimedia. You have text, inline CSS, and images – forget anything else.
- Give the the option to unsubscribe! (would you prefer to get valuable feedback data or just get marked as spam and never know why?)
- Tell them why they are receiving this email (they signed up for it, didn’t they…)
- Give the user what they need fast! Short and to the point title, snapshot of the content, and an easy way to find more info.
- Don’t make them think. Tell them what to do.
About the author:
Glenn Hodgkinson is a web designer, developer, UX evangelist, instructor, and author. He has been teaching HTML email design for a few years now and he can be contacted via his Boston web development company.
Glenn Hodgkinson is a web designer, developer, UX evangelist, instructor, and author. He has been teaching HTML email design for a few years now and he can be contacted via his Boston web development company.