Navigating the Gmail Rendering Ecosystem

Jack Patrick - Senior Email Developer

Getting an email to render correctly across the board is hard enough, and Outlook takes a lot of the flak, but you may be surprised to learn that Gmail has a fair few quirks and intricacies of its own.

With a webmail environment and apps for Android and iOS, there’s a little more variation in the different versions of Gmail than you might expect. But how can you figure out what features are available on which version, and which version you’re even running?

(credit Rémi Parmentier)

SRC: https://medium.com/emails-hteumeuleu/trying-to-make-sense-of-gmail-css-support-2019-edition-b7cc132ee226

This diagram is super helpful in helping to understand what level of styling support will be enjoyed in your, or your recipient’s, version of Gmail.

So what does this mean for how we build emails?

Well, as you might expect, we’ll have to start with the lowest level of support and work up from there, with the mentality of progressive enhancement.

Level 1:

At level one, we can only style the email with inline styles. Recipients will end up in this bracket if they use Gmail with a non-gmail email address via POP/IMAP. The alternative way to do this is called Gmailify, and if they’ve connected that way then they won’t fall into this pocket.  To create an email that displays well on desktop and mobile, we’ll build a fluid layout using percentages instead of fixed widths, so that it reacts to the viewport width. Though it can be tempting to use background images to create layered designs, we’ll restrict ourselves to using them only for decoration because they won’t be rendered in level 1 devices.

Level 2:

Level two adds support for the CSS calc property and background images.

There’s not much to say about this one, we’ll largely treat it the same as Level One.

Level 3:

Level three is the best level of rendering Gmail is going to give you, so we don’t need to worry too much now. Here you can use media queries to change rendering significantly between desktop and mobile versions.

Gmail’s Quirks

There are a couple of quirks (aside from the above) to be aware of if you’re seeing issues in Gmail.

ONE MISTAKE AND YOU’RE OUT

Gmail throws out style tags if it finds something wrong in your CSS. One error and the whole tag is gone! These could be hard to find, because other email clients can be more forgiving.

To fix these issues you’ll need to comb through your header styles and format, spellcheck, and make sure everything is done by the book. Attribute selectors can be something to look out for.

If you’re struggling, try splitting one long style block into multiple smaller blocks. That way, if a style is thrown out, you’ll still have some left.

Direct Styling

Gmail can be styled directly in a way that won’t affect other clients by using a selector like this:

u + body .yourclassname { }

This works because Gmail inserts a u tag at the top of the body. You can use this style to target any stubborn issues appearing in Gmail.

Content Stripping

Gmail has a behaviour whereby it will clip the end of long messages. To avoid this, keep your email size below 102KB. (This doesn’t include images, as they are hosted externally) Every character increases the filesize of your email, so you can save a bit of space by using short class names, minimising unneeded inline styles, etc.

Gmail sometimes ignores inline styles. I noticed this behaviour when using percentage widths. Using the !important attribute seems to force the style to appear.

style=”width:100% !important;”

Though Gmail has its quirks and shortcomings, it does still offer support for a good selection of progressive CSS stylings and with the information presented here you should be in a good position to figure out what’s causing any weirdness in your emails.