Limitations of HTML Email Templates in MailChimp

Email DesignNataly Birch • January 02, 2024 • 6 minutes READ

In the last two years, we have seen considerable improvements in CSS. Flexbox and Grid have finally hit their stride in overcoming the majority of obstacles in browser compatibility. We have eventually begun to enjoy all their possibilities creating various layouts without much hassle. However, while in some areas of web design sphere such as website creation things are getting better and better each day, in other areas that is the creation of email newsletters things are stagnating. It feels like email newsletters are still living in the Middle Ages – that is to say, in the 90s.

Indeed, creating a simple HTML email newsletter may be challenging, especially for newbies. The main stumbling block is a lack of compatibility in email clients. Not only are mail user agents still limited, but they also differ in support of various HTML subsets and CSS properties. This difference is drastic: while some programs are able to support positioning from A to Z, others experience problems with handling the basic features like for example max-width or border-radius. To make matters worse, the total number of email clients is quite significant. There is a whole bulk of them in the wild. To satisfy all their requirements as well as take into account all the peculiarities, is nearly impossible. However, there is hope.

The good news is that your marketing automation platform will help you to deal with this matter. It will offer you some valuable options and time-proven templates for building your next email newsletter. But, there is one crucial thing to consider. Each platform has its vision of solving this issue. It means that each one sticks to its own set of rules. These rules are mostly limitations that guide the users through their path of building a valid email newsletter. So before jumping into creating your next email newsletter you need to familiarize yourself with them.

Limitations of HTML Emails in MailChimp

Since every marketing automation platform has its limitations, we are going to focus today on one of the leading providers out there – MailChimp. It serves millions of users and deals with billions of email newsletters monthly. It has an almost twenty year history. So there is a big chance that you are one of its clients, or you might consider it as a future platform for automating your marketing routine and campaigns. So there are several helpful things to know before being to transfer your idea onto a digital medium.

First things first. Let’s find out what elements you are forbidden to use in your email newsletter. So don’t, under any circumstances, use in your email newsletter such things as:

• JavaScript.  Even though this programming language is widely used for creating interactive elements in websites and is well enshrined in the web sphere, almost all email clients tend to block it. As a script it might pose a threat to the public.
• iFrames. For a reason mentioned above, iFrames are also widely unsupported. Containing JavaScript code inside, they may bring malicious content to the audience.. So no iframes whatsoever.
• Divs. As we have mentioned at the beginning of the article, many programs that manage users’ emails live in the Middle Ages. Therefore, some things that we find trivial these days still may be hard for them to render correctly. So, even though it may sound blatant, try to avoid divs for laying out the content.
• Flash. As a technology for building interactive interfaces, it is believed to have been dead for almost a decade. Developers stay away from it in the websites, and email newsletters are no exceptions. Email clients block it, so let Flash rest in peace, no matter what.
• Forms. This is a tricky one. While the standard form’s components such as inputs or checkboxes are displayed by most of the email clients without a hitch, the work of the “submit” button may cause problems. The submit button requires JavaScript to work properly, but JavaScript is forbidden. So again, try to stay away from traditional forms and opt in favour of alternative solutions.
• Embedded Video and Audio. Like it or not, if your subscribers do not use Apple Mail to open their emails, then all the embedded media, whether it is video or simple audio, won’t work. The reason is simple: as a rule, email clients do not support HTML5 <video> and <audio> tags.
• Embedded CSS. Generally, email clients do not support external stylesheets much like styles in the <head> section, so unfortunately embedded CSS styles are a no-no. Even though MailChimp email templates allows you to add them, still it is logical to avoid them in your email newsletter.

That’s not all: while we have listed things that you should never use in your email newsletter, some other things should be used with caution. Once again due to lack of support, they can ruin the entire experience, and no one wants that. Things to pay particular attention before using them inside your email newsletter are:

Custom web fonts

Much like in case of website design, here you also need to exercise caution since custom fonts are not widely supported either by browsers or email clients. The rule of thumb is to add an alternative font that can be found in every computer.

Also, the good thing is that many popular clients such as Apple Mail and Android Mail 4.2 support web fonts. The MailChimp alternative gives you an opportunity to add various custom fonts, yet it offers some time-proven options for replacing the custom web font in case it does not display correctly.

Background images

There are no strict restrictions on using background images in MailChimp. You can easily add a background image to email to every section and subsection. Nevertheless, much like with custom web fonts, some email clients block images while others simply do not support them. What’s more, depending on the mobile email clients backgrounds can render differently. So, test the email to sort out all the possible issues.

Animated Gifs

It is the same old story. While some email clients perfectly support animated gifs making it a perfect alternative to amusing flash-based or JavaScript-based details, others deny its existence. MailChimp allows you to add animated gifs directly to email, even though it is highly recommended to insert it into the email newsletter straight from Giphy. This routine requires you to edit gifs via an editor.

Image map

There is a specific procedure to add image maps into MailChimp newsletters. First of all, you need to create it outside the platform. After that, you have to follow several vital steps to ensure that your image map won’t break the final layout and design.

So these are the limitations of HTML email newsletters in Mailchimp. To make your life easier, we have compiled a small list of rules. Stick to them in order to create the email newsletter that will work in the majority of email clients.

• Use HTML table-based layouts and nested tables instead of div-based layouts, flexbox, and grids.
• Use inline CSS styles instead of external stylesheets and styles in the head section.
• Use standard fonts instead of custom web fonts.
• Insert gifs directly from the Giphy instead of using flash or JavaScript.
• Use simple polls or MailChimp survey integration instead of HTML forms.
• Share links to videos and audios instead of embedded media.
• Last but not least, stick to an ideal width for the layout that is 440px. However, if you need more than 600px is the biggest size you can afford.

However, if you seek an easier way of creating an email newsletter, you can always go for email template builders.

Email template builders as a valid alternative

Marketing automation platforms are not the only life-savers when it comes to creating an email newsletter. You can always try email template builders that let you do the same thing. What’s more, sometimes they have even more advantages over the marketing platforms. By comparison, Postcards.

Created with all those limitations in mind, Postcards offers dozens of hand-crafted and thoroughly tested modules. Starting with classic options for headers and ending with trendy e-commerce blocks, the builder has it all. It means that you do not need to figure out how to turn an ugly table layout into a “candy” on your own, Postcards will do all the heavy lifting for you. All you need to do is to handle the design by merely arranging and re-arranging blocks until you get your masterpiece.

Another big advantage over the standard marketing platforms is that Postcards keeps up with the trends. It means that you will find only the nifty stylistic choices, modern Google fonts and of course retina-ready graphics. The layouts are optimized for popular screen resolutions starting with the biggest ones and ending with the smallest ones. And pre-made color schemes are ones that you will never want to change since they perfectly blend into the nowadays realm.

Last but not least, all the templates were carefully tested on the majority of email clients, web browsers and mobile platforms. So you do not need to worry about the compatibility since the email newsletter will render perfectly well in almost every mail user agent.

Conclusion

Marketing automation services and email template builders have their pros and cons. Both of them have their limitations, and both of them offer their ways of working around the obstacles. Choose one that fits you most.