Limitations of HTML Email Design - Video, Fonts, Javascript, Flash and others

Have you ever tried adding the embed code of a YouTube video to your HTML email design? There are ways to make videos work in a couple of email clients, but there’s still no solution that would work everywhere.

Same goes for custom and Google fonts as well. They are not supported either in most email clients, so you always have to add numerous fallback options.

HTML email design has its own limitations, unfortunately. And you either need to obey or experiment a lot if you want to push the envelope.

This is the third article of the “Email Design Basics for Email Marketers” series. In this chapter, you’re going to learn which “modern” techniques work in email design and which do not.

Limitations of HTML email design

Although there is a variety of options to customize your content with HTML, these options don’t always translate well into your emails. Support for various types of HTML content – such as embedded media, custom fonts, and flash – tend to vary among the different email clients.

This can lead to differences in the way your content is displayed on your user’s preferred devices – but it doesn’t have to! In this article, we will explain the various types of HTML content that are best to avoid in your email campaigns, and what to use instead.

Embedding videos into emails

In general, most of the major email clients will not support videos by default. Only a few clients, including Apple Mail, currently support HTML5 tags for embedded media. Unless most of your audience is using Apple Mail, using videos in your emails may not be the best option.

Fortunately, using HTML5 allows you to set a fallback image if video is not supported by your user’s email client.

Video in email is a quite hot topic these days since all email marketers realized that they can boost conversion with videos. Unfortunately, email clients are lagging behind in supporting our efforts for more exciting email designs.

