Everything You Need to Know About Gmail Rendering: Webinar Recording

In notebook:
Article Notes
Created at:
2017-07-09
Updated:
2018-01-29
Tags:
email

#Everything You Need to Know About Gmail Rendering: Webinar Recording

Original article: Everything You Need to Know About Gmail Rendering: Webinar Recording

##What's still not supported?

  • external stylesheets
  • absolute/fixed positioning
  • negative margins
  • CSS animations
  • Web fonts
  • HTML5 video

###On which platforms the new update has not been rolled out yet?

  • Mobile webmail
  • Gmail Android App (POP/IMAP account)
  • Google Apps Free Edition (legacy)

Gmail Android App (POP/IMAP account) does not support background images at all

CSS is supported on all versions of Android

because the default email app became the gmail app on Android

###Gmail strips invalid CSS (or that it deems invalid)

  • use of attribute selectors td[class="foo"] { } will be stripped need to just use .foo { }
  • nested @ CSS declarations @media { @font-face { ... } }
  • any of these characters :

=, *, /, $, %, \, &, @, ^, {, }, [, ], (, ), ?, |, <, >

Best to validate the CSS using W3C.

  • need to keep the CSS under 8142 characters

###Gmail iOS app adds unwanted spacing to the right hand side of the email

To force GMAIL iOS to full-width

.body { min-width : 100vw; } and <body class="body">..</body>

###Force a desktop view on Gmail Android POP/IMAP

  .gmailfix {
  display: none;
  display: none !important;
}

  <div class="gmailfix" style="white-space: nowrap: font: 15px courier; line-height: 0;">$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;</div>

Gmail clips your email at 102KB

###Gmail displays a _download widget icon ony any unlinked image (above 250x250px)

Need to wrap images in a link to remedy this.

###Targeting Gmail + Inbox by Gmail

  u ~ div .gmail {
  ..
}

  <div class="gmail">..</div>

###Targeting Gmail

  u + .body section .gmail {
  ..
}

  <body class="body">
  <section>
    <div class="gmail">
      ..
    </div>
  </section>
</body>

###Targeting INBOX by Gmail

  u + .body > .inbox {
  ..
}

  <body class="body">
  <section>
    <div class="inbox">
      ..
    </div>
  </section>
</body>

###Market share

Litmus did not inline its CSS for its 2017 newsletter.

99% of market share now supports embedded CSS!

It of course depends on your specific audience.

###Useful links:

  • Service to inspect the source code of emails : litmus.com/scope
  • https://emails.hteumeuleu.com/troubleshooting-gmails-responsive-design-support-ad124178bf81
  • https://litmus.com/blog/3-keys-to-understanding-email-rendering-on-android
  • https://litmus.com/blog/the-ultimate-guide-to-email-on-android

##About spam

A: The notion that spam is heavily relied on for content is a bit of a myth, and that hack would not trigger spam filters at all. Spam is built more off your reputation, sending activity, and engagement, such as whether people are marking you as spam.