If you've spent much time creating and mailing your own custom email messages, you've probably noticed that not every email client is displaying those messages in the same way. What looks great in Yahoo or Outlook 2003 may appear broken in Gmail or Outlook 2007.
This root of this problem is the variance among email clients in the level of support for CSS (Cascading Style Sheets). Unlike web browsers, there is no real standard for what an email client should support and how it should go about supporting it. Every email client - and there are significantly more commonly used email clients than there are commonly used web browsers - takes its own approach to rendering HTML and CSS.
So how can you or your designer ensure a design remains consistent across all these different email clients?
1. Avoid linking to an external .css file. This will simply be ignored or stripped by many email clients.
2. Refrain from using 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.
3. Since you should avoid external or header CSS, all of your styling should be done via inline style attributes within the body of the document (i.e. < p style="border:1px solid #c00; font-size:12px;">).
4. Email layout should be done via table tags instead of div tags. 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.
5. 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. A background color will be more reliable than an image, so use that instead. 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.
6. Be careful using 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.
7. Stay away from posting forms, such as opt-in forms or surveys, within your message. Many email clients do not support forms, so the submit button within the form won’t do anything when your recipient clicks on it. You should link directly to a form as an alternative to including it in your message.
8. Don’t include videos within your message. A number of email clients have trouble with Flash (which will almost certainly be the format of the embedded video), and this will lead to the video either not working or being stripped out of the email entirely. As with forms, you should link recipients to the video so they’ll definitely be able to watch it. 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.
The lack of support for Flash also means, of course, that you should not use Flash elements as part of your design.
9. Don’t incorporate Javascript into your design. Javascript will be treated as a security risk by any number of email clients and will be stripped out. Javascript could also potentially generate a warning to recipients that your email is dangerous - few folks who receive such a warning are likely to want to open another email from you in the future.
10. Try not to send out emails that are image only. It’s tempting to do this (and fairly common for a lot of mailers) because it’s far easier to control the design of an image than it is an HTML document. But the problem is that many email clients turn images off be default, requiring the recipient to click a link to turn the images on. An image only email will essentially appear to be an unsubscribe message to these folks - giving them little reason to turn the images on and every reason to just unsubscribe.
If you’re interested in learning exactly which email browsers support what (in terms of CSS, at least), take a look at the excellent Email Standards Project. They breakdown exactly what CSS is supported by most of the commonly used email clients.
Any comments or further design suggestions? Let’s hear ‘em in the comments!
Great article. I've had to learn most of these things through trial and error - very frustrating that Outlook took a giant step backwards with their CSS support. Another tip - always set the height and width for every image in the email... otherwise, before your recipient turns their images on, the email will get stretched out and your text will be lost in the maze of red x's.
Posted by: Alena Callaghan | December 02, 2008 at 08:05 AM