“…the email clients that support the HTML5 Video tag are limited, though it is possible and we used it for campaigns targeting mobile users on IOS devices in the past. The functionality stopped working in Safari on IOS 8 and we haven’t checked again since. If you are going to try it please note it worked for us when it was a direct video source (//YOURDOMAIN/VIDEOS/VIDEO.mp4) and not like a Youtube link (Vimeo allows direct links too). You can always failover to an animated GIF as Edward mentions though some email clients will only display the first frame of the animation so to them it will be static. Good luck”

Mitchell Malpartida, Litmus community

If you really want to communicate your idea with video, try using a GIF. Another option is to place a play button over a static image to encourage your audience to click your link to watch a video. This allows you to track click-through rates too.

Video emails in Chamaileon

Using Chamaileon, adding video elements in your emails has never been easier. All you need to do is insert your video link and let our generator do its magic!

👉 Discover how you can easily embed video elements in your emails using Chamaileon!

Using GIFs instead of videos

While videos are generally not supported by major email clients, using GIFs in emails is a lot more reliable.

Animated GIFs are supported in nearly all desktop and mobile email clients. The exception to this is Outlook (2007+) and Windows Phone 7; in these clients, only the first frame of the GIF will be visible.

Therefore, keep this in mind when designing the GIF to make the first frame enticing enough.

In Chamaileon, our responsive email template builder, you can add a GIF to your email within seconds.

Here’s a list of which email clients support animated GIFs in emails:

Desktop Clients

• Lotus Notes (6, 7, 8.5)
• Outlook 2000-2003
• Outlook 2007-2013
• Outlook for Mac
• Apple Mail
• Windows 10 Mail

Webmail Clients

• Gmail
• G Suite
• Yahoo! Mail
• AOL
• Outlook.com
• Comcast
• Orange.fr
• SFR.fr
• GMX.de
• Web.de
• T-Online.de
• Freenet.de
• Mail.ru

Mobile Clients

• iOS Mail
• Android (Default)
• Android (Gmail)
• Android (Gmail IMAP)
• Blackberry

Note: Several Outlook versions didn’t support GIFs until the latest updates in 2019. Now GIFs are supported in Outlook 2010, Outlook 2013, Outlook 2016, and Office 365.

In the following example, Zesty Paws makes use of a simple animation to capture their audience’s attention.

Or here’s another example of a funky way of animating a very static video play button. Here are 30 more inspiring animated email design examples.

If you even want to make it easier, just create a static image with a play button in the center.

You can find all sorts of different play icons on Pixabay.com for free.

Font support in email

To correctly display fonts on emails, subscribers must have them installed on their computer. However, this rule differs from Mac to Windows users.

Only web-safe fonts, such as Verdana, Times New Roman, and Georgia, are recommended to use in emails because they have the highest compatibility.

👉 Read more | Your full guide to fonts in emails

The fonts in the image below are all web-safe fonts that are most likely installed on all Windows and Mac computers.

Some email clients will support the tags, @font-face or @import, to allow you to use any font of your choice. The font will need to be hosted somewhere, such as Google fonts, or imported using the @import tag. Google fonts are the preferred method of using different fonts in emails because it is easy, quick to implement, and there are many fonts to choose from. However, this is only supported on Apple Mail, the native Android mail (not Gmail), iPhone, iPad, and Thunderbird.

If you would like to use a specific font in your emails, another option is to display the text as an image. But keep in mind that some of your users will automatically have images disabled, so prepare for the second option in this case and provide alternative text.

Fonts in Chamaileon

Using Chamaileon, you can import your brand’s fonts in a few simple steps.

👉Read more | How to add other Google fonts or custom fonts to my email(s)?

JavaScript is banned in email

Javascript is a programming language that is mainly used to make websites interactive. Most email clients will automatically block any JavaScript that is found in emails because it can be seen as a security risk.

For example, JavaScript can be used to hide destructive malware in emails. If spam filters fail to block it from reaching your primary inbox, it will only take a few clicks for the malware to run its’ fatal course on your computer.

Generally speaking, it is quite uncommon to send applications in JavaScript form through email because it can be seen as suspicious. Email clients will most likely consider it as a threat and automatically send it to the spam folder. For this reason, it is best to avoid JavaScript in all of your messages if you want to stay out of the spam folder.

Flash won’t work in email either

Similar to JavaScript, Flash is typically reserved for browsers and can be suspicious when found in emails. It is blocked by most email clients because it can allow hackers to gain control of your computer because it is not secure.

At any rate, Flash is typically blocked in most email providers and should not be used when designing emails. If you do want to display something with Flash to your audience, consider hosting it on your website and including a link to it in your emails.

Web forms in email

There are a variety of reasons to include a form in your emails, such as collecting feedback from your audience about a recent purchase or gauging their input for an upcoming product or service. However, you might also notice that forms are more common in webpages than in emails and there’s a reason why.

Forms are a secure way to collect data from your audience. Yet even simple forms have trouble displaying correctly in your emails. Although the basic components of a form – like text fields and text input boxes – can be made with simple HTML, many forms require the use of JavaScript to securely submit the text.

Therefore these emails will most likely be placed in the spam folder by many email clients – and if your audience can’t find or complete them, you may be missing out on some valuable information.

Despite the lack of support and the limitations of HTML email design, some companies, and email clients are still finding creative ways to add forms to emails.

The most common way to add forms in emails is to try adding a link to the web form instead. Or, like in the example of a simple survey below, have separate links to correspond to each of the three options.

Source: SitePoint

Background images in emails

As you might expect, email clients’ support for the use of background images in email is variable too. Some email clients, particularly Outlook 2007+ and Hotmail, will automatically disable background images in your email campaigns. This is why it’s important to treat the background image and text separately. This can be done by adding alternative text in addition to your background image, instead of overlaying the text directly into the image. All images should contain alternative text so your message will still get across to your audience.

Be mindful of the chosen text color too, because if the background image is removed and your text is lightly colored, it will no longer be visible against a white background.

But don’t worry – customized, beautiful emails are possible without background images too. The following image is an example from Apple to publicize the new MacBook Pro. Even without the use of a background image, the newsletter is simple and aesthetically appealing.

Source: Canva

What should you do?

With all of these constraints in the world of email marketing, it can seem rather challenging to get your message across to your audience. However, now that you know all about the limitations of HTML email design they should only be used to your advantage. Thus the employees learn popular programming languages, which are helpful for their content management; therefore, they succeed, as they can provide various options.

Be wary of how you use HTML-based content, like embedded media, custom fonts in your email design, and when in doubt test your emails.

Also, keep in mind that email width and size matters too both from a deliverability and user experience perspective.

As you develop new ways to send content to your audience, keep this article in mind so you can display only the best content.

Unfortunately, not all free responsive email templates are created with these rules in mind. So always be careful and double-check the email template you are planning to send.

That’s why we created Chamaileon- responsive email template builder which has the optimal email width and will render perfectly in almost all email clients.

Have you enjoyed this article? If yes, I’m sure you’ll enjoy future ones as well. Just subscribe to our newsletter below in the footer, and we’ll keep you in the loop.