CSS-to-HTML Email converter [closed]

Question

I'm on a project where we're going to be sending HTML emails. I've done dozens of projects where we send plaintext emails but for some unknown reason, I've never had to do HTML emails.

I "grew up" with tables. I used to use them for layout development. Then CSS came along with its "layers" as we called them back then, and I changed my ways pretty rapidly. By 2002, I wasn't using tables for layouts at all.

We're almost a decade on and I've been writing pretty good code consistently. I'm now faced by something quite terrifying: writing bad code on purpose. I'm not sure if my mind or fingers will allow it.

So instead of starting by writing bad code, can I write my emails like I would with any other design-build-out: with beautiful divs and CSS, and then use something evil to convert it all out? I realise this might cause issues with background images (of which there may be a couple), but I'm sure I can man-up enough to "fix" those.

I should add that we will have a number of dynamic emails being generated and a newsletter-sender. Ideally this should be something I can plug onto the end of that process so emails get generated in "standards mode", then flown through Mordor to come out the other side as beastly 90's HTML.

Answer 1

There is no way to autmatically turn css and div based HTML pages into working tables that work in emails.

And you probably already know normal CSS style tag is not working in webmail like gmail and hotmail.

But most email clients support embedded css, yes I know its not something you would like to do in any normal page but for email its the only way to avoid having to use font tags.

Here is a page with some of the css and what clients it works in http://www.campaignmonitor.com/css/

But for layout, tables is the only stable way to go for any more complex layout, especially if you like multiple columns or borders but my advice after 10 year of coding for emails is to try to keep it as simple as possible, think typewriter style letters with a few images, a header and footer and no more, that almost always work.

Answer 2

Try premailer.. http://premailer.dialect.ca/ its written in rb.. if you want the same in php.. then try https://gist.github.com/1204853