Downloaded 93 times
Uploaded byLitmus
CSS Inlining in Email: What It IS + How To Do It
This document explains CSS inlining for HTML emails, highlighting its importance for compatibility across various email clients, as 100% support inline CSS. It provides methods for CSS usage and discusses third-party and built-in tools for CSS inlining, recommending Litmus Builder as the top option. The document also emphasizes the frequent need for inlining due to limitations in support for external and embedded CSS in many email clients.
More Related Content
![Adapting to Consumers' New Definition of Spam [Webinar]](https://cdn.slidesharecdn.com/ss_thumbnails/adaptingtoconsumersnewdefinitionofspam-161116220236-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to CSS Inlining in Email: What It IS + How To Do It
![[Webinar Slides] Gmail’s Responsive Email Updates](https://cdn.slidesharecdn.com/ss_thumbnails/gmailupdates2016-161010165711-thumbnail.jpg?width=640&height=640&fit=bounds)
CSS Inlining in Email: What It IS + How To Do It
- 1. litmus ® CSS Inliningin Email: What It Is + How To Do It
- 2. litmus ® #ResponsiveEmail Hello, I’m@KevinMandeville.
- 3. litmus ® #ResponsiveEmail I design+ build emails at
- 4.
- 5. litmus ® What isCSS?
- 6. litmus ® #LitmusLive CSS Cascading StyleSheets (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 likea 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 Waysto Use CSS
- 10. litmus ® #LitmusLive External StyleSheets <link> Embedded CSS <style> in <head> Inline CSS <div style=“width: 600px;”> 3 Ways to Use CSS
- 11.
- 12. litmus ® #LitmusLive External StyleSheets <html> <head> <link rel="stylesheet" type="text/css" href=“style.css"> </head> <body> <!-- CONTENT --> </body> </html>
- 13. litmus ® #LitmusLive Embedded CSS <html> <head> <styletype=“text/css”> /* CSS */ </style> </head> <body> <!-- CONTENT --> </body> </html>
- 14. litmus ® #LitmusLive Inline CSS <html> <head></head> <body> <divstyle=“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 InlineCSS 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 emailclients do not support external style sheets Source: Litmus Email Analytics
- 18.
- 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 stripsout any class or id in the <head>, requiring inline CSS.
- 21. litmus ® #LitmusLive 25%of emailclients 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 emailclients support inline CSS Source: Litmus Email Analytics
- 24. litmus ® #LitmusLive Not inliningCSS can have really small effects…
- 25. #LitmusLive Without Inline CSSWith Inline CSS ###
- 26. litmus ® #LitmusLive …or reallyBIG ones
- 27.
- 28. #LitmusLive % With InlineCSS %$ Without Inline CSS $
- 29.
- 30. #LitmusLive % With InlineCSS %& Without Inline CSS &
- 31.
- 32. #LitmusLive % With InlineCSS %' Without Inline CSS '
- 33. litmus ® #LitmusLive Don’t bethat email. Inline your CSS.
- 34. litmus ® #LitmusLive Wait, doI have to do all of this by hand?!?!
- 35.
- 36. litmus ® What isCSS inlining?
- 37. litmus ® #LitmusLive CSS Inlining CSSinlining 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 externalor 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 automaticallyinlines 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: 2016State of Email Production by Litmus
- 41. litmus ® #LitmusLive 73%of emaildesigners and developers do not use CSS inlining Source: 2016 State of Email Production by Litmus
- 42.
- 43.
- 44. litmus ® Tools forCSS inlining
- 45. litmus ® Third partyinliner sites
- 46. litmus ® #LitmusLive Copy &paste your HTML into a third party site and convert your code to inlined CSS.
- 47.
- 48.
- 49. litmus ® #LitmusLive Campaign MonitorCSS Inliner
- 50. litmus ® #LitmusLive Zurb's ResponsiveEmail Inliner
- 51.
- 52. litmus ® #LitmusLive No learningcurve 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 runnerswith open source CSS inliners
- 54.
- 55.
- 56. litmus ® #LitmusLive Lee Munroe’sGrunt Email Workflow
- 57.
- 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 ✅
- 59.
- 60. litmus ® #LitmusLive How ItWorks Compiles SCSS to CSS Compiles Handlebars (templating language) to HTML Inlines CSS using Juice Generates Browser preview and sends test emails (if setup)
- 61.
- 62.
- 63.
- 64. litmus ® #LitmusLive Use withany 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 inLitmus Builder
- 66. litmus ® #LitmusLive Just asimple toggle
- 67. litmus ® #LitmusLive Click tocopy & paste or download compiled HTML
- 68. litmus ® #LitmusLive No learningcurve 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 CSSinliner is best?
- 70. litmus ® #LitmusLive Most CSSinliners were not built specifically for HTML email
- 71. litmus ® #LitmusLive Email DevelopmentNewsletter #2: CSS Inliners Julie Ng outlines the dangers of CSS inlining
- 72. litmus ® #LitmusLive Email DevelopmentNewsletter #2: CSS Inliners Julie Ng recommends Roadie as the best CSS inliner for HTML email
- 73. litmus ® #LitmusLive The PerfectEmail CSS Inliner Mosaic.io ranks Litmus Builder/PutsMail as the #1 CSS inliner for HTML email
- 74. litmus ® #LitmusLive Never re-ordersor 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. LitmusBuilder/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.
- 77. litmus ® Tools +Resources
- 78.
- 79.
- 80.
- 81.
- 82. litmus ® Next webinar: Howto Automate Your Email Development Workflow with Litmus Builder Wednesday, September 7th @ 1PM EDT
- 83. litmus ® Q&A 7-day freetrial of Litmus use coupon code: CSSINLINING litmus.com/giftcard