Crafting an HTML email that lands all the right punches is no child’s play. Sure, it allows you to deliver a user experience par none, but not without first demanding an incredible volume of hard yards from you. If you were to picture an HTML email as one giant machinery, you’d be remiss not to regard the several constituent nuts and bolts that keep it in place, i.e., the best practices that are followed while developing one.
Among these crucial components is CSS or Cascading Style Sheets. CSS, in email, dictates how various HTML elements, like tables, images, colors, buttons, and the like appear in the email. Moreover, it also enables you to introduce animations and effects to your templates. In a nutshell, it breathes life into your modular email templates, laying the foundation for increased engagement and interactions.
Here’s a comparative look of how an email looks with and without the inline CSS property.
With CSS:
Without CSS:
Despite its ceaseless charm, however, implementing CSS in HTML emails is far from rosy. Why, you ask? Because the prevalent email clients in the market don’t offer uniform support for CSS. So, if you’re not mindful of these limitations, you’ll end up inviting an undesirable pageant of formatting and rendering issues.
The easiest way to reign in these issues is by using inline CSS. What is that now? You see, there are three ways in which CSS can be written in an HTML document: external, embedded, and inline. Thus, in order for us, to have the due context regarding inline CSS, it is necessary that we first gain a basic understanding of all the three methods.
Understanding the Different Types of CSS
- External: In this approach, you will link your page to an external .css file. Said file can be created with the help of any text editor and is connected to the <head> </head> tags of the main HTML document through a <link> tag. While developing pages, using external CSS is more or less the standard protocol. However, when email comes into the picture, the scenario changes drastically. An external link that requests the email client to browse the internet, scan the requisite file, and then upload it is perceived as spam by the client, which is why they end up blocking such links.
- Embedded/Internal: With internal CSS, you are required to place the style code within the <head> </head> tags of the HTML document. Now, the problem with this is that most email clients clip off everything that exists above the body tag, thereby causing your email to be formatted in the client’s default style. Of late, though, support for internal CSS has increased, largely thanks to the rise of responsive emails. Still, it’s not as reliable as you’d wish for it to be.
- Inline: In inline CSS, you are required to specify the style of every individual HTML element (within its style attribute). This method is, admittedly, pretty tedious, hampers the readability of the code, and consumes copious amounts of your developer’s time. But, this is the only way that is supported by email clients, so you don’t have much of an option, really. In fact, as many as 86% of email designers utilize this technique and agencies offering email design services greatly prioritize it. In case you’re wondering, yes, there is a workaround to the dreary bits of this approach- using a CSS inline editor tool. We’ll address that topic shortly.
Advantages of using Inline CSS
- We’ll start with the obvious, which we’ve already touched upon in the previous segment- inline CSS receives support from all the popular email clients and ESPs. Therefore, irrespective of which client your audience is using, inlining your CSS gives you the best shot at delivering a uniform experience to them all.
- Compared to external CSS, this route doesn’t require you to develop and upload an additional document, fostering greater convenience in the process.
- They enjoy higher precedence, meaning they override the existing external and internal stylesheets.
- Since this method is relatively straightforward to implement, it proves to be handy while previewing and testing changes.
As we mentioned earlier, despite its many pros, inline CSS can be a huge drain on your time and severely disfigure the structure of your code. To keep these problems at bay, we use inliner tools, also the subject of our next segment. Let’s take a look.
Best CSS Inline Tools For Email
Although coding is a crucial aspect of an HTML email, never lose sight of the fact that it is, at the end of the day, one of many such important factors. Should you remain fixated on it, you risk neglecting other considerations necessary to develop a top-notch HTML template. Inlining your CSS is one task that can take an inordinate amount of your time, leaving you with pity change for attending to the other critical pillars. Thankfully, inliner tools exist. Below, we take a look at some of the best ones in operation.
Mailchimp CSS Inliner
- As a premier ESP, Mailchimp is no stranger to email clients’ tendencies of stripping content present in the <head> and <style> tags of the email code. Hence, they offer a conversion tool that automatically inlines your CSS.
- From your end, all you have to do is paste your email’s HTML and click the “Convert” button to obtain the email-friendly inline version.
- The tool doesn’t disturb media queries (usually added for effecting responsive styling), if any, present in your CSS.
Litmus PutsMail CSS Inliner
- Prior to its acquisition of Putsmail, Litmus didn’t have any standalone inliner tool, only the Litmus Builder- a code editor that helps developers to build HTML email templates from scratch and also allows users to inline their email’s CSS. Using its visual editor, one can design pixel-perfect and branded templates, all without any coding knowledge. The code editor also gives you the choice of syncing your code directly with your ESP. This way, any changes you make in the editor, reflect automatically across your ESP as well.
- While the code editor remains to date, Litmus now also boasts of a freestanding inliner tool developed post its purchase of PutsMail. With the help of the Litmus PutsMail CSS inliner, you can easily inline your CSS with a simple copy-paste maneuver.
Campaign Monitor CSS Inliner
- Campaign Monitor’s CSS inliner is compatible with multiple responsive email frameworks.
- It deals reliably with web fonts, media queries, and other related techniques wherein one requires only certain portions of the CSS to be inlined and remaining, left untouched.
Additionally, Campaign Monitor also provides a CSS guide with the help of which users can choose from different email clients across mobile, desktop, and web to determine which CSS elements will work.
Responsive Email CSS Inliner
- Developed by HTML email, responsive email CSS inliner not only inlines your CSS automatically (much like the other entries in this list) but also shows you the resulting email would look (across both mobile and desktop).
- It also lets you download a .html file of the email.
- Responsive Email CSS inliner is powered by Juice, an open-source project. Hence, it can be integrated, hassle-free, into your Node.js projects.
Few Best Practices to Keep in Mind While Using CSS in HTML Emails
Embracing inline CSS in favor of external and embedded CSS isn’t the sole way to maximize the impact of CSS in your HTML emails. Let’s take a look at some other ways.
- Avoid writing shorthand CSS. You may run into rendering issues with certain email clients. In a similar vein, steer clear of using three-digit hex codes. Make it a habit to use full six-digit hex codes every time.
- Consider doing away with background images. A large number of email users turn off images to increase the load time. They increase the visual appeal of your email, sure, but it all boils down to functionality, eventually. If users aren’t inclined to engage with them, omitting them is no harm.
- Add the !important declaration to your vocabulary. It enables you to override styles that are added or modified by email and web clients. They also come in handy while writing media queries. How? You can use it to override a default style with one that is mobile-specific.
- Speaking of media queries, you only stand to gain by becoming fluent with them. They have a wide range of applications- creating custom styles for different clients or screen sizes, controlling image and font sizes, and hiding content unnecessary for mobile users, to name some. Don’t forget to pair them up with !important so that they are able to override existing styles.
Wrapping It Up
The potential of email as a communication channel is secret to none. To harness its true potential, you must work towards increasing the user experience of your email campaigns. This is what using CSS helps you with, so long you inline. Along with illustrating the virtues of this technique, we hope we have also been able to make you consider embracing the tools listed above. They’re sure to fast-track your development process!