If the world were perfect, your email would look exactly the same whether you opened it in an Outlook email client, Hotmail, Yahoo! or Gmail. However, in truth, your specific email template may display entirely differently in each of those email clients. To add to the challenge, how an email displays in an email service provider is somewhat of a moving target since email service providers themselves often change their parameters and rules. What you're reading today may be entirely out-of-date in less than a year. However, most of the tips and tricks below have been fairly consistent for years now. While it's always important to test your email template across several major email service providers, here are some things to keep in mind when designing for the big email service providers.

Decide Which Email Service Providers are the Most Important

The first step that you'll want to take is to examine your current email marketing list and determine which email service providers are important enough to design an specific email template based on. Chances are that the bulk of your email list is Hotmail, Yahoo! and Gmail. However, if you are in a b2b email marketing program, you may find that you have a significant number of users who are using Lotus Notes. In the near future (possibly already depending on when you're reading this), you may be sending to a Facebook email address. Take a look at the list of email names you have (and perhaps a second look at the list of the most active email users that you have). Then determine which specific email service provider or providers are most important for your specific email template to display perfectly in. If you don't have an existing email database list to study and are just starting to build your contact list, then it's safe to assume that Hotmail, Yahoo!, Gmail, and any email address viewed in an Outlook client will all be important to you.

Should You Segment Your List by Email Service Provider?

Some companies will go through the trouble of email list segmentation by email address and sending specific modified templates to each. For example, since Yahoo! displays images by default, their email to their Yahoo! clients may include more images. If you have a large email database and a significant in-house resource pool to create multiple copies of emails, this process may be worth your time. However, as a general rule, it's better to design one specific email template that will appeal to all email service providers.

Tables are Your Friend!

Almost all email clients respond well to tables built with html to format your email. In fact, it's almost imperative that you use tables because Gmail and certain versions of Outlook don't support html commands like float, margin, and padding. However, even when using tables to create your html email layout, there are inconsistencies in how html commands such as width, margin, and padding are handled in various email clients. Don't worry, you can still create a table layout that will look mostly consistent across all of the major email service providers if you keep the following key points in mind:

Assign Width in Each Table Cell: It's a not uncommon practice when developing an html table to assign the table's width in the main <table> tag. Unfortunately, when you create an html email template that includes table widths, <td> widths, <td> padding, and even CSS padding commands, your email will almost certainly look different in just about every email client. It will probably also break in at least one specific email client! How can you avoid this? Set the width in individual table cells rather than in the table itself. If you're familiar with html code, here's how it should look.

<table cellspacing = "0" cellpadding = "5" border = "0">
     <td width = "100"></td>
     <td width = "200"></td>

Most importantly, remember that if you forget to specify the width in an individual table cell, the email client will most likely not figure it out and your email will break in appearance in most clients. Also, do not use percentage based assignments for your table cell widths. Several email clients (particularly Outlook) don't recognize or support percentage assignments for tables.

CSS is Not Your Friend!

Using CSS in an html email template is, unfortunately, a poor idea. Many email clients, particularly Gmail, will overwrite your CSS with their own formatting. While CSS is a great, reliable, efficient tool for designing web pages, remember that an html email template isn't a web page. You'll want to follow these solutions for not using CSS when you design emails

Use a Container Table to Assign a Background Color: Several email clients will completely ignore background color commands in your CSS or even your html <body> tag. However, you can use a container table (a table that "contains" all of the other tables nested within it to create your email layout) to assign a background color. This would be the only instance in a specific email where it's safe to use a percentage to assign your table width and to assign the width within the <table> tag itself. Why is that? Because you're assigning a background color (or image, though that is unadvisable) and you want the table to take up the entire background of the email no matter what size the email displays at. Here's how the code should look.

<table cellspacing="0" cellpadding="0" border="0" width="100%">
     <td bgcolor="#000000">
      Your email code goes here.

That said, as we're about to note, you may want to avoid background colors in your emails.

Avoid Light Fonts on Dark Backgrounds: A dark-colored background with a white or light font may work great on landing pages and web pages. In fact, often a dark background with a bright font can cause products and messages to "pop" effectively. However, when you use this technique in an html email template, you run the risk of a serious break in your email display. Even if you assign the font color and the background color inline and using tables rather than CSS or <body> tags, the variability with which email clients display html can mean that for your subscribers the email may appear as a white background with white text or a dark background with black text. With email templates, it's always safer to err on the side of "somewhat more boring" but most likely to display correctly across all email clients. Sticking to light backgrounds and dark fonts will mean that even if the specific email client overwrites your background or font color with the standard white background and black font, your email is still readable to users.

Use Font Tags Instead of CSS: Gmail strips all CSS from both the <head> and <body> tags. That means that if you're going to use CSS to assign font properties, you'll need to do it by assigning the CSS "inline," which means to assign it on the paragraph or table cell level. However, even then you run consistency risks. While CSS is supported by all major email service providers, it's also an imperfect science in the world of email templates. While it's a bit "old school," using a <font> tag to control your font size, color, decoration, and weight is a more consistent and safe way to ensure your specific email displays as desired across multiple email service providers.

Other Cross Email Service Provider Design Issues

While it's nearly impossible to provide a comprehensive list of tricks for ideal display across multiple email service providers, especially because the rules frequently change, here are a few other key points to keep in mind.

Spacer Images: It's common to design a web page using spacer images, or clear gifs that are the dimensions required to create a desired buffer space between text blocks or areas of the webpage. Do not replicate this process in designing your html email template. Because in most email clients images do not load, you may be creating either a broken display or a display that appears to users as a high number of unloaded images.

Image Dimensions: Always assign height and width dimensions to your image. If the image doesn't load then at least your email format and layout will hold.

Use of Images in General: In general, remember that the vast majority of email clients don't load images; therefore it's in your best interest not to design around including them. In particular, don't use a background image!

Overwrites: In some cases, the best advice is to accept that some specific email service provider will overwrite your html and style commands with their own. This is particularly true in the case of links, which many email service providers automatically overwrite with a blue, underlined format. You may save yourself hours of headaches and grief if you simply accept that your email may not display using your exact desired methods in certain email clients and not take hours and days to battle for your specific branded design elements!

Training Your Design Team: Finally, if you are designing your own email template in-house, it's probably worth your time to train your design team on the limitations and best practices of designing an html email template versus a webpage. Otherwise, you may have frustrated designers who don't understand why they can't match your brand requirements in an email or who design non-optimized html email templates because they don't know the limitations. If you're using a pre-made email template by your email marketing or newsletter platform, it has likely been designed with all of these concerns in mind. However, an in-house design team may not include an expert on the ins-and-outs of creating an html email template.

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.

Related Articles: