Introducing our new standalone CSS inliner

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.

Posted by Ros Hodgekiss

8 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.

Got something to add?

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

Create an account