Blog

News, tips and all things Campaign Monitor

Automatically generate inline styles

Posted by Mathew Patterson on October 3, 2007

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

10 comments so far

Geoff

wrote on October 3, 2007 5:03 PM

Very cool -- thanks! I've had to go inline for our mailings as well, and this should be a big help.

Darren Turpin

wrote on October 3, 2007 5:09 PM

Superb piece of work. Tested it on a couple of (very simply CSS'ed) client emails and it worked perfectly. Thank you, Alex!

Anonymous

wrote on October 4, 2007 7:15 AM

I tried, it doesn't work with the 2col layout provided by mailbuild.

Diana Potter

wrote on October 4, 2007 8:48 AM

Very very cool! This will save me a good amount of time creating html emails. Thanks!

Mathew Patterson

wrote on October 4, 2007 12:09 PM

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

wrote on October 4, 2007 11:59 PM

I tested it on a couple of very simple html email signatures, didn't work at all.

Kelly Rusk

wrote on October 5, 2007 2:55 AM

Fantastic idea, and looks like it will prove to be a life saver over here. Thanks!

Alex

wrote on October 5, 2007 4:21 AM

@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

wrote on October 17, 2007 4:56 AM

That is awesome. Thanks for the hard work Alex.

Colin

wrote on January 28, 2008 10:10 PM

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)

Got anything to add?

Search all posts

Dig into a category

Stay in the loop

Prefer updates via email? Sign up below and we'll send you all the good bits each month.

Email design gallery

Our email design gallery showcases more than 150 amazing email designs sent by our talented customers.