HTML Email Design Best Practices [StartupCTO]

Last Updated: 01 Nov 2023

|

Author: 114.119.137.232

Page locked

This page is currently locked for editing by another user. You have to wait until this user finishes editing or the lock expires.

Currently locked by: 72.52.196.79
Lock expires at: Jan 27, 2026 12:46 PM (70 min)

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

== HTML Email Design Best Practices ==

When you're designing emails, you should think about several things. Be sure to also see the [[/marketing-tech/html-email/|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 ''ALT'' tags 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 [[http://www.gmail.com/|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 [[http://www.yelp.com/|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.
 * **Privacy Policy/Standard Legal Language/Postal Address/Telephone Number/etc. at the bottom**: make it easy to find.
 * **[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.

Page locked

About Me

Recent Changes

Get In Touch

Follow