This article was last updated on February 19th, 2019.
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 a 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 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.
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.
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 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"
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.
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.
We made a video tutorial on how to add a GIF to an email. You can check it out here.
The following image shows which email clients support animated GIFs in emails. See how reliable they are among the different clients!
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, Boden makes use of a simple animation to capture their audience's attention.
Source: Mail Bakery
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. This one will also grab attention of people, although will be less effective than an animated GIF.
You can find all sorts of different play icons on Pixabay.com for free.
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 Windows and Mac computers.
Some email clients will support the tags,
@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.
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.
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.
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.
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.
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, 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.
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.