Atomic Smash homepage splash
We are currently experiencing technical issues with our landline, please contact Piers on 07790835504 or David on 07525031748

Getting the best out of custom templates in MailChimp

Words by George HieronMarch 9, 2018

Custom Template in Mailchimp featured image

In this post I will share some tips I have learned about adding your own custom-made HTML email template into MailChimp, and how to ensure it responds as you expect to your audience, across as many devices and apps as possible.

MailChimp is undoubtedly an excellent tool for sending emails out to your contacts, that has plenty of features and flexibility and is working well for many, many people and businesses. Perhaps one of the best features about MailChimp is the ability to create your own email templates. Simply go to Templates in the main menu, then click ‘Create Template’ in the top-right of the page. You can choose from its default selection of either wireframe-style layouts, or fleshed-out themes.

MailChimp also offers a third option, ‘Code your own’, allowing you to paste in HTML code or import an HTML file to add and save a completely custom template. This seems like a great option for those who know their code, or who wish to use an alternative framework to build their emails, such as Foundation for Emails by Zurb. Unfortunately, it’s not quite that simple.

If you’ve gone down the route of using an email framework to put together a custom email for yourself or a client, you have probably already tested it by running it through a service such as Email on Acid or Litmus, which will create you a selection of images showing you how your new HTML email renders on a wealth of devices, apps and operating systems. This kind of testing is invaluable for HTML email developers. However, when I was building an HTML email for one of Atomic Smash’s clients recently, I discovered that this is where MailChimp sticks its oar in.

Prepare for launch - sending an email through MailChimp

Prepare for launch - be sure to send a test of your HTML email through MailChimp to check the real-world results!

The catch with MailChimp

After sending my new, responsive and fully Acid-tested email out through a MailChimp test, I was surprised to discover that when it was opened in the Gmail mobile app, the result received looked like the desktop version of the email, not the responsive version – for both the Android and iOS versions of the app! Completely not the result I received in the image render after running the template through both Email on Acid and Litmus.

It took quite some time to figure out what was going on – but it seems that when an email is sent with MailChimp, some components get added to the email that the Gmail app isn’t happy about. Several attempts to amend my template to compensate for this led to no success.

The solution

In the end, the solution I resorted to was to take one of MailChimp’s default templates – these can be downloaded for external editing here: https://github.com/mailchimp/email-blueprints – and to rebuild my custom template from one of those starting points.

Once I had done that, the email was finally working as expected in the Gmail apps on both iOS and Android. The only downside is that running this new, MailChimp-based HTML through an Email on Acid / Litmus test, showed the opposite – a non-responsive render in the Gmail app.

All this serves as a testament to the fiddly nature of working with custom HTML emails, and shows that even though services like Email on Acid and Litmus are extremely useful resources, there is sometimes no substitute for a real test of your email! Email frameworks still have their place and are a very convenient starting point for getting a great email ready and saving lots of time. However, if you are using MailChimp, I would recommend starting with one of their templates if you want to be certain of retaining any responsive mobile design elements in the Gmail app.

Go back to top

Keep up to date with Atomic news