Working Within the Limitations of MailChimp's HTML

Working Within the Limitations of MailChimp’s HTML

One of the biggest worries during email campaigns is whether everything is appropriately displayed on the receiving end. An email message that fails to display when received correctly is a wasted effort and a stain on the reputation of the brand that it’s trying to promote.

In most cases, campaign managers are caught in the middle of trying to create a campaign that looks great and displays properly to most users.

MailChimp is one of the most popular email automation platforms out there. They also offer quite a few ways to improve the design of your emails. Most of this is done through HTML, but this can be a bit tricky if you are a first-time user.

We’re going to discuss the limitations of the HTML modifications you can make to your emails without them breaking on the receiving end.

Understanding email HTML

The first thing we need to clear up is the difference between regular, web HTML, and email verify HTML.

Browsers are quite a bit more versatile when it comes to parsing HTML than email clients. They are designed to display complex things like animation, interactive and dynamic elements, and are updated regularly to keep up.

Email client HTML has a more humble purpose, and the clients are mostly not equipped to deal with complex things like animation, flash, etc.

Due to this, we decided to try and outline the capabilities of email clients’ HTML parsing and help you understand what best practices to use when preparing your verify email campaign.

The do’s, maybe do’s and don’ts of email HTML

With email list verify HTML, it is not always clear cut which email client supports what HTML feature. Due to this, we decided to separate these functions into three categories:

Things that work every time:

• HTML Tables
• Nested tables
• Inline CSS
• Static layouts
• Web-safe fonts

Things that work sometimes:

• Image maps
• Embedded CSS
• Background images
• Custom web fonts
• Wide layouts

Things that never work:

• <div> layering
• Embedded audio recordings and files
• Embedded video recording and files
• <iframe>
• JavaScript
• Flash
• Forms

Understanding the maybes

The things that work and those that don’t are straightforward enough, but what about the maybes? Let’s go through each of them and see the proper situations to use them in.

Custom Web Fonts

When you use MailChimp, you have the option to use standard web fonts. You can also choose several custom fonts to use in a campaign.

The neat thing that MailChimp does is that they convert your custom font into a standard web font if the email client doesn’t support it.

It is a good idea to learn which clients support web fonts and which do not:

GIFS

GIFS are fun to include in emails as they are dynamic and eye-catching. They can also be very funny if used creatively. However, not all clients will support GIFS, so they will not display within your emails in some cases.

If you still want to use them, you might want to consider adding them directly through Giphy. The reason for this is that MailChimp’s photo editor is not intended to deal with animated images, and if you decide to use it, the GIF may break in the process.

Here is a list of email clients which support GIFs:

Including background images

MailChimp offers support for background images. You can insert a background image into the following elements:

• Body
• Column
• Footer
• Preheader
• Header

For those that are using a custom HTML template – use MailChimp’s template editor to add background images.

Again, background images don’t render in all email clients:

Using Wide Templates

The problem with using wider templates is how email clients are designed and how users utilize them.

A lot of people will use a preview pane of their desktop clients to view a received email. By the same token, they will view the message on their mobile devices.

This means that your template will get chopped up if it is wider than 600px (maximum 800px). Due to this, your email message will not display properly, which defeats the purpose of sending it in the first place.

Research, Design, Test and Start Your Campaign

Finally, we’d like to outline the general approach you should be taking when creating a custom HTML-based email campaign through MailChimp.

Mail HTML can do many things, and it can’t do a lot of things, as shown in the paragraphs above. Sometimes it can be challenging to keep track of what can and cannot be done. The smart thing to do is get a general idea of what you want to include and do some research before you try to complete the design.

If something doesn’t work as well as it should – ditch it!

Once the design is complete, test things out! Don’t just be done with it and pray that everything works because your research tells you it should. The testing phase should be non-negotiable, especially for massive campaigns.

Again, if something doesn’t work as well as it should – ditch it!

Your goal is to reach your subscribers with your brand message, and design is secondary to it being displayed correctly.