Email clients—the tools subscribers use to look at your email campaigns, like Gmail, Outlook, or Apple Mail—can be a troubling breed of applications. Due to how email clients process your HTML and CSS, many email marketers run into issues with how their emails are displayed.
One of the biggest causes of broken emails is the varying levels of support for CSS across different email clients. Knowing what CSS properties are supported where is half the battle. The other half is knowing where in your email you should code those styles.
There are three basic ways to include CSS in an HTML document: inline, embedded, and using an external stylesheet. While both inline and embedded CSS include CSS properties inside the HTML document, external stylesheets are pulled from outside of a document, using a URL that grabs the stylesheet from a server. Many email clients disable this behavior, citing security concerns around loading an external resource into their application. That’s why most email marketers rely on either embedded or inline CSS rules.
What is CSS inlining?
When you inline your CSS, you apply CSS properties directly to HTML elements in the body of your email campaign. Whereas on the web you can use safely use embedded or external CSS styles, some email clients don’t support embedded and external stylesheets. That has traditionally lead email marketers to move all of those styles inline.
For example, compare these two snippets of code, embedded and inline, respectively:
<a rel="noopener" target="_blank" href="https://litmus.com" style="color: rebeccapurple; font-size: 24px; font-weight: bold; text-decoration: none;">Visit Litmus Today</a>
Both sets of styles accomplish the same thing, but they live in different places within a HTML file. Embedded styles are included in a
<style> block in the
<head> of the file. Inline styles are attached to an HTML element using the style attribute.
Since some email clients strip out embedded styles or linked, external stylesheets, most email campaigns use inline CSS to ensure that the email displays well in the widest range of email clients.
There are a variety of methods and tools that can help you inline your CSS.
- By hand, during the process of developing an email campaign
- Using a tool like Litmus Builder that automates CSS inlining for you
- Relying on your ESP to inline CSS for you
- Using a task runner or build tool during the development process
- Using a standalone, web-based CSS inliner
We also learned that 85.9% of marketers surveyed inline their CSS.
2018 State of Email Workflows
In this report, we take a detailed look at how brands plan, build, approve, and send their email marketing campaigns.
With so many email marketers inlining their CSS—not to mention the proliferation of tools to help out—it begs the question: Why wouldn’t you inline your CSS?
Do we still need to inline CSS?
There are actually a few benefits to not inlining your CSS, something we learned when we experimented with our own newsletter. By using embedded CSS (CSS written in the head of your document), you can:
- Write less code and speed up your development process
- Decrease file sizes
- Make maintenance easier
- Quickly troubleshoot and fix CSS-related issues
The main benefit for most marketers is the reduction in code being written, which brings with it fewer points of failure and ultimately allows developers to speed up there email development process.
Clearly, there are benefits and drawbacks to each approach. But listing those pros and cons doesn’t help us answer the question of whether or not we should inline CSS in email. Like with most questions in the email world, the answer is: It depends.
Your approach to CSS depends on your goals as a team, the resources you have to help achieve those goals, and—most importantly—your audience.
Understanding your audience makeup is vital in tailoring your email development approach. After Gmail updated to support embedded CSS back in 2016, we’ve seen the majority of popular email clients support embedded CSS. In fact, all of the top ten email clients tracked on Email Client Market Share support embedded CSS.
With that kind of support, it’d be easy to make the assumption that you can safely stop inlining CSS. However, those analytics are not your analytics. Although the data above gives a good baseline overview of email client usage, that usage differs from list to list. For B2B companies, many subscribers could be using older email clients that don’t support embedded styles. And some international email clients have limited support for embedded CSS.
You should use a tool like Litmus Email Analytics to see where your subscribers are opening before making a decision about how you approach CSS inlining. If you find that all or most of your subscribers are using modern email clients, then the tradeoff of support could be a great boon for your email development workflow.
However, if you find that subscribers are using clients without embedded CSS support, you’ll likely want to keep inlining your CSS, whether it’s by hand or using a tool like Litmus Builder.
Enhance your email production process
Ready to take your email workflow to the next level? Litmus Builder offers more than just the industry-leading CSS inliner. Preview your emails in 90+ email clients and mobile devices as you code, speed up development with snippets and partials, and upload your campaigns at the press of a button with ESP Sync.
Jason Rodriguez was the Community & Product Evangelist at Litmus