Automatically generate inline styles

Published October 03, 2007 by Mathew Patterson

Creating HTML emails that render well across multiple email clients is complicated by programs like Gmail that strip out CSS styles from the head, and only support inline styles (like <p style='font-weight:bold;'>A bold paragraph<p>).

Our base templates don't use inline styles because that makes them too inconvenient to easily modify - much simpler to change the design first then apply inline styles at the end.

Campaign Monitor customer Alex Dunae has done us all a big favour by writing a sweet Ruby script that accepts a URL, and automatically generates and applies inline styles from the CSS in the head of that page.

The script is called premailer and is available for use right now. It won't always work (with complex CSS cascades), but for most cases it saves you a ton of time. So now you can just build the page in your normal way, then have all the inline style drudgery done for you automatically.

As an additional benefit, premailer also checks your CSS against our own guide to CSS support and warns you of possible issues. It's a great piece of work, and well worth a look. Alex is even planning to release the source code soon.

Check out premailer

11 Comments

Posted in: Tips & Resources

11 Comments

Geoff
October 3, 2007 6:03pm

Very cool—thanks! I’ve had to go inline for our mailings as well, and this should be a big help.
Darren Turpin
October 3, 2007 6:09pm

Superb piece of work. Tested it on a couple of (very simply CSS’ed) client emails and it worked perfectly. Thank you, Alex!
October 4, 2007 8:15am

I tried, it doesn’t work with the 2col layout provided by mailbuild.
Diana Potter
October 4, 2007 9:48am

Very very cool! This will save me a good amount of time creating html emails. Thanks!
Mathew Patterson
October 4, 2007 1:09pm

Regarding the MailBuild templates, it works in our testing with the 2 column with-content.html file, but the template file with tags inserted causes errors. The script can’t handle every situation, but should cut out a lot of time when you build your base template, and then add your tags at the end.
Russ Michaels
October 5, 2007 1:00am

I tested it on a couple of very simple html email signatures, didn’t work at all.
Kelly Rusk
October 5, 2007 3:55am

Fantastic idea, and looks like it will prove to be a life saver over here. Thanks!
Alex
October 5, 2007 5:21am

@Russ - the flurry of activity after this Campaign Monitor post has brought to light quite a few little bugs, most of which have been squashed. I tested this with my simple newsletter designs and it worked quite well. After checking through the error logs I’ve added some more logic (to deal with HTML comments within CSS files, MS Smart Tags, 301 redirects, etc...) and things are a bit better now.

Thanks for trying it out.

Alex
Chad Cross
October 17, 2007 5:56am

That is awesome. Thanks for the hard work Alex.
Colin
January 28, 2008 11:10pm

Fantastic!! Been looking for this for a long time, thank you Alex!!

PS: Please sell this script to Adobe/Dreamweaver so they can integrate it into the next version. (Or fingers crossed mail clients will get their act together and create some email standards before then.. lol right right)
Rules
July 7, 2008 10:58pm

It works in our testing with the 2 column with-content.html file, but the template file with tags inserted causes errors. I tested this with my simple newsletter designs and it worked quite well.

Blog