Have you ever tried adding the embed code of a YouTube video to your HTML email? I did that couple of years ago and it turned out soon, that whoops it just wouldn't work.

There are ways to make videos work in couple of email clients, but there's still no solution that would work everywhere.

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

Email design has it's own limitations unfortunately, and you either need to obey or experiment a lot if you want 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.

My goal is to help you understand why email design still differs from traditional web design, and what elements you can dream into your next email design and what not.

The series includes the following chapters:

Although there are 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.

Video in Email? Not really.

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 mail 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 marketing emails.

"...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.

Solution - Use GIF

While video is generally not supported in major email clients, using GIFs in emails are 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.

The following image shows which email clients support animated GIFs in emails. See how reliable they are among the different clients!

GIF support in desktop email clients

Source: Litmus

In the following example, Boden makes use of a simple animation to capture their audience's attention.

creative GIF example in email newsletter

Source: Mail Bakery

Or here's another example of a funky way of animating a very static video play button.

creative GIF example in email newsletter

Source: Vidyard

If you even want to make it easier, just create a static image with a play button in the center. This one will also grab attention of people, although will be less effective than an animated GIF.

transparent video play button

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

Fonts

To correctly display fonts on emails, the subscriber must have them installed on their computer. However, these can even differ from Mac users to Window 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.

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

web safe fonts

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 is a 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 a second option in this case and provide alternative text.

The first version of Chamaileon's email editor will only support web safe fonts that are installed on most computers already; this means all of your templates will be displayed consistently among different email clients.

Don't worry, the support for Google fonts is on the list of improvements we might implement, based on your feedback and the associated business value.

JavaScript

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

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.

What about forms?

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 interest 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 it, you may be missing out on some valuable information.

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

Mark Robbins and his team at Rebel Mail are the ones who can hack together exceptionally interactive emails for you. I'm not familiar with their price point, but since the prices are not public, I suspect their service might be quite expensive for small and medium businesses.

Another traditional way for adding 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.

survey image example

Source: SitePoint

Background Images

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.

apple email newsletter example

Source: Canva

Now what?

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.

Be wary of how you use HTML based content, like embedded media and custom fonts in your email design, and when in doubt test your emails. As you develop new ways to send content to your audience, keep this article in mind so you can display only the best content.

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.

Author
Roland Pokornyik

Roland Pokornyik

CEO / Co-founder @ Chamaileon.io & EDMdesigner.com