Introducing our new standalone CSS inliner

By Ros Hodgekiss on 11th November 2013

Planning to send emails via your web app or online store, but don't want Gmail to yank out your styles? Our new, standalone CSS inliner is here to help.

If you took a moment to check out our new resources page last week, you may have noticed that alongside neat new tools like our bulletproof button and background generators, we released a CSS inliner for HTML emails. While it isn't something you need to use when importing into Campaign Monitor (we inline your CSS for you), it may come in handy when sending automated notifications or invoices via another service. Plus, you don't have to start an account to use it.

As we know it, our inliner is one of the few that gracefully handles media queries, web fonts and other techniques that rely on some CSS being inlined, but other styles remaining untouched in <head>. As a result, it's a good choice for email coders wanting to send responsive emails via their choice of tools. Simply copy-and-paste your code into the inliner and it will move your CSS styles inline, ready to go.

Why move your CSS inline?

The skinny is that email clients like Gmail ignore some, if not all CSS placed in the <head> of HTML documents, so if you code an email newsletter like you would a web page, chances are that it's going to have any CSS styles removed. The result - a royal mess in the inbox.

While it's entirely possible to hand code inline CSS from the start (for example, by applying style="..." to elements), this tends to become quickly unmaintainable. After all, that's why we use id's and classes when coding for the web.

For more on why we inline CSS (and other email tips), check out our Guide to Coding your Emails.

So, when would I use the inliner?

We've received a lot of requests from email-savvy folk to make our CSS inliner a standalone product. These requests were largely from developers, wanting to use it with emails being sent via an app they've developed, a transactional service like Postmark, or internal sending tools.

Finally, when the good crew at Zurb got in touch in regards to using our inliner to develop Ink, a new responsive email framework, we relented and made the inliner a standalone tool at inliner.cm. Matt at Zurb put it plainly enough:

"Of all the CSS inliners available with email service providers, only Campaign Monitor's works with our Responsive email framework, Ink."Matt Kelly, Zurb

If you are looking at sending responsive emails, give Ink a try - the Zurb team have improved their templates since releasing their first batch. Alternately, you can create, customize download responsive email templates using our template builder.

Many thanks again to our developer friends who requested that we make our inliner available to everyone - you can start using it for your projects now at inliner.cm. If you have any suggestions as to how we can improve it, be sure to let us know.

11 Comments

  • Luke
    12th November

    Please offer it via a an API :)

  • LucPestille
    13th November

    Great work! Two future feature requests I can think of off the board;

    1) An option to keep comments in the final source (like premailer has).
    &
    2) A button to copy the content to the clipboard after it’s been inlined.

    Other than that, a new default tool!

  • Carissa Phillips
    13th November

    Luke: You aren’t the first to ask for this so we’ve added your vote to the list, thanks!

    LucPestille: Glad you like it! Those are good ideas so I’ve created feature requests for the comments option and the button. We’ll be in touch if those are improvements we add in the future.

  • Sean
    15th November

    Do you plan on pen sourcing this? Like the Premailer gem? That would be fantastic and make it even better as others improve it.

  • Ros Hodgekiss
    15th November

    Hi there Sean, at present we don’t have solid plans to make this an open source project, however we are committed to keeping it updated. In the interim, if you or others can suggest any improvements, we’d very much like to hear them :)

  • paul
    18th November

    Great work, Gmail is always the bane of my life!

  • David
    19th March

    Does the CSS get inlined as you upload a template or does it get inlined after all content has been added? For example, if I had particular styling for links within a certain section would any links added by the client take on that styling once saved?

  • Chris Bowler
    20th March

    Hi David, good question.

    This does not apply to the standalone inliner being discussed here, but with our application. When you import a campaign, we move styles inline if you choose so (see: http://d.pr/QLNJ).

    If you have a template with CSS styles and editable regions, any content added will be styled accordingly. These styles will be inlined automatically at send time, too.

  • Chris
    4th December

    Not to downplay your work, but there are a ton of free online css inliners that are really good. You want to differentiate yourself from the others? Open source the code so we can actually use it in a meaningful way.

    You even say “Planning to send emails via your web app or online store” - well yes, I do want to do that, but how the hell am I going to get dynamic info from my app or store into your tool? What if i need to put the person’s name in the email (as a very simple example)? I mean, these inline tools are more or less useless for real world dev problems. Help?

  • Ros Hodgekiss
    4th December

    Hi Chris, I understand that it would be a great improvement to either open source, or make the inliner available via the API. However, there are a lot of people who code from scratch, or use email frameworks like Zurb Ink or Author as the starting point for their email designs, but then use email sending platforms that don’t include inliners. These are the people we initially set out to help - and who find this resource very valuable.

    We’ve previously recommended other inliners as alternatives, but been told, “Oh, x inliner doesn’t deal with media queries well”, or “I just like your inliner”. As an email coder myself, I think it’s a pretty robust (and well supported) tool - which can’t be said for some of the other free alternatives.

    So, more than happy to take these suggestions on board - and keep you updated. But to be transparent, I don’t think we’ll be extending this for the API-driven inlining that you likely have in mind, in the mid-term at least. It would be awesome, but one step at a time :)

  • Ryan
    24th July

    Any plans yet on open sourcing this, like on GitHub (since you already have a repository there)? It’s a great tool and it’d be nice to be able to use it via the command line/Ruby.

Got something to add?

Sign up for free.
Then send campaigns for as little as $9/month

Create an account