Everything You Need to Know About Gmail Rendering
7 likes10,239 views
The document discusses Gmail's rendering updates, highlighting that Gmail now supports embedded CSS and media queries on various platforms, improving responsive email design across 75% of the market. It provides details on common errors to avoid and best practices for email formatting within Gmail's limitations, such as restrictions on external stylesheets and character limits for CSS. Additionally, it offers insights into target audiences using non-Gmail accounts and how to effectively utilize Gmail's features for better email compatibility.
![@KevinMandeville #CSSSummit
❌ td[class=“foo”] { }
✅ .foo { }
DONOTUSEATTRIBUTESELECTORS](https://image.slidesharecdn.com/gmail-webinarcopy-170517205916/85/Everything-You-Need-to-Know-About-Gmail-Rendering-35-320.jpg)
![@KevinMandeville #CSSSummit
=, *, /, $, %, , &, @,
^, {, }, [, ], (, ), ?,
|, <, >
DONOTUSETHESECHARACTERSINYOURCSS](https://image.slidesharecdn.com/gmail-webinarcopy-170517205916/85/Everything-You-Need-to-Know-About-Gmail-Rendering-37-320.jpg)
Everything You Need to Know About Gmail Rendering
- 1. litmus ® Everything You Need to Know About GMAILRENDERING
- 5. litmus ® #LitmusLive emailclientmarketshare.com Source: Litmus Email Analytics
- 6. litmus ® #LitmusLive 26%of market share is Gmail Source: Litmus Email Analytics
- 9. #LitmusLive ❌ WITHOUTINLINECSS ✅ WITHINLINECSS
- 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
- 22. @KevinMandeville #CSSSummit ✅ :hover ❌ :checked (GOODBYECSSCLICKEVENTS+INTERACTIVEEMAILINGMAIL)
- 23. @KevinMandeville #CSSSummit ITEMSSTILLNOTSUPPORTED... ❌ External stylesheets ❌ Absolute/fixed positioning ❌ Negative margins ❌ CSS animations ❌ Web fonts ❌ HTML5 video
- 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)
- 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
- 35. @KevinMandeville #CSSSummit ❌ td[class=“foo”] { } ✅ .foo { } DONOTUSEATTRIBUTESELECTORS
- 36. @KevinMandeville #CSSSummit @media { @font-face { } } DONOTNESTCSS@DECLARATIONS ❌
- 37. @KevinMandeville #CSSSummit =, *, /, $, %, , &, @, ^, {, }, [, ], (, ), ?, |, <, > DONOTUSETHESECHARACTERSINYOURCSS
- 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 ✅ ❌
- 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
- 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;"> </div>
- 56. litmus ® #LitmusLive GMAILDISPLAYSDOWNLOADICON FORANYUNLINKEDIMAGE (TYPICALLYABOVE250x250DIMENSIONS)
- 57. @KevinMandeville #CSSSummit <a href="http://litmus.com"> <img src="logo.jpg"> </a> LINKIMAGESTOREMOVEDOWNLOADICON
- 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
- 65. litmus ® How important is HYBRIDORFABFOURNOW?
- 68. litmus ® #LitmusLive https://litmus.com/blog/the-ultimate-guide-to-email-on-android
- 74. litmus ® Q&A