Last Updated: 21 Nov 2020
HTML Email Design Best Practices
When you're designing emails, you should think about several things. Be sure to also see the other articles on HTML email.
- What does it look like when images are turned off? Most email clients load images only after the user requests that they be loaded, so many, if not most, of your users will see your emails with images off. Be sure to use good
ALTtags do display something relevant in place of the missing image.
- What does it look like in the preview pane? Most desktop email clients (and a lot of web clients) have a 'preview pane'; you can read an email without fully opening it. Make sure you put any key content or headlines near the top of the email, so they show up in the preview pane.
- Do you want a fixed width or expandable email? Most HTML email as of this writing uses a fixed with; the message is designed as a ~600 pixel wide block, and is laid out within those constraints. This is certainly the 'standard' today, and while it is certainly a safe route to go, you might consider making your email a variable width piece. If you're using a newsletter type format, and your content easily expands/contracts, variable with has two advantages:
- It lets people with wider monitors read more of your email without scrolling.
- It lets people on mobile phones read your email without horizontal scrolling.
- Keep your email to 600px wide. Anything more than that, and you risk making people scroll horizontally in email clients like Gmail.
- Should you center your message? Personally, I prefer to center messages in an email window, rather than left align them. There's no general consensus on this, but I think that it looks better and is easier to read. Many large-scale senders, such as Yelp, do this.
Common Design Elements
Make sure every email you build has some common design elements:
- 'View as Web Page' at the top: Every email should have a 'view as web page' link near the top, which takes the user to a web version. It should be done in plain text, and should be easily visible.
- 'Unsubscribe' link at the bottom: It somewhat goes without saying, but every email should have an easily visible unsubscribe link near the bottom. You may want to put similar links elsewhere, but be sure to have it near the bottom because that's what people have been trained to look for.
- 'Change Email/Manage Subscription': If your web based system gives users the ability to update their email addresses, manage their subscriptions, etc. you should provide an easy to find link.
- [Optional] Request to add sender to safe-senders list: A line of text, preferably placed at or near the top of the email, that asks the user to add your address to their address book.