Email Marketing Design Best Practices
Tips for getting started with email design
I know what you’re thinking. Email design? Probably the most boring design topic ever. But, as an essential tool to promoting your products, you can’t get by with bad email design.
Like other types of design, good email principles follow best practices for design including contrast, layout, alignment, and consistency. We’ll go over some HTML and layout best practices to help get you started on creating templates that you can re-use.
Here are a few guidelines to keep in mind when creating HTML email campaigns.
- Mobile: Create emails with a mobile-first approach
- KISS: Keep everything as simple as possible.
- 600 pixels: Emails should be 600–800 pixels maximum width.
- Use tables: Code the template using table-based layouts
- Use element attributes: Such as cellpadding, valign, and width) to set table dimensions
- No complexity: Avoid using complex selectors (such as descendant, child selectors, sibling selectors, or pseudo-elements)
- Grids: Use a grid-based layout to keep your design looking clean and organized
- Tag your images: Always include appropriate tags for images (such as alt=my-amazing-photo)
- Few images: Assume that images will be blocked by some email clients or that background images will fail to load
- Type for the web: Use a web-safe typeface such as Arial or Verdana to ensure that it will load properly
- Button sizes: Buttons should follow best practices for size (~46x46 pixels)
- Responsive type: Make sure text is responsive and legible at smaller device sizes (16–18px or 1m is the best)
- Ems: Use ems instead of pixels.
- Test, Test, Test!
Example Template Examples
Variation on the Same Design
You should always test your emails using Litmus or another service to ensure that they look good on different browsers.
Calls To Action
Calls to action are extremely important to drive results and encourage the user to perform as task. A good call to action should be compelling, descriptive and persuasive.
A strong CTA should use positive language and a command verb to drive the user to complete an action. The user should never feel that they’re unsure of what’s going to happen when they click a CTA.
Examples of poor CTAs
- Don’t Miss Out
- Click Here
Examples of great CTAs:
- Download the Report
- Order Now
- Read More
Ensure that you’re using a bright CTA that has enough contrast in order to see your command verb text.
For accessibility reasons, and to ensure that your link stands out, use both color and another attribute (such as an underline, carrot or both!) to set your link apart from the rest of the copy.
Good link design
For accessibility reasons, links should have multiple identifiers. For example, a strong link includes an underline, bold or arrow.
Poor link design
Buttons vs. Links?
If possible, use buttons for the primary action that you want the user to complete in an email. Links can be used for secondary actions or inline text.
The Squint Test
An easy way to determine if your CTA is obvious is to perform a quick squint test to see if it stands out.
Unfortunately, not all typefaces work across email clients, so you’ll have to hold off on using that lovely Comic Sans. Always use a web safe typeface:
Sans Serif Web Safe Typeface:
These are the best san serif typefaces to use.
- Arial Black
- Trebuchet MS
- Use a minimum font size of 16px (or 1em). 18–22px is better. A recommended line-height of 1.2em to 1.4em is best (however, it depends on the font size you’re using. For more on this, see this great resource).
Email templates, buttons and images should follow best practices for accessibility. Accessibility allows users who are vision-impaired, or are using a device reader to assist them/
Make sure color is not the sole indicator of an action
When colors are used as the sole method for identifying screen elements, controls, or giving instructions, people with vision impairment may have difficulty reading the text.
Tips for CTA accessibility
- Links should be underlined and have color contrast (such as bold)
- Ensure the color passes accessibility rules for contrast
- There must be sufficient contrast between foreground and background link text colors.
Make sure body text passes contrast analyzer test for accessibility
** I hope you’ve enjoyed these tips, as always please send comments or feedback!