Posted Oct 10, 2016
As many of you will know, Gmail recently started supporting responsive email by allowing full-on <style> tags with media queries, ids, classes, and so on (cue parting clouds with heavenly music).
Taken together with the relatively recent news that the Microsoft Outlook team is starting to take their rendering issues seriously, it's starting to look like the task of designing & coding HTML emails could become a lot less difficult soon.
But let's not get ahead of ourselves here. Gmail may support these things, but as we'll see in a moment, there are still a number of limitations imposed by Gmail that mean you can't just tear off your clothes and run wild with your designs just yet (I mean that metaphorically, of course, but whatever works for you).
Auto-prefixing
So it turns out that, while Gmail does allow you have <style> in your document <head>, it's not a all-you-can-style buffet. There are a number of gotchas that, when combined together, mean we have to be mindful about how we're setting up our styles.
First of all, any classes and ids you use will be auto-prefixed with a randomly-generated unique string. For example:
.myClass { /* some styles */}…would become something like:
.m_-3821031579768648382myClass { /* some styles */}Woah! That's a lot of extra characters. But so what, right? It's not like anyone's going to be looking at it. Well, it turns out that this is important, thanks to another curveball that Gmail throws us.
Character Limits
Presumably the folks over at Google were concerned that we would be so overcome with enthusiasm at our newfound styling freedom that we wouldn't be able to control ourselves and go on a total CSS bender. I say this because they've imposed a 8,192-character limit on how much <style> you can have. Go over your limit and Gmail will bounce your style out in the street.
Now you may be thinking, "8,192 characters? Holy crap, James! If you need more than that, I think you may need professional help…"
Ordinarily I would agree with you, but the problem is that Gmail is watering down the drinks on us—all those extra characters we just talked about? Yeah, you know what's coming.
They count against the limit.
Now of course this isn't an insurmountable problem. If you pace yourself (yes, I know I'm at risk of over-extending the drinking metaphor here) by using element selectors as much as possible, and minimize your use of classes and ids, you can reduce the number of extra characters being added by Gmail.
Now I know things are already seeming a bit complicated here, but brace yourself—we're just getting started. There are actually a whole slew of other gotchas that you can read about on Campaign Monitor's blog. For our purposes today, though, I'm just going to touch on one more.
Maximum occupancy
If you're a clever devil, you might be thinking, "Hey, maybe I can trick Gmail into letting me style myself under the table by tag-hopping!"
OK, yeah now I've totally gone too far with the whole drinking analogy (maybe I have a problem with analogies?).
Anyway, what I meant by that last statement is trying to get around the character limit by breaking your CSS into multiple <style> blocks. Unfortunately this doesn't quite work (Gmail concatenates them all together), but it does offer us a small loophole that we can exploit if we're smart.
It turns out that if we split our CSS into multiple <style> blocks, Gmail won't throw out all of our styles for breaking the character limit—only the <style> block that pushed us over the limit (and any after that). The preceding styles are safe.
Putting it all together
With this in mind, we can use inlining to get around the limit. Just use the following steps:
Put all media queries in a separate
<style>block, before your default styles.Make sure this block is slim enough to come in under 8,192 characters after Gmail's prefixes are added (this is where avoiding classes and ids can help).
Inline your default styles.
Savor that responsive goodness in your Gmail inbox.
Have you run into any other gotchas with responsive layouts in Gmail? Got any good solutions? Let me know!
