[Webinar Slides] Gmail’s Responsive Email Updates

872 views

Published on

Learn what these updates mean for you, as well as 6 tips on how to adapt your emails to the new changes.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
872
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
42
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

[Webinar Slides] Gmail’s Responsive Email Updates

  1. 1. Gmail's Responsive Email Updates What This Means For Your Email @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa
  2. 2. Welcome Mark Robbins Rebelmail Justin Khoo Email on Acid Eric Lepetit Nest @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa Join the conversation. #GmailUpdates
  3. 3. Gmail before the updates @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa • Gmail was the main reason why we inlined styles • Didn’t support media queries • iOS Gmail app increased your font size • Non responsive Gmail App replaced responsive native Android App in 2015 • Inconsistencies between Gmail, Inbox, Android app, iOS app, G Suite, Images off, and Gmail App with Non-Google Accounts (GANGA)
  4. 4. Gmail before the updates @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa Source: Remi Parmentier
  5. 5. The New Gmail @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa • Supports responsive email • Supports embedded styles • Gives responsibility for mobile experience back to designer • More receptive to input from email community • Documentation is available
  6. 6. What is now supported in Gmail @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa • Embedded styles with classes and IDs (only in <head>) • Media queries (max-width, min-width, max-device-width, min-device-width) • Background-position & background-size • :hover pseudoclass in Gmail webmail • https://developers.google.com/gmail/design/reference/supported_css
  7. 7. Embedded CSS vs. Inline CSS @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa
  8. 8. Media Queries @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa A block of CSS that is only active at certain client dimensions • Display or hide elements in mobile • Change layout - stack columns • Increase font sizes • Adjust padding and margins @media only screen and (max-width:600px) { .body { font-size:24px !important } .topmenu { display: none !important } .download-app { display: block !important } } @media only screen and (max-width:600px) { .body { font-size:24px !important } .topmenu { display: none !important } .download-app { display: block !important } }
  9. 9. Media Queries @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa Example image
  10. 10. What is not supported in Gmail? @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa Attribute selectors • Example: div[class=”foo”], *[id^=”foo-”] Common Webmail limitations • Web fonts • Animation, Transitions, Transforms • Absolute/Fixed position • Video • External stylesheets Pseudo-classes • :checked • :hover (on mobile apps and Inbox) • Used for interactive email
  11. 11. Which Gmail clients have the update? @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa ✓ Desktop webmail ✓ Mobile webmail ✓ G Suite Basic (Google Apps For Work) ✓ Android app (Gmail account) ✓ Android app (Gmailified account) ✓ Inbox (Desktop webmail) ✓ Inbox (iOS app) ✓ Inbox (Android app) ✘ Google Apps Free Edition ✘ Gmail App with Non-Google Accounts (POP/IMAP account) ✘ iOS app
  12. 12. Tips and Action Items Get Your Emails Up to Speed @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa
  13. 13. Tip 1: Clean up attribute selectors @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa Don’t mix classes and attribute selectors .body { background-color: #000000; } div[class=”body”] { color: #ffffff; } Attribute selectors are no longer required inside media queries (Yahoo! Mail fixed theirbug) @media (max-width:600px){ div[class=”full-col”] { width: 100%!important } } You can use attribute selectors strategically, to hide content from Gmail.
  14. 14. Tip 2: Height → min-height in Inbox @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa <img src="triangle.png" width="600" height="200" style="display:block;width:100%;height:auto;"> Becomes <img src="triangle.png" width="600" height="200" style="display:block;width:100%;min-height:auto;">
  15. 15. Tip 3: Image blocking causes style issues @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa <style> .test{ background-image:url(.../image1.jpg); } </style> <div class="test" style="background-image:url(.../image2.jpg);"> Test </div> <img src=".../image3.jpg"> Raw Code
  16. 16. Tip 3: Image blocking causes style issues @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa <style> div.m1577ab38264895f1 .m_-5859679698733932272test{ background-image:url(); } </style> <div class="m_-5859679698733932272test" style="background- image:url();"> Test </div> <img src=" "> With Images Blocked
  17. 17. Tip 3: Image blocking causes style issues @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa <style> div.m1577ab38264895f1 .m_-5859679698733932272test{ background-image:url(); } </style> <div class="m_-1608274971889655912test" style="background- image:url(.../image2.jpg);"> Test </div> <img src=“.../image3.jpg"> With Images Downloaded
  18. 18. Tip 4: Embedded CSS Size Limit @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa Currently, CSS character count is capped at 8,192 characters. All CSS in <style> block is removed once the cap is reached. Tips Use multiple <style> blocks: Gmail will only strip out the one in which the cap is reached. Place CSS not for Gmail (e.g. animations) in separate <style> block at the bottom of the <head> section.
  19. 19. Tip 5: Don’t remove Gmail layout hacks yet @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa Gmail Android spacer hack <img src="spacer.gif" height="1" width="600" style="display:block; width:600px; min-width:600px;"/> Gmail iOS font size hack <div class=”gmailfix” style="white-space:nowrap; font:15px courier; color:#ffffff;"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </div>
  20. 20. Tip 5: Don’t remove Gmail layout hacks yet @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa Gmail iOS “Font Boost”
  21. 21. Tip 6: Targeting Gmail and Inbox in your CSS @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa <!DOCTYPE html> <html><head> <style> u + .body .gmail-or-inbox{ display:block !important; } </style> </head> <body class="body"> <div class="gmail-or-inbox" style="display:none;"> THIS IS GMAIL OR INBOX</div> </html> Targeting Gmail and Inbox
  22. 22. Tip 6: Targeting Gmail and Inbox in your CSS @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa <!DOCTYPE html> <html><head> <style> u + .body section .gmail { display:block !important; } u + .body > .inbox { display:block !important; } </style> </head> Targeting Gmail or Inbox <body class="body"> <section> <div class="gmail“ style="display:none;"> THIS IS GMAIL</div> <div class="inbox" style="display:none;"> THIS IS INBOX</div> </section> </body> </html>
  23. 23. Discussion How might these changes affect email development? @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa
  24. 24. Do we still need to inline CSS?
  25. 25. Is hybrid fluid dead?
  26. 26. How will this impact interactive email?
  27. 27. Q&A Ask the experts. @M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa Still got email questions? Tweet them to us @emailonacid!

×