Download as PDF, PPTX
![@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)
Uploaded byLitmus
Everything You Need to Know About Gmail Rendering
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.
More Related Content
Similar to Everything You Need to Know About Gmail Rendering
![[Webinar Slides] Gmail’s Responsive Email Updates](https://cdn.slidesharecdn.com/ss_thumbnails/gmailupdates2016-161010165711-thumbnail.jpg?width=640&height=640&fit=bounds)
Everything You Need to Know About Gmail Rendering
- 1. litmus ® Everything YouNeed to Know About GMAILRENDERING
- 2.
- 3.
- 4.
- 5.
- 6. litmus ® #LitmusLive 26%of marketshare is Gmail Source: Litmus Email Analytics
- 7.
- 8.
- 9. #LitmusLive ❌ WITHOUTINLINECSS ✅WITHINLINECSS
- 10.
- 11.
- 12.
- 13.
- 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.1ANDROID6.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 ofthe RENDERINGUPDATE
- 18. litmus ® #LitmusLive 75%of marketshare now supports responsive email - no excuses anymore! Source: Litmus Email Analytics
- 19.
- 20.
- 21.
- 22. @KevinMandeville #CSSSummit ✅ :hover ❌:checked (GOODBYECSSCLICKEVENTS+INTERACTIVEEMAILINGMAIL)
- 23. @KevinMandeville #CSSSummit ITEMSSTILLNOTSUPPORTED... ❌ Externalstylesheets ❌ Absolute/fixed positioning ❌ Negative margins ❌ CSS animations ❌ Web fonts ❌ HTML5 video
- 24.
- 25.
- 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.
- 30. litmus ® #LitmusLive HOWTOIDENTIFYYOURPOP/IMAPAUDIENCE 1. Useemail 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.
- 32.
- 33.
- 34.
- 35. @KevinMandeville #CSSSummit ❌ td[class=“foo”]{ } ✅ .foo { } DONOTUSEATTRIBUTESELECTORS
- 36. @KevinMandeville #CSSSummit @media { @font-face{ } } DONOTNESTCSS@DECLARATIONS ❌
- 37. @KevinMandeville #CSSSummit =, *,/, $, %, , &, @, ^, {, }, [, ], (, ), ?, |, <, > DONOTUSETHESECHARACTERSINYOURCSS
- 38.
- 39.
- 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.
- 43.
- 44.
- 45.
- 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.
- 51.
- 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>
- 54.
- 55.
- 56.
- 57. @KevinMandeville #CSSSummit <a href="http://litmus.com"> <imgsrc="logo.jpg"> </a> LINKIMAGESTOREMOVEDOWNLOADICON
- 58.
- 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 westill need to INLINEOURCSS?
- 63. litmus ® #LitmusLive 99%of marketshare now supports embedded CSS Source: Litmus Email Analytics
- 64.
- 65. litmus ® How importantis HYBRIDORFABFOURNOW?
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.