Gmail is a headache for people who make and send email. Until September 2016, Gmail required the use of inlined CSS and didn’t support responsive email. A major update to the Gmail rendering engine rolled out support for embedded styles and media queries. Months after the update, rendering fragmentation still remains and is cause for confusion in the email community.

1. litmus ®
Everything You Need to Know About
GMAILRENDERING

2. @KevinMandeville #CSSSummit
HELLO,I’M@KEVINMANDEVILLE

3. @KevinMandeville #CSSSummit
IDESIGN+BUILDEMAILSAT

4. litmus ®
#LitmusLive
TWEET
@litmusapp #LitmusLive
WITHANYQUESTIONS

5. litmus ®
#LitmusLive
emailclientmarketshare.com
Source: Litmus Email Analytics

6. litmus ®
#LitmusLive
26%of market share is Gmail
Source: Litmus Email Analytics

7. litmus ®
#LitmusLive
WENEED(ED)INLINESTYLES
BECAUSEGMAIL...

8. B.C(SS).
GMAILRENDERING
Source:https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-after-the-2016-update-53c15151063a

9. #LitmusLive
❌ WITHOUTINLINECSS ✅ WITHINLINECSS

10. #LitmusLive
✅ WITHINLINECSS❌ WITHOUTINLINECSS

11. 🎉GMAILNOWSUPPORTS 🎉
EMBEDDEDCSS+MEDIAQUERIES!!!

12. 😍
😍
😍
😍
https://blog.google/products/gmail/better-emails-tailored-to-all-your-devices | https://litmus.com/blog/gmail-to-support-responsive-email-design

13. AFTER
GMAILRENDERING
Source:https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-after-the-2016-update-53c15151063a

14. litmus ®
#LitmusLive
Desktop webmail ✅
Mobile webmail ❌
Gmail Android App (Gmail Account) ✅
Gmail Android App (Gmailified Account) ✅
Gmail Android App (POP/IMAP Account) ❌
Gmail iOS App ✅
Inbox by Gmail webmail ✅
Inbox by Gmail iOS App ✅
Inbox by Gmail Android App ✅
G Suite (formerly Google Apps) ✅
Google Apps Free Edition (legacy) ❌
EMBEDDEDCSS+MEDIAQUERYSUPPORTINGMAIL
(*EXTERNALCSSSTILLNOTSUPPORTED)

15. litmus ®
#LitmusLive
Android 4.4 (Vanilla Stock Email App) ✅
Android 5.1 (Vanilla Stock Email App) ❌
Android 6.0 (Vanilla Stock Email App) ❌
Gmail Android App (Gmail Account) ✅
Gmail Android App (Gmailified Account) ✅
Gmail Android App (POP/IMAP Account) ❌
EMBEDDEDCSS+MEDIAQUERYSUPPORTONANDROID

16. litmus ®
#LitmusLive
ANDROID4.4 ANDROID5.1 ANDROID6.0
DEFAULTANDROIDEMAILAPPS
Android 5.1+ switched to Gmail app as the default email app.
The stock vanilla email app on Android OS does not currently
exist in the wild, though remains publicly available for
developers to use and build off of. The stock vanilla email app
on Android OS on 5.1+ does not support embedded CSS.
Stock vanilla email app of
Android OS (supports
embedded CSS)

17. litmus ®
Highlights of the
RENDERINGUPDATE

18. litmus ®
#LitmusLive
75%of market share now supports responsive email - no excuses anymore!
Source: Litmus Email Analytics

19. @KevinMandeville #CSSSummit
✅ SUPPORTEDMEDIAQUERIES
Types:
all
screen
Keywords:
and
only
Queries:
min-width
max-width
min-device-width
max-device-width
orientation
min-resolution
max-resolution

20. @KevinMandeville #CSSSummit
✅ BACKGROUNDIMPROVEMENTS
background
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size

21. @KevinMandeville #CSSSummit
✅ ACCESSIBILITYCSSIMPROVEMENTS
pitch
pitch-range
richness
speak
speak-header
speak-numeral
speak-punctuation
speech-rate

22. @KevinMandeville #CSSSummit
✅ :hover
❌ :checked
(GOODBYECSSCLICKEVENTS+INTERACTIVEEMAILINGMAIL)

23. @KevinMandeville #CSSSummit
ITEMSSTILLNOTSUPPORTED...
❌ External stylesheets
❌ Absolute/fixed positioning
❌ Negative margins
❌ CSS animations
❌ Web fonts
❌ HTML5 video

24. litmus ®
COMMONERRORSTOAVOID...
AREYOUNOTSEEINGGMAILRENDERYOURCSS?

25. litmus ®
#LitmusLive
DOESYOURVERSIONORACCOUNTOF
GMAILSUPPORTEMBEDDEDCSS?
#1

