[Webinar Slides] Gmail’s Responsive Email Updates

Gmail's Responsive
Email Updates
What This Means For Your Email
@M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa

Welcome
Mark Robbins
Rebelmail
Justin Khoo
Email on Acid
Eric Lepetit
Nest
Join the
conversation.
#GmailUpdates

Gmail before the updates
• 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)

Gmail before the updates
Source: Remi Parmentier

The New Gmail
• Supports responsive email
• Supports embedded styles
• Gives responsibility for mobile experience back to designer
• More receptive to input from email community
• Documentation is available

What is now supported in Gmail
• 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

Embedded CSS vs. Inline CSS

Media Queries
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 }
}

Media Queries
Example image

What is not supported in Gmail?
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

Which Gmail clients have the update?
✓ 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

Tips and Action Items
Get Your Emails Up to Speed

Tip 1: Clean up attribute selectors
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.

Tip 2: Height → min-height in Inbox
<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;">

Tip 3: Image blocking causes style issues
<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

Tip 4: Embedded CSS Size Limit
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.

Tip 5: Don’t remove Gmail layout hacks yet
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>

Tip 5: Don’t remove Gmail layout hacks yet
Gmail iOS “Font Boost”

Tip 6: Targeting Gmail and Inbox in your CSS
<!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

Tip 6: Targeting Gmail and Inbox in your CSS
<!DOCTYPE html>
<html><head>
<style>
u + .body section .gmail {
}
u + .body > .inbox {
}
</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>

Discussion
How might these changes affect
email development?

Do we still need to inline CSS?

How will this impact
interactive email?

Q&A
Ask the experts.
Still got email questions? Tweet them to us @emailonacid!

[Webinar Slides] Gmail’s Responsive Email Updates

More Related Content

Viewers also liked

Similar to [Webinar Slides] Gmail’s Responsive Email Updates

Recently uploaded

[Webinar Slides] Gmail’s Responsive Email Updates