Huge time saver: Automatic inline CSS generation

Published February 20, 2008 by David Greiner

A few days back we quietly launched what I think is one of the most useful new features we've added to Campaign Monitor in a while. As we've written countless times before, getting some design consistency across all the major email clients is one of the biggest annoyances of the job. The sole reason behind this frustration is the lack of CSS support, which was the reason we launched the Email Standards Project recently.

To get around these deficiencies, you really need to move away from web standards and stick with table-based layouts with all of your CSS done inline, instead of being separate to your content. The problem is, adding that CSS inline is fiddly and takes a long time, not to mention how depressing it is completely butchering your code.

Be frustrated no longer. Now, by checking a single checkbox, we'll automatically generate your inline CSS for you when you import your campaign. This means you can build your emails just as efficiently as your web pages (except for those nasty tables you need to add), and then we'll do the heavy lifting for you automatically that will ensure the best rendering result across all the major email clients.

Screenshot of the campaign import screen

See it in action

The best way to demonstrate how cool this feature really is, is to show a few before and after shots. As you know, the biggest CSS hater is Gmail. Taking a few random samples from our email design gallery, here are the results you can get just by ticking that innocent little checkbox.

The Tonic Vision newsletter

Gmail before the checkbox

Tonic Vision before

Gmail after the checkbox

Tonic Vision after

The NZLive.com newsletter

Gmail before the checkbox

Tonic Vision before

Gmail after the checkbox

Tonic Vision after

The results really do speak for themselves. Even though we quietly snuck this feature in a few days ago, it's already proven extremely popular, with more than 600 customers using it for their campaigns.

A big shout goes to Toby Brain, our superstar intern who developed this feature, and also a big thanks to Alex Dunae, the developer of Premailer who was generous enough to offer his own advice on the best way to approach inline CSS to get the best results possible for you all.

Enjoy, and if you can think of any ways we can make this feature even more useful, please let us know.

30 Comments

Posted in: New Features & Updates

30 Comments

Wayde Christie
February 20, 2008 2:34pm

Fantastic news - can’t wait to try it out!
Margret
February 20, 2008 3:41pm

Love what it did to gmail
Ricky
February 20, 2008 6:06pm

I never really understood why everyone hates tables. Sure they were never intended for layouts but they’re a quick and easy way to work.
kelter
February 20, 2008 6:51pm

excellent job! How long till this feature makes it to Mailbuild?
Dave Greiner
February 20, 2008 7:04pm

Kelter, I was waiting for that one ;) We anticipate this will make it’s way into MailBuild template importing soon, but that’s all I can say at this stage.
Michael
February 20, 2008 8:15pm

Hey Dave- I stumbled across the new feature last week, and it’s absolutely brilliant!

I think that this is even more reason to see if we can’t move some our other clients onto this platform!
kelter
February 21, 2008 3:09am

@Dave G. - Thanks!!! Looking forward to it in oh so many ways :) I’ve just been slogging off and give Gmail users the plain-jane approach.
Erwin Heiser
February 21, 2008 6:26am

Just one question here: does it overwrite any exisiting inline styles or does it add those already there?
Other than that: fab!
Dave Greiner
February 21, 2008 9:34am

Erwin, you’ll be pleased to know that any existing inline styles will be left intact. We only add the additional styles specified via the style, link or @import method, and if they contradict with an existing inline style, they won’t be added inline and the cascade will be maintained.
Diana
February 21, 2008 10:55am

I love this feature! I’ve been using it since you snuck it out there. Can’t wait to see it in MailBuild, it might finally help me push a few more people into using it.
Jeremy
February 21, 2008 7:49pm

Allright thats it guys, Im switching to CM… been thinking about it for a while but this is just too great. a big THANK YOU
Cliff
February 24, 2008 6:21pm

Just absolutely brilliant, thanks, David!
Jon Aizlewood
February 26, 2008 7:53am

