Best Practices for Creating Effective Cross-Platform Email Templates

It's unlikely that you'll ever be able to create a specific email template that looks exactly the same across all email service providers. However, you can create an email template that looks great in all email service providers! Here are the best practices to keep in mind.

  • Use Tables: Using nested tables to create your html layout may seem somewhat outdated when it comes to web pages, but it's the best way to create an html email template that displays consistently and doesn't break in size or width dimensions.

  • Assign Width by Table Cell: Do not assign widths using the <table> tag. Assign each width individually in every <td> tag.

  • Do Not Use Percentage Assignments for Table Cell Width: Do not use the common and more flexible percentage assignment for table cell width. Use specific pixel count widths every time.

  • Avoid CSS or Use Inline CSS: In general, CSS can cause display malfunctions in many email service providers. However, if you must use CSS instead of individual font assignment tags, apply the CSS inline. Gmail will strip CSS out of the <head> or <body> tag and your email will be entirely unformatted as a result.

  • Use <font> Tags: Instead of CSS, use old-school <font> tags to determine font size, decoration, color and weight. Your display will be more consistent.

  • Avoid Dark Backgrounds: Because some specific email clients may strip your background color or your font color, a dark background with a light font may end up looking like a dark background with a black font or a white background with a white font. Use light background colors (or no background color at all) and black or dark primary fonts.

  • Be Responsible with Images: We've covered images in great detail previously, but remember that most email service providers don't display them. Don't design your html email template using spacer images and be sure to practice all best-practices for images.

  • Test. Then Retest. And Test Regularly. Most importantly, test your email template regularly across all primary email service providers to check how it's displaying. Testing before every single send is recommended.

There's no such thing as a perfect html email template that displays exactly as you envisioned it in every single email service provider. However, that doesn't mean that your html email template can't look great and be effective across all email service providers.

Was this answer helpful?

 Print this Article

Also Read

CSS is Not Your Friend!

Using CSS in an html email template is, unfortunately, a poor idea. Many email clients,...

Other Cross Email Service Provider Design Issues

While it's nearly impossible to provide a comprehensive list of tricks for ideal display across...

Tables are Your Friend!

Almost all email clients respond well to tables built with html to format your email. In fact,...

Should You Segment Your List by Email Service Provider?

Some companies will go through the trouble of email list segmentation by email address and...

Designing Overview

If the world were perfect, your email would look exactly the same whether you opened it in an...