Design, Email marketing, Trends

Using HTML5 in Email: Video

Video in Email

[Note: This is the second of a two-part series on using HTML5 in email. In this article, we look at the audio and video tags.]

In HTML5, the tag that sparks the greatest interest to many marketers is the new video tag. The tag is designed to embed videos in web pages, but wouldn’t it be great if we could do likewise with email? That way, a recipient could see your video without being redirected to a web page. Over the years, marketers have attempted to accomplish this in a variety of ways. Some have tried embedding Base64 encoded versions of video files into email—a technique that bloats email worse than mosaics and is not recommended by any ESP on the planet. Another technique that some have tried is to offer a plug-in that enables video in email, but this means that with every video email you send, you must also send a link to a third-party solution that requires the user to install new software. Right off the bat, you’ve already lost your audience.

The most common and effective way to add video to an email is by inserting a frame grab from the video into the email and then linking it to the page on YouTube, Vimeo, or your own website:

video image

Often, people add a play button to the image—as we have done—to help identify the image as a link to a video, but it still requires people to move away from their email to another site. With the video tag, the recipient stays in your email. This is preferable, but, as with the HTML5 tags we discussed in the previous post, when, how, or even if it works is contingent on several factors.

Compatibility issues

First of all, your email marketing software may not recognize video tags and will eliminate the code from the email. Even if your software allows the code to be included (and Symphonie is one of those that will), there’s still no guarantee that the email clients will display the video. Gmail and Yahoo, for instance, ignore the video sources listed within the tags, but this doesn’t mean video tags are useless. Other standard HTML information such as text and img tags can be inserted between the tags and an email viewer will default to this information if it can’t play the video.

On top of all this, the way the different devices handle video tags also widely varies. iPhones, for instance, provide a play button, while Outlook.com and Thunderbird require you to right-click on the image and choose play, and only Outlook.com is compatible with the “autoplay” attribute. All other email viewers disable this feature. At first, the inability to play the video without first right-clicking to choose play looks as if it might be a problem. After all, what good is a video if no one can figure out how to play it? But another feature of the video tag is the ability to include a display image of your choosing, allowing you to insert the necessary instructions to make the video work:

Rightclick to play iamge

If you are interested in using video tags you’ll need to prepare the email to cover all the possible exigencies. This includes providing the display image for the email clients that can play videos, and alternative links for the ones that can’t. It requires some familiarity with basic HTML, but nothing too difficult. If you want to use videos in email, we recommend reading our white paper, Video in Email, available here.

Sound Advice

Audio works in even fewer places than video. Only Outlook.com allowed the MP3 file to play. In most of the other clients, the audio tag defaulted to the alternative link. In Thunderbird, both the audio controls and the alternative link disappeared, but the program allowed the Ogg file to play if autoplay is on, but provides no way to pause it. If the file is not set to autoplay, there are no visible controls to make it play at all. On the iPhone, the file will play as long as “display images” is turned on (the default on the iPhone). When “display images” is turned off, a message appears that reads “cannot play this audio file.” Outlook.com was the only email viewer in our tests that worked with both the autoplay and loop attributes, making it possible to create an email that begins making noise as soon as you open it. This is definitely not recommended.

audio video compatibility chart

Ready or Not?

In part one of this series, we decided that none of the tags listed were worth using at this time. With the audio and video tags, we found that, while audio is not useful, the video tag provides enough flexibility and compatibility to be a good way to include videos in email for nearly every platform, but may require some file preparation. Click here to download the PDF version of our Video in Email white paper.

Design, Email marketing, Trends

Using HTML5 in Email: New Tags

HTML5 tags

Note: This is the first of two articles examining the use of HTML5 tags in email. In this article, we look at <mark>, <progress>, and <canvas>. In the second article, we’ll take a look at the <video> and <audio> tags.

When it comes to email, common wisdom says you should code it “like it’s 1999.” Using the latest HTML tags is considered risky business in email. Email clients throw out any code that uses scripting, and the implementation of new tags is spotty at best. Styling is best handled in-line, but visual editors, such as Dreamweaver, don’t always make this easy, preferring instead to place any style information either in a separate CSS file, or between the <head> tags, which can be lost when an email reaches the inbox.

Erring on the side of caution is usually a good idea, but sometimes we email marketers take this advice a little too far, avoiding useful techniques because five years ago they didn’t work. A good example of this is the relatively rare use of image maps in email, in favor of the more problematic and file-swelling sliced images (see Keeping It Together—Image Slicing vs. Image Mapping). So what about HTML5? Is it worth trying? Some of its new features are intriguing, particularly the <video> tag, but can you use them in email. Here’s what we found out.

Meet the New Tags

HTML5 removes (i.e., deprecates) a few old tags from HTML4 and adds thirty new ones. Several of these new tags, such as <article>, <aside>, and <section>, have little use in email; three of the new tags—<details>, <dialog>, and <summary>—will only work in Chrome and Safari at this time; and some tags, such as the <bdi>, <ruby>, <rt>, and <rp> tags, are specifically designed for use with other languages and are beyond the scope of this article.

Some tags may not have much practical value, but could be useful for creating visually interesting email without having to rely on images. Examples of this are the <mark> tag which makes text look as if it has been highlighted with a marker, and the <progress> tag, which creates an animated green bar similar to the ones seen when downloading files:

progressbar

markhilite

[Note: These are screen representations. WordPress.com does not currently support HTML5 either.]

Unfortunately, in our tests, <mark> only worked in Thunderbird and Outlook.com, and <progress> only worked in Outlook.com (by far, the most HTML5 compatible email client available). Given such limited application, these tags are of little use at this time for email marketing purposes.

One new feature that looked as if it might have real value for email is <canvas>. With <canvas>, it is possible to create graphics directly on a page without linking to a file. You can already do this, to a certain extent, with <div> tags, but <canvas> offers more controls and possibilities. In our tests, however, <canvas> did not work in any email viewers, stand-alone or browser-based. This isn’t surprising considering that the primary intended use for <canvas> is to create graphics on-the-fly using scripting. As a rule—primarily for security and virus reasons—email clients strip out any scripting found in an email.

Comparison chartCoding Like It’s 2011

It is apparent that, as far as email is concerned, HTML5 still has a long way to go before most of its features become useful to email marketers. As is always the case, the email clients are the last to adopt the latest features in each iteration of HTML; so, while it may not be necessary to code like it’s 1999, you might want to stick to coding like it’s 2011 for now. We will keep testing these features and as soon as any of them are available across multiple email clients, we will report on it here. One new feature of HTML5 that is shaping to have real value to email marketers is its video feature. There a lot to say on this subject, so we’ll be talking about it in a separate article. We’ve also created a white paper on the subject, available here: Video in Email white paper.

Next: Audio and Video in Email with HTML5.