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. Gmail before the updates
@M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa
Source: Remi Parmentier
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. 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
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 }
}
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. 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. Tips and Action Items
Get Your Emails Up to Speed
@M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa
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.
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.
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. 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. Discussion
How might these changes affect
email development?
@M_J_Robbins | @advenix | @ericlepetitsf | @geoff_eoa
