CSS Inlining in Email: What It IS + How To Do It

litmus ®

CSS Inlining in Email: What It Is + How To Do It

litmus ® #ResponsiveEmail

Hello, I’m @KevinMandeville.

litmus ® #ResponsiveEmail

I design + build emails at

litmus ® #LitmusLive

Tweet

@litmusapp #LitmusLivewith any questions

litmus ®

What is CSS?


CSSCascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.


Content <div>, <h1>, <p>

Style width, font-size, display

Interaction (JavaScript)


It’s like a house.HTML is the actual foundation of what is contained in the house (floors, rooms, doors, television. etc.)

CSS is the styling of the actual items in the house (dimensions of the room, color of the walls, placement of the furniture, etc.)

JavaScript is the interaction you have with the house (ringing the door bell, turning on/off lights, etc.)

litmus ®

3 Ways to Use CSS


External Style Sheets <link>

Embedded CSS <style> in <head>

Inline CSS <div style=“width: 600px;”>

3 Ways to Use CSS


External Style Sheets

External Style Sheets<html> <head> <link rel="stylesheet" type="text/css" href=“style.css"> </head> <body>  </body> </html>

Embedded CSS<html> <head> <style type=“text/css”> /* CSS */ </style> </head> <body>  </body> </html>


Inline CSS<html> <head></head> <body>

<div style=“width: 600px;”> <h1 style=“font-size: 60px; line-height: 72px;”>Headline</h1> <p style=“color: #999;”>Lorem ipsum dolor</p> </div>

</body> </html>

litmus ®

Why Inline CSS is Important for HTML Email


Apple Mail ✅

Lotus Notes ❌

Outlook 2000-2016 (Win + Mac) ✅

Thunderbird ❌

Android 4.x ✅

Gmail App (Android) ❌

iOS Mail (Every OS on iPhone + iPad) ✅

AOL Mail ❌

Gmail ❌

Inbox by Gmail ❌

Google Apps ❌

Office 365 ❌

Outlook.com ❌

Yahoo! Mail ❌

GMX ❌

Web.de ❌

External Style Sheet Support in HTML Email

Source: Litmus Email Analytics


42%of email clients do not support external style sheets


#LitmusLive

emailclientmarketshare.com

http://emailclientmarketshare.com


Apple Mail ✅

Lotus Notes ✅


Thunderbird ✅

Android 4.x ✅

Gmail App (Android) ❌


AOL Mail ✅

Gmail ❌

Inbox by Gmail ❌

Google Apps ❌

Office 365 ✅

Outlook.com ✅

Yahoo! Mail ✅

GMX ✅

Web.de ✅

Embedded CSS Support in HTML Email


*Based on class and id support, not element selectors


Gmail strips out any class or id in the <head>, requiring inline CSS.


25%of email clients do not support embedded CSS


(Thanks, Gmail)


Apple Mail ✅

Lotus Notes ✅


Thunderbird ✅

Android 4.x ✅

Gmail App (Android) ✅


AOL Mail ✅

Gmail ✅

Inbox by Gmail ✅

Google Apps ✅

Office 365 ✅

Outlook.com ✅

Yahoo! Mail ✅

GMX ✅

Web.de ✅

Inline CSS Support in HTML Email



100%of email clients support inline CSS



Not inlining CSS can have really small effects…

#LitmusLive

Without Inline CSS With Inline CSS

###


…or really BIG ones

#LitmusLive

Without Inline CSS

$$$

#LitmusLive

% With Inline CSS %$ Without Inline CSS $

#LitmusLive

Without Inline CSS

&&&

#LitmusLive

% With Inline CSS %& Without Inline CSS &

#LitmusLive

Without Inline CSS

