CSS Inlining in Email: What It IS + How To Do It
•
6 likes•2,510 views
Working with Cascading Style Sheets (CSS) to add styles and formatting to your HTML emails can be time-consuming to code by hand and a bit challenging to manage. In this actionable webinar, Kevin Mandeville, Litmus’ own email design extraordinaire (and the guy who embedded a live Twitter feed in an email!), takes you through the CSS inlining process from start to finish. He explores exactly what inline CSS is and why it’s essential for creating bulletproof HTML emails that look great everywhere.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to CSS Inlining in Email: What It IS + How To Do It
Similar to CSS Inlining in Email: What It IS + How To Do It (20)
More from Litmus
More from Litmus (18)
Recently uploaded
Recently uploaded (20)
CSS Inlining in Email: What It IS + How To Do It
- 1. litmus ® CSS Inlining in Email: What It Is + How To Do It
- 2. litmus ® #ResponsiveEmail Hello, I’m @KevinMandeville.
- 3. litmus ® #ResponsiveEmail I design + build emails at
- 4. litmus ® #LitmusLive Tweet @litmusapp #LitmusLive with any questions
- 5. litmus ® What is CSS?
- 6. litmus ® #LitmusLive CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.
- 7. litmus ® #LitmusLive Content <div>, <h1>, <p> Style width, font-size, display Interaction (JavaScript)
- 8. litmus ® #LitmusLive 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.)
- 9. litmus ® 3 Ways to Use CSS
- 10. litmus ® #LitmusLive External Style Sheets <link> Embedded CSS <style> in <head> Inline CSS <div style=“width: 600px;”> 3 Ways to Use CSS
- 11. litmus ® #LitmusLive External Style Sheets
- 12. litmus ® #LitmusLive External Style Sheets <html> <head> <link rel="stylesheet" type="text/css" href=“style.css"> </head> <body> <!-- CONTENT --> </body> </html>
- 13. litmus ® #LitmusLive Embedded CSS <html> <head> <style type=“text/css”> /* CSS */ </style> </head> <body> <!-- CONTENT --> </body> </html>
- 14. litmus ® #LitmusLive 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>
- 15. litmus ® Why Inline CSS is Important for HTML Email
- 16. litmus ® #LitmusLive 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
- 17. litmus ® #LitmusLive 42%of email clients do not support external style sheets Source: Litmus Email Analytics
- 19. litmus ® #LitmusLive 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 ✅ Embedded CSS Support in HTML Email Source: Litmus Email Analytics *Based on class and id support, not element selectors
- 20. litmus ® #LitmusLive Gmail strips out any class or id in the <head>, requiring inline CSS.
- 21. litmus ® #LitmusLive 25%of email clients do not support embedded CSS Source: Litmus Email Analytics (Thanks, Gmail)
- 22. litmus ® #LitmusLive 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 ✅ Inline CSS Support in HTML Email Source: Litmus Email Analytics
- 23. litmus ® #LitmusLive 100%of email clients support inline CSS Source: Litmus Email Analytics
- 24. litmus ® #LitmusLive Not inlining CSS can have really small effects…
- 25. #LitmusLive Without Inline CSS With Inline CSS ###
- 26. litmus ® #LitmusLive …or really BIG ones
- 28. #LitmusLive % With Inline CSS %$ Without Inline CSS $
- 30. #LitmusLive % With Inline CSS %& Without Inline CSS &
- 32. #LitmusLive % With Inline CSS %' Without Inline CSS '
- 33. litmus ® #LitmusLive Don’t be that email. Inline your CSS.
- 34. litmus ® #LitmusLive Wait, do I have to do all of this by hand?!?!
- 36. litmus ® What is CSS inlining?
- 37. litmus ® #LitmusLive CSS Inlining CSS inlining is the automated process of moving external style sheets or embedded styles in the <head> right inline onto its corresponding HTML elements.
- 38. litmus ® #LitmusLive 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>
- 39. litmus ® #LitmusLive …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>
- 40. litmus ® #LitmusLive Source: 2016 State of Email Production by Litmus
- 41. litmus ® #LitmusLive 73%of email designers and developers do not use CSS inlining Source: 2016 State of Email Production by Litmus
- 44. litmus ® Tools for CSS inlining
- 45. litmus ® Third party inliner sites
- 46. litmus ® #LitmusLive Copy & paste your HTML into a third party site and convert your code to inlined CSS.
- 48. litmus ® #LitmusLive MailChimp CSS Inliner
- 49. litmus ® #LitmusLive Campaign Monitor CSS Inliner
- 50. litmus ® #LitmusLive Zurb's Responsive Email Inliner
- 52. litmus ® #LitmusLive 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 sites PROS CONS
- 53. litmus ® Task runners with open source CSS inliners
- 55. litmus ® #LitmusLive Grunt Gulp Task runners
- 56. litmus ® #LitmusLive Lee Munroe’s Grunt Email Workflow
- 58. litmus ® #LitmusLive Setup Install 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 ✅
- 60. litmus ® #LitmusLive How It Works Compiles SCSS to CSS Compiles Handlebars (templating language) to HTML Inlines CSS using Juice Generates Browser preview and sends test emails (if setup)
- 64. litmus ® #LitmusLive 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 inliners PROS CONS
- 65. litmus ® CSS inlining in Litmus Builder
- 66. litmus ® #LitmusLive Just a simple toggle
- 67. litmus ® #LitmusLive Click to copy & paste or download compiled HTML
- 68. litmus ® #LitmusLive No learning curve or setup (just a simple toggle) ✅ No maintenance required ✅ Best CSS inliner ever made for email ✅ Litmus Instant Previews integration ✅ DRY (Don’t Repeat Yourself) ✅ Requires Internet ❌ No flexibility or customization ❌ Does not work with any editor (requires Litmus Builder) ❌ Only inlines embedded CSS ❌ CSS inlining in Litmus Builder PROS CONS
- 69. litmus ® Which CSS inliner is best?
- 70. litmus ® #LitmusLive Most CSS inliners were not built specifically for HTML email
- 71. litmus ® #LitmusLive Email Development Newsletter #2: CSS Inliners Julie Ng outlines the dangers of CSS inlining
- 72. litmus ® #LitmusLive Email Development Newsletter #2: CSS Inliners Julie Ng recommends Roadie as the best CSS inliner for HTML email
- 73. litmus ® #LitmusLive The Perfect Email CSS Inliner Mosaic.io ranks Litmus Builder/PutsMail as the #1 CSS inliner for HTML email
- 74. litmus ® #LitmusLive 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 ✅ DRY (Don’t Repeat Yourself) ✅
- 75. litmus ® #LitmusLive 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)
- 76. litmus ® * DEMO *
- 77. litmus ® Tools + Resources
- 82. litmus ® Next webinar: How to Automate Your Email Development Workflow with Litmus Builder Wednesday, September 7th @ 1PM EDT
- 83. litmus ® Q&A 7-day free trial of Litmus use coupon code: CSSINLINING litmus.com/giftcard