topic |

The Do’s and Don’ts of Email HTML

If you've spent much time creating and mailing email messages, you've probably noticed that email clients such as Hotmail, Yahoo, Outlook, Gmail, etc., can display your emails in different ways. What looks great in Yahoo or Outlook 2003 may appear very different in Gmail or Outlook 2007.

The root of this problem is the variance among email clients in the level of support for CSS (Cascading Style Sheets). There is no real standard for what an email client should support and how it should go about supporting it. Every email client takes its own approach to rendering HTML and CSS – which is why an email that looks fine in one email client can look different in another.

So how can you or your designer ensure an email design remains consistent and looks great across all these different email clients?

Don't

Don’t link to an external .css file. This will simply be ignored or stripped by many email clients.

Don’t use CSS within the <style> section of your HTML code. Similar to an externally referenced .css file, many elements from this section will be stripped or ignored by a number of email clients. 

Don’t use Divs to manage your layout.

Don’t rely on background images within your design. These are sometimes ignored, so you’ll end up with a plain white background instead of one that shows off your lovely background image.

Don’t rely solely on graphical HTML editors, even great ones like Dreamweaver. They generally default to use external CSS or header CSS to style the design (which is only natural, since this is exactly how you should create the style and layouts for a website). So no matter how good the design looks within the editor itself, you’ll end up running into issues with various email clients.

Don’t post forms, such as opt-in forms or surveys, within your message. Many email clients lack support for forms, so the submit button won’t do anything when your recipient clicks on it.

Don’t include videos within your message. A number of email clients have trouble with embedded video, and this will lead to the video either not working or being stripped out of the email entirely.

Don’t rely on an image-only / image-heavy design. Many email clients turn images off by default, requiring the recipient to click a button or link to turn the images on. So too much image content could leave your email in a bad state when the images are off.

Don’t use Flash elements in your design. Most email clients ignore / strip Flash.

Don’t use Javascript. It will be ignored or even treated as a security risk. Once someone receives a security notice about one of your emails, they’ll be unlikely to ever open another one.

Do

Do all of your styling via inline style attributes within the body of the document (i.e. < p style="border:1px solid #c00; font-size:12px;">).

Do use Tables for your layout. This is no longer common in web design and may sound archaic to anyone who has been designing web sites over the past several years, but it is the only way to be absolutely confident that your layout isn’t going to break somewhere.

Do use background colors, as they’re more reliable than background images. But even then, consider how your message will look against a white background, because it’s possible the background color will be ignored occasionally as well.

Do hand-code your own design. Or use our WYSIWYG editor if hand-coding is not something you know how to do.

Do link to forms that are hosted on your website, since these will always work just fine.

Do link recipients to the video on your site. A great method for doing this is to use an image overlaid with a play button (as you would see on a YouTube video before you start playing it) so that recipients automatically think to click the image to start the video.

Don’t rely on an image-only / image-heavy design. Many email clients turn images off by default, requiring the recipient to click a button or link to turn the images on. So too much image content could leave your email in a bad state when the images are off.

Do follow the 80/20 rule for balancing images with other content. If roughly 20% of your content is image-based and the roughly 80% is text / other stuff then you’re doing alright. You can certainly have a smaller percentage of images, this is just good to keep in mind.