Wow. That tool looks fantastic, there’s no doubting it’s going to prove a massive hit. It seems that every time I check my inbox or reader, you guys down there in Oz are doing something else to revolutionize this email marketing landscape. I’ve seen a lot of people talk the talk, but you guys are fully walking the walk! Keep it up please, for the betterment of an email society!
Dave Greiner
February 26, 2008 9:46am

Cheers Jon, that’s much appreciated. Congrats on the blog redesign too, looks fantastic.
xtfer
February 29, 2008 11:38am

You guys rock!
James
February 29, 2008 1:16pm

Absolutely b*oody fantastic!! You guys rock… I can’t wait until this is put into MailBuild too!
Meredith Self
March 1, 2008 5:48am

Fan-freakin-tastic feature. Thank thank thank you.

Question. I noticed the inline centered all my text in gmail. I looked to correct this in my original html but don’t see what I did. Is there a way to modify once the inline is added?
Dave Greiner
March 1, 2008 12:01pm

Meredith, all we’re really doing is moving you CSS inline, we’re not adding or removing anything. If you did notice a big change though, let support know and we’ll have a good look over your HTML/CSS to ensure everything is working as it should.
Jason Millward
March 5, 2008 2:33am

Wow thats fantastic. Will be trying this out tonight. Must say i’ve only recently signed up for an account a couple of days ago but i’m absolutely stunned by the quality and features of Campaign Monitor.
Iain R
March 7, 2008 3:25am

Ah now, this is just fantastic! Time constraints mean I’ve been only half-inlining the CSS, and regularly doing the Google grimace ;)

Will definitely be using this on our next mail. Keep the innovations coming folks - just gets better and better!
Boris Mahovac
March 7, 2008 3:57am

You guys may want to try this free tool:
http://code.dunae.ca/premailer.web/

It will do the in-line CSS and optionally create a TEXT version for you as well.
Matt Crest
March 7, 2008 4:56am

I just saw this while creating a few campaigns last week - LOVE IT!
Anna Yeaman
March 7, 2008 7:28am

Wow, fantastic new feature I am going to test it out with my next campaign. Makes my job so much easier!

I also just saw the mobile testing update - you guys rock!!!!
Rachel May
March 7, 2008 8:22am

This is seriously so useful, you guys really rock! Can’t wait to use it in MailBuild too!!
Dave Greiner
March 7, 2008 8:32am

Thanks for all the great feedback guys, I sent our newsletter out last night and this feature saved me a ton of time too. Boris, as mentioned in the post above, Alex Dunae, the developer of Premailer was kind enough to help us perfect this feature based on everything he learned developing his tool.
Heath
March 10, 2008 9:59am

Fantastic feature, really useful!

...and that nzlive site is great!
James
March 11, 2008 10:48pm

Have been playing with this quite a bit over the last few days and trying to use the generated code in MailBuild… when you guys integrate it into MailBuild can you try to address the following:
- Inline Styles on the and links
- Pull inline styles through on the generated code from the input boxes - i’ve got my template working fine but when I edit text and look at the result in GMail links are still appearing blue and underlined etc…
Dave Greiner
March 12, 2008 9:28am

Cheers James, we’ll definitely be addressing both of these issues in the MailBuild update.
xopher
May 22, 2008 1:40am

How are the RESULTS different from the Pre-flight tool at:

http://code.dunae.ca/premailer.web/

I’m fairly confident in the results Premailer gives me, I’d like to know if this is “similar” or (since you guys were sponsoring Alex’s tool) if your version is “based-on”, “exactly the same”, or “improved”.

Thanks!
Dave Greiner
May 22, 2008 9:39am

xopher, while the code was written separately, Alex from Premailer was a big help and gave us loads of tips (and code) to adopt a similar system to his. Alex is a darn clever guy, and at this stage I imagine he’s probably got more bases covered than us, but at the same time we haven’t had any issues with ours and everyone seems really happy with it.

So, they’re different but both will have you covered.

Blog