HTML Email Coding

[SunnaH]

I have recently embarked on coding a web email campaign and for the most part have been using guidelines from MailChimp. I was forwarded screen captures from an Outlook 2007 client that were disturbing. I used inline CSS instead of embed. My tests show up fine but this person swears different. Is there a BrowserCam version for email clients? How can I be sure? AOL, Gmail, YahooMail, Hotmail, Outlook, and the rest see my HTML email properly?

I have attached a sample for reference.

[ralph.m]

Outlook 07 is a shocker, and has set email design back into the dark ages, unfortunately. A lot of CSS—even inline—will not work in various clients. Here's a handy summary:

http://www.campaignmonitor.com/css/

[Paul O'B]

Hi,

Browsercam does cover emails for outlook 20007 although you have to be already subscribed to their services which is quite expensive unless you are in a group.

I've attached a screenshot of what your page looks like in outlook 2007.

As you can see the background images are missing because outlook 2007 doesn't allow them. Perhaps you should just add a border instead of the shadow or both.

Usually for html emails you would not use margins or "align" or any positioning at all in css but let the table do the positioning. Don't use p elements and expect then to have the bottom margin but use breaks to make space. In fact the opposite of everything that you've ever been taught

We have had a lot of previous threads about it and here's some more reading.

http://www.sitepoint.com/forums/show...ight=css+email
http://www.sitepoint.com/forums/show...=1#post2672822
http://www.sitepoint.com/article/cod...il-newsletters
http://www.xavierfrenette.com/articl...rt-in-webmail/

You are usually better off using one of the tried and tested templates and adapting them instead.

[dnordstrom]

Use Litmus App for email testing.

There is loads and loads of information out there on how to code for email clients, as well as sample templates to look at. Outlook 2007 is a *****, yes. That's the way it's going to be for quite some time. As for why it's a *****—look it up. It's quite disturbing.

[Luki_be]

This article will set you on your way: it explains in detail how to achieve an html email

[Will89]

Code like it is the early 90s.

I would avoid all CSS with the exception of styles to remove link underlines if you want.

Nested tables & font tags are what you should be using.

Too many people advocate inline styles for positioning, margins, padding background images etc.

All of those should *not* be used in html emails firstly because of the lack of consistency across email clients and secondly it can get your email marked as spam which defeats the whole of the campaign!

I strongly urge you to avoid using CSS except where absolutely necessary, even then you will have to accept that it is not going to render as expected across all email clients. The only thing you can consistently rely on to have good support are your table tags and font tags.