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 programs such as Hotmail, Yahoo, Outlook, Gmail, etc., can display your emails in different ways. What looks great in Yahoo or Outlook may appear very different in Gmail.

The root of this problem is the variance among email programs in the level of support for CSS (Cascading Style Sheets). There's no real standard for what an email program should support and how it should go about supporting it. Every email program takes its own approach to rendering HTML and CSS – which is why an email that looks fine in one email program 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 programs?

Don't

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

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 programs.

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 programs.

Don’t post forms, such as opt-in forms or surveys, within your message. Many email programs 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 programs 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 programs 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 programs 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, but it's the only way to be 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.

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.

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.