'''

#LitmusLive

% With Inline CSS %' Without Inline CSS '


Don’t be that email. Inline your CSS.


Wait, do I have to do all of this by hand?!?!

litmus ®

What is CSS inlining?


CSS InliningCSS inlining is the automated process of moving external style sheets or embedded styles in the <head> right inline onto its corresponding HTML elements.


Takes external or embedded CSS…<html> <head> <style type=“text/css”> .headline { font-size: 60px; color: red; font-family: serif; } </style> </head> <body> <h1 class=“headline”>Headline</p> </body> </html>


…and automatically inlines it for you

<html> <head> </head> <body> <h1 class=“headline” style=“font-size: 60px; color: red; font-family: serif;”>Headline</h1> </body> </html>

litmus ® #LitmusLiveSource: 2016 State of Email Production by Litmus

https://litmus.com/lp/2016-state-of-email-production


73%of email designers and developers do not use CSS inlining

Source: 2016 State of Email Production by Litmus

https://litmus.com/lp/2016-state-of-email-production

litmus ®

Tools for CSS inlining

litmus ®

Third party inliner sites


Copy & paste your HTML into a third party site and convert your

code to inlined CSS.


PutsMail Inliner

https://putsmail.com/inliner


MailChimp CSS Inliner

http://templates.mailchimp.com/resources/inline-css/


Campaign Monitor CSS Inliner

https://inliner.cm


Zurb's Responsive Email Inliner

http://foundation.zurb.com/emails/inliner.html


Premailer

http://premailer.dialect.ca/


No learning curve or setup (simple copy & paste)

✅

Use with any editor ✅

No maintenance required ✅

Requires Internet ❌

Constant copying & pasting (not ideal for iterative workflow)

❌

Other automations not available (not ideal for iterative workflow)

❌

No flexibility or customization ❌

Third party inliner sitesPROS CONS

litmus ®

Task runners with open source CSS inliners


Grunt Gulp

Task runners


Lee Munroe’s Grunt Email Workflow

https://github.com/leemunroe/grunt-email-workflow


Setup


SetupInstall Node.js ✅

Install Grunt-cli and Grunt (npm install grunt-cli -g)

✅

Setup Mailgun, Litmus, Rackspace Cloud (optional) ✅

Setup necessary packages: git clone https://github.com/leemunroe/grunt-email-workflow.git cd grunt-email-workflow npm install

✅

Create secrets.json in your project root ✅

Run grunt in command line and check /dist folder to see inlined

emails✅


Grunt


How It WorksCompiles SCSS to CSS

Compiles Handlebars (templating language) to HTML

Inlines CSS using Juice

Generates Browser preview and sends test emails (if setup)


Juice Inliner

https://github.com/Automattic/juice


Roadie Inliner

https://github.com/Mange/roadie


Premailer Inliner

https://github.com/premailer/premailer


Use with any editor ✅

Use locally (Internet not needed and easy to create backups on GitHub,

Dropbox, etc.)✅

Complete flexibility & customization (add other automations)

✅

DRY (Don’t Repeat Yourself) ✅

Learning curve (Requires command line and JavaScript knowledge)

❌

Dependencies ❌

Requires maintenance ❌

Task runners with open source inlinersPROS CONS

litmus ®

CSS inlining in Litmus Builder


Just a simple toggle


Click to copy & paste or download compiled HTML


No learning curve or setup (just a simple toggle)

✅

No maintenance required ✅

Best CSS inliner ever made for email ✅

Litmus Instant Previews integration ✅


Requires Internet ❌

No flexibility or customization ❌

Does not work with any editor (requires Litmus Builder)

❌

Only inlines embedded CSS ❌

CSS inlining in Litmus BuilderPROS CONS

litmus ®

Which CSS inliner is best?


Most CSS inliners were not built specifically for HTML email


Email Development Newsletter #2: CSS Inliners Julie Ng outlines the dangers of CSS inlining

https://julie.io/learn-email-html/issues/2-inliners-responsive-grids/


Email Development Newsletter #2: CSS Inliners Julie Ng recommends Roadie as the best CSS inliner for HTML email

https://julie.io/learn-email-html/issues/2-inliners-responsive-grids/


The Perfect Email CSS Inliner Mosaic.io ranks Litmus Builder/PutsMail as the #1 CSS inliner for HTML email

https://mosaico.io/email-client-tricks/email-inliners/


Never re-orders or converts CSS in any way ✅

Preserves media queries, web fonts, and animation ✅

Preserves Outlook conditional comments ✅

Preserves pseudo selectors ✅

Preserves character entities ✅

CSS inliner in Litmus Builder/PutsMail

Preserves CSS comments for unlined CSS ✅

Preserves duplicate properties ✅

Prevents CSS from being inlined with data-ignore-inlining attribute ✅

Litmus Instant Previews integration ✅



1. Litmus Builder/PutsMail ✅

2. Roadie ✅

3. Juice ✅

Our top recommended CSS inliners for HTML email

*Varies on use case (this ranking is of straight HTML, not accounting for ESP-specific use cases)

litmus ®

* DEMO *

litmus ®

Tools + Resources


litmus.com/community

http://litmus.com/community


litmus.com/scope

http://litmus.com/scope


litmusbuilder.com

http://litmusbuilder.com


litmus.com

http://litmus.com

litmus ®

Next webinar:How to Automate Your Email Development

Workflow with Litmus Builder

Wednesday, September 7th @ 1PM EDT

litmus ®

Q&A7-day free trial of Litmus use coupon code:

CSSINLINING

litmus.com/giftcard

CSS Inlining in Email: What It IS + How To Do It

Design

Transcript of CSS Inlining in Email: What It IS + How To Do It