CODEWITHSUNDEEP
htmlcssemail
joshcomley
joshcomley

Reputation: 28838

Is there a tool to take proper HTML + CSS and generate inline-styled HTML? Or: convert it to email compatible HTML

possible duplicate: What tools to automatically inline CSS style to create email HTML code ?

note from author: Oh yeh, definitely duplicate. Sorry.

In general, HTML emails do not support proper CSS techniques.

However, it's nice to develop in these techniques because it makes it a lot quicker to play around with changes etc. (I don't need to sell the benefits of CSS to you all!)

Is there a tool that will take lovely HTML and turn it into nasty email compatible HTML with all the styles extrapolated from the CSS files and placed inline?

Even though 100% compatibility cannot be achieved due to the numerous differences in email clients out there, a tool that helps the process would be very useful, even if it simply takes the CSS and inlines it.

Upvotes: 6

Views: 1017

Answers (6)

Joe L.
Joe L.

Reputation: 4643

Yes, In my experience the best are:

http://premailer.dialect.ca/

http://beaker.mailchimp.com/inline-css

http://zurb.com/ink/inliner.php

Upvotes: 0

Matt Vague
Matt Vague

Reputation: 31

Just wrote blog post about converting "good" HTML/CSS into bad, but compatible HTML/inline CSS.

I personally use Premailer for this task, you can read more about it in my post: http://www.versapay.com/developer-blog/the-art-and-science-of-email-rendering-across-email-clients/

Upvotes: 0

slolife
slolife

Reputation: 19870

Unfortunately, I don't know of any tools, but I would think this could be done using javascript (using jQuery, prototype, or other js framework), to rip through the rendered DOM and discover applied styles and create new HTML based on that

A good start would be to have a source div tag and a target div tag and see that the HTML in the target ends up looking like the source.

Upvotes: 0

John Topley
John Topley

Reputation: 115422

Campaign Monitor have an excellent guide to CSS support in email clients as of 2008. It's very comprehensive.

Upvotes: 1

joeylange
joeylange

Reputation: 3193

I imagine you could run the text of the page through a script that will discover CSS classes and ids and store the styles for them in an array, then go through and replace class="class" with style="style" and id="id" with style="style" etc. It would just be a matter of programming the thing.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114437

There are no standards for "email compatible" CSS or HTML, so a tool to perform this task is unlikely to exist. Various client strip out different tags and attribues, especially web-based ones. A lot of it is trial and error. Trial and error is difficult to automate.

Upvotes: 0

Related Questions