26. litmus ®
#LitmusLive
Desktop webmail ✅
Mobile webmail ❌
Gmail Android App (Gmail Account) ✅
Gmail Android App (Gmailified Account) ✅
Gmail Android App (POP/IMAP Account) ❌
Gmail iOS App ✅
Inbox by Gmail webmail ✅
Inbox by Gmail iOS App ✅
Inbox by Gmail Android App ✅
G Suite (formerly Google Apps) ✅
Google Apps Free Edition (legacy) ❌
EMBEDDEDCSS+MEDIAQUERYSUPPORTINGMAIL
(*EXTERNALCSSSTILLNOTSUPPORTED)

27. litmus ®
#LitmusLive
Android 4.4 (Vanilla Stock Email App) ✅
Android 5.1 (Vanilla Stock Email App) ❌
Android 6.0 (Vanilla Stock Email App) ❌
Gmail Android App (Gmail Account) ✅
Gmail Android App (Gmailified Account) ✅
Gmail Android App (POP/IMAP Account) ❌
EMBEDDEDCSS+MEDIAQUERYSUPPORTONANDROID

28. litmus ®
#LitmusLive
✅ GMAILANDROIDAPP(GMAILACCOUNT) ❌ GMAILANDROIDAPP(POP/IMAPACCOUNT)

29. litmus ®
#LitmusLive
POP/IMAPACCOUNTS=NON-GMAILACCOUNTS
(i.e.@aol.com,@outlook.com,@yahoo.com)
~EMAILTHATLIVESOUTSIDEOFGMAIL’SSERVERS~

30. litmus ®
#LitmusLive
HOWTOIDENTIFYYOURPOP/IMAPAUDIENCE
1. Use email analytics
2. Choose representative sample of campaigns to
analyze based on your audience size
3. Select all opens from Gmail clients
4. Calculate number of non-Gmail addresses used to
ballpark total and percentage of POP/IMAP audience

31. https://blog.google/products/gmail/gmailify-best-of-gmail-without-gmail
GMAILIFYYOURNON-GMAILEMAILACCOUNTS
TOGETRENDERINGUPDATE

32. litmus ®
#LitmusLive
GMAILANDROIDAPP(POP/IMAP
ACCOUNT)DOESNOTSUPPORT
BACKGROUNDIMAGESATALL
❌

33. litmus ®
#LitmusLive
ISYOURCSS“INVALID”?
#2
(ACCORDINGTOGMAIL)

34. litmus ®
#LitmusLive
GMAILWILLSTRIPANYCSSTHATIS
INVALIDORITDEEMSINVALID

35. @KevinMandeville #CSSSummit
❌ td[class=“foo”] { }
✅ .foo { }
DONOTUSEATTRIBUTESELECTORS

36. @KevinMandeville #CSSSummit
@media {
@font-face { }
}
DONOTNESTCSS@DECLARATIONS
❌

37. @KevinMandeville #CSSSummit
=, *, /, $, %, , &, @,
^, {, }, [, ], (, ), ?,
|, <, >
DONOTUSETHESECHARACTERSINYOURCSS

38. @KevinMandeville #CSSSummit
VALIDATEYOURCSSUSINGW3C
https://jigsaw.w3.org/css-validator/

39. litmus ®
#LitmusLive
SIMPLYPLACEANY“INVALID”GMAIL
CSSINTHEIROWNSTYLEBLOCKS

40. @KevinMandeville #CSSSummit
<style>
.foo {
width: 50%;
}
@media screen and (-webkit-min-device-
pixel-ratio: 0) {
.foo { width: 100%; }
}
</style>
❌ GMAILWILLSTRIPTHISENTIRESTYLEBLOCK
“Invalid” to Gmail

41. @KevinMandeville #CSSSummit
<style>
.foo {
width: 50%;
}
</style>
<style>
@media screen and (-webkit-min-device-pixel-
ratio: 0) {
.foo { width: 100%; }
}
</style>
✅ GMAILWILLONLYSTRIPTHE2NDSTYLEBLOCK
“Invalid” to Gmail
✅
❌

42. litmus ®
#LitmusLive
AREYOUOVERGMAIL’S
8142CSSCHARACTERLIMIT?
#3
(THISCOUNTSALLSTYLEBLOCKS)

43. litmus ®
#LitmusLive
GMAILWILLSTRIPALLCSSSTYLEBLOCKS
ONCEITSURPASSES8142CHARACTERS

44. litmus ®
#LitmusLive
USECSSMINIFIERSTO
COMPRESSYOURCSS
(ORDOITBYHAND)

45. litmus ®
#LitmusLive
WEREIMAGESOFFBYDEFAULT&
THENTURNEDON?
#4

