Gmail and the size of your stylesheet in Adobe Marketo Engage emails
Updated: 3 days ago
Send a template with switchable sections to Gmail on the web, and if its stylesheet is over Gmail's budget, every section you switched off shows up at once.
Spotting a dropped stylesheet
Gmail's budget covers the whole message. Gmail drops the style block that crosses it, and every block after it. When that happens, Gmail on the web renders the message with no stylesheet and no class attributes, while inline styles still apply. Click More beside Reply and choose Show original, [1] and you'll find every style block in the source. The email arrived intact, and Gmail didn't use it.
To see where a template stands, copy the text of every <style> element that isn't inside an Outlook conditional comment into one file and count the characters. That's the number Gmail's budget applies to. A block inside a conditional comment is a comment to Gmail and doesn't count. I'd keep the CSS to about 16 KB in total. Send a sample whose first style block is about that size and open it in the Gmail app on iOS: the block holds, and its media queries and class gates work.
Where I'd look first
I'd cut the rules that point at elements the email no longer has first. They're the cheapest thing to lose.
Then split the style block. Put everything Gmail can act on in the first block, meaning the layout, the phone media queries and anything a column depends on, and move the rules it ignores, such as dark mode rules, into a second block. Reordering rules inside one block does nothing, because the block goes as a whole. Split it in two, delete nothing, and the first block stays with its media queries. This only helps when the block holds rules Gmail ignores. If you minify either block, keep a line break after every closing brace, or new Outlook for Windows won't apply it.
Don't reach for the template editor's Inline CSS action to get under the budget. Run it on a copy of a template with class based switches and read the result: the hide rules are gone from the stylesheet, every element keeps whatever state it was in when you clicked, and the toggles do nothing.
Keep show and hide out of the stylesheet
This one's my preference, and I'd push for it on any template with switchable sections. A switch written as a class rule in a style block goes with the block when Gmail drops it. Send a sample whose stylesheet is over the budget, with one section switched off by a class rule, and open it in Gmail on the web: every gated section shows, the switched off one included. Under the budget the same kind of gate works, and in the Gmail app on iOS it shows exactly one variant. But a template only grows, and every module you add pushes it toward the budget.
That's why I'd build the switches inline, with a Boolean variable. Declare it in the head with a <meta> tag of class mktoBoolean, give it a false_value and a true_value, and reference it as ${id}. Adobe Marketo Engage inserts the false value when the toggle is off and the true value when it's on. [2] Put the variable in the element's own style attribute, with display:none; mso-hide:all; as the false value and an empty true value. The mso-hide:all is what hides it in Microsoft Outlook 2007 to 2021 on Windows. Gmail supports the display property. [3]
<meta class="mktoBoolean" id="showOffer" mktoName="Show offer" default="true" false_value="display:none; mso-hide:all;" true_value="">
<div style="${showOffer}">Offer content</div>Put the switch on a <div> or a <table>, never on a <td>, because Microsoft Outlook 2007 to 2021 on Windows won't remove a cell. Put it on every <table> inside the section too, since a hidden parent doesn't hide a table below it. And don't give anything inside the section an inline display of its own, or that element shows through.
Leave !important out of the inline value. With it, Microsoft Outlook 2016 and 2019 on Windows keep almost all the space the switched off sections would take. Without it, changing nothing else, Outlook gives most of that space back.
A phone rule can undo the switch. If a media query rule sets display on the same element with !important, it beats your inline display:none, and the switched off section comes back at phone width. [4][5] Take display out of those rules only when every element they reach already sets its own display inline, and check rules written on a parent element, such as .wrapper a, as well as the class rule.
Testing it in Gmail
Make the Boolean changes in a copy of the template, and build your test email from that copy.
In the test email, set every Boolean that hides content to off.
Select the email, open Email Actions, choose Send Sample, enter a Gmail address and click Send. [6]
Open it in Gmail on the web. None of the switched off sections shows. Press Ctrl+F in the browser and search for their text too. A section with no height can still show its text.
Open it in the Gmail app on your phone. Don't skip this one, since the phone rules are where an !important sneaks back in.
Click More beside Reply and choose Show original. [1] Find each switched off section and confirm its style attribute carries display:none; mso-hide:all;.
Run it for every combination of switches you'll actually send.
References
1. Trace an email with its full header | Gmail Help | support.google.com. https://support.google.com/mail/answer/29436
2. Email Template Syntax | Adobe Marketo Engage, Boolean | experienceleague.adobe.com. https://experienceleague.adobe.com/en/docs/marketo/using/product-docs/email-marketing/general/email-editor-2/email-template-syntax
3. CSS support | Gmail | developers.google.com. https://developers.google.com/workspace/gmail/design/css
4. CSS Style Attributes | W3C, Cascading and Interpretation | w3.org. https://www.w3.org/TR/css-style-attr/
5. CSS Cascading and Inheritance Level 4 | W3C, Cascade Sorting Order | w3.org. https://www.w3.org/TR/css-cascade-4/#cascade-sort
6. Send a Sample Email | Adobe Marketo Engage | experienceleague.adobe.com. https://experienceleague.adobe.com/en/docs/marketo/using/product-docs/email-marketing/general/creating-an-email/send-a-sample-email
This post is not affiliated with, authorized, endorsed or sponsored by Adobe, publisher of Adobe Marketo Engage. Adobe, Marketo and Marketo Engage are either registered trademarks or trademarks of Adobe in the United States and/or other countries. Google and Gmail are trademarks of Google LLC, and this post is not endorsed by or affiliated with Google in any way. Microsoft and Outlook are trademarks of the Microsoft group of companies.
Comments