Huge time saver: Automatic inline CSS generation
Posted by David Greiner on February 20, 2008
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.
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
Gmail after the checkbox
The NZLive.com newsletter
Gmail before the checkbox
Gmail after the checkbox
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.
28 comments so far
Search all posts
Dig into a category
- Articles/Tips (98)
- Email Newsletter Design (120)
- Happy Customers/Press (88)
- In the Forums (7)
- Interviews & Case Studies (9)
- New Features & Updates (106)
- Observations & Answers (84)
Stay in the loop
Prefer updates via email? Sign up below and we'll send you all the good bits each month.
Popular articles
Why we need standards support in email
Read why standards in HTML email are so important, and what we're doing about it.
Email design guidelines
Learn how to design for images being turned off, preview panes and other useful tips.
CSS support in email in 2007
The CSS support of every popular email environment with recommendations to boot.
Image blocking in email
A roundup of how each of the popular email clients suppress images in HTML email.
Can I use flash in email?
We test flash support in all the popular email clients. The verdict - don't do it.
Email design gallery
Our email design gallery showcases more than 150 amazing email designs sent by our talented customers.
Wayde Christie
wrote on February 20, 2008 1:34 PM
Fantastic news - can't wait to try it out!
Margret
wrote on February 20, 2008 2:41 PM
Love what it did to gmail
Ricky
wrote on February 20, 2008 5:06 PM
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
wrote on February 20, 2008 5:51 PM
excellent job! How long till this feature makes it to Mailbuild?
Dave Greiner
wrote on February 20, 2008 6:04 PM
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
wrote on February 20, 2008 7:15 PM
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
wrote on February 21, 2008 2:09 AM
@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
wrote on February 21, 2008 5:26 AM
Just one question here: does it overwrite any exisiting inline styles or does it add those already there?
Other than that: fab!
Dave Greiner
wrote on February 21, 2008 8:34 AM
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
wrote on February 21, 2008 9:55 AM
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
wrote on February 21, 2008 6:49 PM
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
wrote on February 24, 2008 5:21 PM
Just absolutely brilliant, thanks, David!
Jon Aizlewood
wrote on February 26, 2008 6:53 AM
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
wrote on February 26, 2008 8:46 AM
Cheers Jon, that's much appreciated. Congrats on the blog redesign too, looks fantastic.
xtfer
wrote on February 29, 2008 10:38 AM
You guys rock!
James
wrote on February 29, 2008 12:16 PM
Absolutely b*oody fantastic!! You guys rock... I can't wait until this is put into MailBuild too!
Meredith Self
wrote on March 1, 2008 4:48 AM
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
wrote on March 1, 2008 11:01 AM
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
wrote on March 5, 2008 1:33 AM
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
wrote on March 7, 2008 2:25 AM
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
wrote on March 7, 2008 2:57 AM
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
wrote on March 7, 2008 3:56 AM
I just saw this while creating a few campaigns last week - LOVE IT!
Anna Yeaman
wrote on March 7, 2008 6:28 AM
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
wrote on March 7, 2008 7:22 AM
This is seriously so useful, you guys really rock! Can't wait to use it in MailBuild too!!
Dave Greiner
wrote on March 7, 2008 7:32 AM
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
wrote on March 10, 2008 8:59 AM
Fantastic feature, really useful!
...and that nzlive site is great!
James
wrote on March 11, 2008 9:48 PM
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
wrote on March 12, 2008 8:28 AM
Cheers James, we'll definitely be addressing both of these issues in the MailBuild update.
Got anything to add?