Need to create a website-like email newsletter for your client’s campaign?

Or, an email report with specific layout?

Beware! Most email clients have far lower support for CSS and HTML than the web. Your beautiful design work might look great on one email client, but look undesirable on a different email client.

The best way to ensure your email looks great across all clients is to test on all of them. Unfortunately, it is a very time consuming process since there are over 30 email clients on the market. My suggestion is to pick a list of most popular email clients to test. You can narrow down the list by knowing which email clients your recipients will most likely to use.

Here are the top 10 most popular email clients (as of June 2011):

Outlook

iOS Devices (iPhone, iPad and iPod Touch)

Hotmail

Apple Mail

Yahoo! Mail

Gmail

Windows Mail

Android

AOL

Thunderbird

[From: http://www.campaignmonitor.com/stats/email-clients/]

My second suggestion is to code or design the email with the limitations in mind. There are some coding practices that will help creating a successful html email.

Use inline styles instead of external or embedded style sheets. Many email services cut everything above the body tag and disable external style sheets.

Never! I mean NEVER use JavaScript in an email. Your email will be marked as spam by most email services. Other elements that may not supported: HTML Forms, ActiveX components, Adobe Flash animations, animated GIFs.

Use table for layout instead of div. Tables are more consistently supported.

Declare width, cellpadding, and cellpsacing for all tables and table cells.

Do not use background images. Background colors are okay.

Do not use images for important content. Many email clients turn images off until it is allowed by the user.

Provide alt text and declare both width and height for all images.

Finally, test your email by sending samples to the selected email clients. To perform a more thorough test, check the samples on different operation systems.

If you want to learn more about this topic, website such as Campaign Monitor http://www.campaignmonitor.com/resources/) provides in-depth information and guides (see sample below) about CSS support in email. 

Other useful websites:

http://www.email-standards.org/clients/

References:

http://www.davidjrush.com/blog/2011/05/email-client-compatibility-html-friendly-emails/

http://assistenza.mailup.it/KB/a382/css-and-e-mail-clients-compatibility-issues.aspx

http://kb.mailchimp.com/article/how-to-code-html-emails

This simple but amazing video walks through the evolution of the web from it's early days to today. Everytime I see this it gets me excited to create something. Take a look...I'm sure you'll like it: You can also download a higher resolution copy below: Windows Media File (55 MB) | Quicktime File (96 MB)