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