46. @KevinMandeville #CSSSummit
<style>
.foo { background: #333333; }
</style>
<p class="foo">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit.
</p>
<img src="spacer.gif" alt="This image is
blocked." />
RAWMARKUP
Source:https://emails.hteumeuleu.com/troubleshooting-gmails-responsive-design-support-ad124178bf81

47. @KevinMandeville #CSSSummit
<div class="m159215f7d36ee7fd">
<style>
div.m159215f7d36ee7fd .m_3567455155959655244
foo { background: #333333; }
</style>
<p class="m_3567455155959655244foo">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit.
</p>
<img alt="This image is blocked." />
</div>
PROCESSEDMARKUPWHENIMAGESAREBLOCKED...
Source:https://emails.hteumeuleu.com/troubleshooting-gmails-responsive-design-support-ad124178bf81

48. @KevinMandeville #CSSSummit
<div class="m159215f7d36ee7fd">
<style>
div.m159215f7d36ee7fd .m_3567455155959655244
foo { background: #333333; }
</style>
<p class="m_-8249599400804587256foo">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit.
</p>
<img alt="This image is blocked." />
</div>
PROCESSEDMARKUPWHENIMAGESAREDOWNLOADED...
Source:https://emails.hteumeuleu.com/troubleshooting-gmails-responsive-design-support-ad124178bf81

49. @KevinMandeville #CSSSummit
<div class="m159215f7d36ee7fd">
<style>
div.m159215f7d36ee7fd .m_3567455155959655244
foo { background: #333333; }
</style>
<p class="m_-8249599400804587256foo">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit.
</p>
<img alt="This image is blocked." />
</div>
CURRENTBUGWHERECLASSESCHANGEWHENIMAGESAREDOWNLOADED
Source:https://emails.hteumeuleu.com/troubleshooting-gmails-responsive-design-support-ad124178bf81

50. litmus ®
Some more
GMAILQUIRKS...

51. litmus ®
#LitmusLive
GMAILiOSAPPADDSSPACING
TORIGHT-HANDSIDEOFEMAIL

52. @KevinMandeville #CSSSummit
FORCEGMAILiOSTOFULL-WIDTH
CSS
.body {
min-width: 100vw;
}
HTML
<body class=“body”></body>
(*THISWILLIMPACTGMAILANDROIDPOP/IMAPVIEW)

53. @KevinMandeville #CSSSummit
FORCEADESKTOPVIEWONGMAILANDROIDPOP/IMAP
CSS
.gmailfix {
display: none;
display: none !important;
}
HTML
<div class="gmailfix" style=“white-space: nowrap; font:
15px courier; line-height: 0;">&nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;</div>

54. litmus ®
#LitmusLive
GMAILCLIPSYOUREMAILAT102KB
(HTMLFILESIZE,NOTIMAGES)

55. @KevinMandeville #CSSSummit
USEHTMLMINIFIERSTOCOMPRESSYOURHTML
https://kangax.github.io/html-minifier/
(ORDOITBYHAND)

56. litmus ®
#LitmusLive
GMAILDISPLAYSDOWNLOADICON
FORANYUNLINKEDIMAGE
(TYPICALLYABOVE250x250DIMENSIONS)

57. @KevinMandeville #CSSSummit
<a href="http://litmus.com">
<img src="logo.jpg">
</a>
LINKIMAGESTOREMOVEDOWNLOADICON

58. litmus ®
How to
TARGETGMAIL
🎯

59. @KevinMandeville #CSSSummit
TARGETINGGMAIL+INBOXBYGMAIL
CSS
u ~ div .gmail {
/* Insert CSS here */
}
HTML
<div class=“gmail”></div>

60. @KevinMandeville #CSSSummit
TARGETINGGMAIL
CSS
u + .body section .gmail {
/* Insert CSS here */
}
HTML
<body class=“body”>
<section>
<div class=“gmail”></div>
</section>
</body>

61. @KevinMandeville #CSSSummit
TARGETINGINBOXBYGMAIL
CSS
u + .body > .inbox {
/* Insert CSS here */
}
HTML
<body class=“body”>
<section>
<div class=“inbox”></div>
</section>
</body>

62. litmus ®
Do we still need to
INLINEOURCSS?

63. litmus ®
#LitmusLive
99%of market share now supports embedded CSS
Source: Litmus Email Analytics

64. @KevinMandeville #CSSSummit
https://litmus.com/community/discussions/6116-here-s-why-litmus-didn-t-inline-css-for-its-first-newsletter-of-2017
LITMUSDIDN’TINLINECSSFORITSFIRSTNEWSLETTEROF2017

65. litmus ®
How important is
HYBRIDORFABFOURNOW?

66. litmus ®
RESOURCES

67. litmus ®
#LitmusLive
https://litmus.com/blog/gmail-to-support-responsive-email-design

68. litmus ®
#LitmusLive
https://litmus.com/blog/the-ultimate-guide-to-email-on-android

69. litmus ®
#LitmusLive
https://litmus.com/blog/3-keys-to-understanding-email-rendering-on-android

70. litmus ®
#LitmusLive
https://emails.hteumeuleu.com/troubleshooting-gmails-responsive-design-support-ad124178bf81

71. litmus ®
#LitmusLive
litmus.com/community

72. litmus ®
#LitmusLive
litmus.com/scope

73. litmus ®
#LitmusLive
litmus.com

74. litmus ®
Q&A