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.
