Posted Oct 16, 2016
Hi kids! In last week's episode, you learned about some of the limitations of Gmail's new support for responsive email designs, along with some tips for getting around those limitations.
This time we're going to take those tips and apply them to another scenario that has a few gotchas—MailChimp custom templates.
MailChimp templates?
In case you didn't know, MailChimp has the option of custom-coding your own templates for use with their WYSIWYG editor. This means you can develop your own custom layouts that can be easily used by content editors or marketers without you (the developer) having to code every single email by hand. You can learn more about MailChimp templates here.
Now that's the good news. The not-so-good news is that there are two gotchas when MailChimp parses your template code.
Concatenate all the things
As you'll recall from Part 1, we want to keep our media queries in a separate set of <style> tags so that Gmail doesn't drop them if/when we break the character limit. Unfortunately, we run into a problem here because when you save your MailChimp template, any <style> tags in your <head> will be automatically concatenated.
No doubt MailChimp's developers meant to do us all a service with this one, but ironically it actually backfires in this instance by making it much more difficult to come in under Gmail's character limit.
This issue has a simple (if somewhat tedious) workaround: pre-inline your default styles, and only include your media queries in the <style> tags. You can use MailChimp's inliner tool to get this done as a last step in your workflow.
Everybody gets a media query!
I won't reuse the Oprah meme despite the fact that it's actually quite apt in this case. For some reason that I'm not quite clear on, MailChimp's parser doesn't like to let you have multiple CSS rules in one media query.
If, for example, you put this in your template:
@media screen and (max-width:600px) {
body { /* some styles */ }
table { /* some styles */ }
}…after saving, you'll find your code has been replaced with this:
@media screen and (max-width:600px) {
body { /* some styles */ }
}
@media screen and (max-width:600px) {
table { /* some styles */ }
}…yeah. I don't get it either.
MailChimp's response
I opened a support ticket with MailChimp to see if I could get this fixed. After a bit of back and forth, they confirmed they could reproduce the behavior... and suggested I submit a feature request.
Apparently this behavior somehow results from their automatic inliner being run on the code when saving (their template editor doesn't allow you to turn the inliner off). I'm not sure why their inliner feels the need to split up media queries like this, but that's what they said.
They offered a possible workaround by initially creating the email with their regular campaign editor (which does allow you to disable the inliner), and then save it as a template, but I haven't actually given it a go since this seems like a pretty tedious process to go through.
In any case, I've submitted a feature request, as they, uh, requested (there must be a "it's not a bug, it's a feature" joke in here, but I can't seem to pull it out). I'll update this post if I hear anything substantive back from them.
In the meantime, the only approach to solving this (other than the one they suggested) appears to be minimizing the number of style declarations in your media queries. If you can think of another way to address this issue, be sure to let me know!
