Browse by...
Home Resources Blog

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.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free