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.
Hi Glenn,
I came accross your blog regarding the best practices for html email design. Im curious to learn more about optimising emails to be viewed on mobile devices. Can you give me some guidelines regarding this or if possible, can you send on some website links that would relate to this topic.
thanking you in advance
Hi Sean,
You certainly can optimize for mobile devices, although strangely not many people are as yet.
You can use a media query inside an embedded style sheet (just remember to use the !important value to overwrite the inline styles).
I will try to find some articles and post the links or write a follow up article that provides more information.
– Glenn