7 Quirks You Should Know About Mailchimp As An Email Developer

As most of my clients use Mailchimp I thought I’d write about the pros, cons and limitations of one of the most popular email service providers (ESP's).

I started out using Mailchimp for a client around 3 years ago and I loved the simplicity of it back then. It's really moved on since then and is a great place to start for many new businesses as it's affordable (free in the beginning) and very easy to use.

The strongest selling point for potential users is, in fact, it's ease of use and UI. That said, from a developer point of view it's a potential minefield and you'll soon be pulling your hair out after a few hours of trying to understand what Mailchimp does to your code.


1. Media Queries within Media Queries

As we all know, or at least developers will know, media queries are the life and blood of our responsive emails. Take those away and we're right back to hybrid and fluid layouts. Now I know what you're thinking... "Mailchimp must support media queries?" and while they do, there are some things you should note when using them in a custom template.
Mailchimp likes to wrap each media query in its very own media query so something like this...

Code

Turns into this once sent...

Code

Why is this an issue you ask? Well, it's not, for the most part. But you should be aware of chaining selectors amongst other things can have varied results even in iOS. Sometimes it causes Gmail to break and show the desktop version scaled down due to the @media within an @media problem.

What's the easiest way around this? I code my media queries separately to prevent Mailchimp changing them. This alleviates the issue entirely.

Code

2. Merging Style Tags

Now sometimes we like to separate our style tags in order to fix, yet again, Gmail encountering an error and ignoring the whole block. For example the attribute selector for the android margin issue. Gmail doesn't like attribute selectors, so what does it do? It ignores the whole block. So we savvy email developers realised by putting it inside its own style tag we can trick Gmail into just ignoring that redundant rule. Great right?

Well no, because Mailchimp merges all the style blocks into a single style sheet. The android margin bug is just an example but you can run into this a lot when looking at your renders in Gmail from Mailchimp. I always start with the style block if it's not appearing responsive.

The fix? If you can, add a style sheet in the body as long as the client your targeting allows for that. This works for the android bug but again, just be aware of this when coding custom template.


3. The Inliner can add a lot of weight

This is turned on by default and ideally, if you've custom coded your template, you want to switch that off. You can find out how here.

Why is this an issue? It's not unless you're closing in on the 102kb for Gmail, at which point your message will be clipped and important info such as the unsubscribe info could be hidden. If you have global styles in the head, for example, this fix for <‌th>'s in SFR.

Code

It will inline this into every single <‌th>. Likewise, a table with border: none; will inline creating much heavier code. Now we should all be using inline styles as you know but now and again we do have reset styles (overwrite the client's style sheet defaults) that will ultimately be inlined and can often add 15-30kb depending on how many tables you've used.

So if you're emails are nice and light anyway, this probably doesn't apply to you. But if you're emails are heavy in the code it's good to take note.


4. Progressive Enhancement is not as easy

We all love interactive email, it was the hype of 2017! But be aware, never promise a client that uses Mailchimp fancy interactive email campaigns. It just isn't possible.

Here is a list of tags they remove, and no, for now, there's nothing we can do about it.

• HTML 5 attributes including video and audio as well as some accessibility tags like role="presentation". Although as pointed out by @cosssmin on the email geeks slack channel, they do have video and audio merge tags, however, they come with default styling and we, as creatives, don't get much control over how they appear other than styling the parent.

<‌marquee> tags, I recently discovered this one as a client asked for them and they are stripped away leaving the text centred and taking the styling from the containing .

• No <‌input> or <‌form> tags. Quite simply rendering all our interactivity useless.

If you guys know any more stripped out tags, just leave a comment and I'll update this section and credit :)


5. Thou shall read the documentation

Let me paint you a short story. A client came to me a few months back and asked me to look why a template they had paid a developer to create wasn't working as expected. I looked inside and saw a horror show of code that could have easily been avoided had the original developer read the documentation. Granted, there's not a lot of it, but that's because it's relatively straightforward to use.

Click here for the documentation I'm referring to. One of the main issues with the template I was given to look at was the use of mc:repeatable within mc:repeatable and it clearly states not to nest them. Along with other do's and dont's, I think it's one of the most important documents for a Mailchimp developer to know off by heart before pitching to potential clients.

Test your code, it's free to set up an account. Test it and make sure it works as you think it will.


6. Retina images in templates tend to blow up

This is something I've searched for a solution for, for hours, even raising with Mailchimp and it appears no one has a solution. Let's say, for example, I have an email with an image 600px wide (full width relative to the outer table). If I save that image out at 1200px wide (retina 2x), add mc:edit="my-image" onto the <‌img> tag, then the 1200px image will blow out of the table taking it's native width, thus breaking the template.

The solution is pretty awful as well if you can even call it a solution. Don't save for retina. Stick with native sizes to prevent your template exploding in the WYSIWYG editor. This issue is purely isolated to the custom coded templates that use mc:edit on an image.

There is another solution and that's to move the mc:edit attribute to the parent container, be that a <‌div> or a <‌td>, although it works, it's a little harder to switch the image out in comparison which you're client may not be comfortable doing.


7. Difference between RSS and FEEDBLOCK tags

Now, something Mailchimp does great is allowing us to create RSS templates from blog posts for example, very easily. You can read more about the merge tags here but for now, we'll just talk about the difference between the two types.

From a top level point of view, the RSS feed tags do exactly the same thing. Feedblock merge tags were developed by Mailchimp to give you more control.

"We developed the |FEEDBLOCK| merge tag to give you explicit, fine-grained control over which elements of your feed you want to include in your campaign."

So instead of the RSS feed pulling everything in you could have your title below your description for example, although this is just an example, the use of FEEDBLOCK makes life a lot easier to control how the RSS information appears and where.




All in all, Mailchimp is easy for an email developer to create custom templates for but it's essential you test and read the documentation first before handing over the work. Make sure it actually works, try and create an email campaign from your template, change the links, the images, the text etc.

I feel it's starting to become the Outlook of ESP's in a way by trying to make its platform as user-friendly as possible at the expense of email developers and UX within an email. That said, it's a great place to start templating before moving onto other templating engines and languages.