CSS Inlining in Email: What It Is + How To Do It [Webinar Recording]

9 min read
 

If you’re in any way involved in email design, you know that building a great email isn’t easy. Between choosing the appropriate layout, header weights and font, content, and more, a lot goes into building each campaign.

Cascading Style Sheets (CSS) allow you to add styles and formatting to the HTML of your email, so that fonts, spaces, colors, images, and more appear the way you intended. There are numerous options for including CSS in your email, the easiest of which is to write your styles in the < head > of your email. However, since Gmail and some other clients will strip out CSS in the < head >, inlining your CSS is essential.

Except inlining styles can be time-consuming to code by hand and a bit challenging to manage. When you edit a specific style, it must be updated everywhere it appears in your code, making it easy to miss an incorrect style.

So what should you do? We hosted a webinar to answer that very question—covering the CSS inlining process from start to finish, defining exactly what inline CSS is, and why it’s essential for creating bulletproof HTML emails that look great everywhere.

Didn’t have a chance to attend the webinar, “CSS Inlining in Email: What It is + How To Do It?” Don’t worry—we recorded the whole thing. You can view the slides and check out the recording below.

View the slides & recording →

There were so many great questions during the webinar. We didn’t have a chance to get to them all, but I’ve answered them all here on the blog. Plus, we’ve linked to all of the resources mentioned in the webinar.

What does it mean to inline your styles?

“Inlining” styles moves the CSS and associated formatting instructions from the style block in the of your email into the body of the HTML.

Why do you need to inline your styles?

Thanks to unwieldy email clients, like Gmail (one of the most popular email clients, representing 16% of email opens worldwide), inlining styles in email is a necessity. If you don’t inline your styles, the styling in the body of your email will not display in clients like Gmail.

If we don’t use inliner program, but building it manually, should we start off making the styles first or the inline style first?

If you aren’t using an inliner or a task runner for inlining, you should definitely be writing your CSS inline from the start to ensure compatibility across all email clients. In this scenario, I highly recommend using multiple cursors, which allow you to place your cursor at multiple points in your editor to type out the same code.

I also recommend Emmet.io as a way of shorthand coding HTML and CSS. This helps you reduce the amount of time it takes to write inline CSS.

Third party inliners

What are third party inliners?

Third party inliners automatically inline your CSS for you. After pasting your HTML into the tool, it regurgitates your code with all of your styles inlined.

Here are some examples of free inliners:

Are third party inliners available to use for people who are not using the service?

Yes, these third party inliner sites are available for free and do not require an account with any of the services. You can visit the site, copy and paste your HTML, and click to inline your CSS. It’s as easy as that.

Tasks runners + open source inliners

Can you use a task runner and an open source inliner to inline your styles?

If your emails are generated in the back end of an application, solutions exist for most server side languages and frameworks. You can use task runners, like Grunt or Gulp, alongside an open source inliner, like Juice or Roadie, to inline your styles.

Do you need to write the source in Sass for it to work in Grunt?

Sass is a preprocessing language for CSS. You do not need to use Sass in order to use Grunt. It is simply an option for those who prefer to write their CSS in Sass. Grunt, as a task runner, can compile your Sass to CSS automatically, as it is set up in Lee Munroe’s Grunt Email Design Workflow.

Is Grunt for Mac only?

No, Grunt is a JavaScript-based task runner. It is not dependent on using any specific OS and can be used on any platform.

Can or how would you use/integrate an inliner with an ESP, like ExactTarget?

Many ESPs have their own inliner built into their platform that you can use to inline before or during your email send. However, many do not have a method to directly integrate open source inliners out of the box.

In order to send a test email through your ESP using Grunt, for instance, your ESP would need to have API access available for you to customize test sends through their infrastructure. You would need to setup your Grunt to inline your CSS for you, export the email into your ESP, and then send a test email via your ESP. This requires custom development work. Transactional email services like Mandrill and Mailgun typically have great API documentation and are very developer-friendly, whereas marketing providers can vary.

CSS Inlining in Litmus Builder

What’s the benefit of using Litmus Builder over third party inliners or task runners/open source inliners?

CSS Inlining in Litmus Builder is the only inliner specifically tuned to email development. With a toggle, embedded styles can be automatically inlined. There’s no copy and pasting and no maintenance—it’s a faster workflow than any task runner or third party inliner setup.

CSS Inlining in Litmus Builder

Automatically inline your email’s CSS with a simple toggle and style your emails faster and easier than ever.

Inline your styles →

Can Litmus Builder add the MSO code?

“MSO code” is referring to Microsoft Outlook conditional comments, which can be used as a way of targeting Outlook email clients to include HTML or CSS specifically for Outlook.

Litmus Builder is an email editor. Litmus offers free email templates that use Outlook conditional comments to render properly in Outlook. You can also create your own templates that use Outlook conditional comments in Litmus Builder as a starting point or create snippets that store your commonly used Outlook conditional comments.

CSS inlining + its impact on design

Can you use inline CSS to create live text overlaying an image with the text floated to the right side of the container that will work across all clients?

You can use background images and live text together to create this effect. Background image support varies across email clients, but I recommend using backgrounds.cm to create the most bulletproof backgrounds that render across email clients.

Litmus Community is a great place to go for extra help from fellow email designers and developers on how to implement anything.

How can I inline media queries which are essential for responsive design?

Media queries cannot be inlined, as they must remain in the < head > of an email in order to work. The premise of media queries is that they are a set of conditional statements to activate certain CSS when those conditions are true, most notably for screen size. If such styling was inlined, it would lose the conditional statement and render media queries useless.

What do you recommend for Gmail responsive situations?

Unfortunately, Gmail does not support media queries and therefore responsive design, making it hard to build mobile emails.

I highly recommend using the hybrid coding technique, the Fab Four technique, or the mobile-first approach for the best rendering across email clients, especially in Gmail apps.

Does inlining styles increase the HTML file size? If so, is there anything I can do to decrease the file size?

Yes, CSS inlining does increase the HTML file size and is an important consideration. Your HTML file size should always be under 102KB because Gmail will clip the email if it is not under that file size. To reduce your HTML file size, you can minify your HTML. To do this, use a third party minifier site to copy and paste your HTML and click to minify (just like the third party CSS inliner sites we covered in the webinar). Or, you can find an open source minifier to integrate into a task runner workflow.

How would you update templates globally if you are inlining instead of just updating a stylesheet that would apply to all emails that have that stylesheet?

You would need to use partials to update templates globally for commonly used components, whether that be HTML or even CSS. Partials are the best way to manage, maintain, and update all of your email templates. They’re built Lee Munroe’s Grunt Email Design Workflow that we covered in the webinar and are also available in Litmus Builder.

Start inlining your styles

With CSS Inlining in Litmus Builder you can automatically inline your email’s CSS with a simple toggle and style your emails faster and easier than ever.

CSS inlining in Litmus Builder is now active in all Litmus accounts. Don’t have a Builder account yet? Sign up today—it’s free!

Inline your styles →

Jaina Mistry

Jaina Mistry is the Director of Brand and Content Marketing at Litmus.