Is video for your e-marketing newsletters an option?

Back in the days…

Back in 2007, having a “real” person in video to welcome you on the web was a big trend in interactive agencies (at least here in France). Now that i’m not part of the company anymore, i can say it loud: i hate them!! And of course, websites & banners weren’t enough, “we want them live in newsletters too!”.

Bad news for my marketing colleague, Microsoft released Outlook 2007. Why this is a bad news? It introduced one of the stupidest technical choice i’ve ever seen: it’s now using Word as its HTML rendering engine (and it’s still the case in Outlook 2010).

Here is a explicit example:

Outlook sucks

source: email-standards.org

Why did they do that? Well, two simple reasons. First, IE rendering engine, in a browser or as part of a mail client, is the biggest security hole of your computer (that’s no big news). Second and not least, some Microsoft customers use Word to create their newsletters (i know…) and use its internal interaction with Excel to publish & send their campaign. Of course, no big news here neither: Word HTML export tool sucks and manage to generate one of the crappiest code of the entire world.

As a result, what people designed in Word was definitely not what their customers got in their mailboxes. When you pay more than $300 per licence, you expect a bit more than that… So two solutions for Microsoft to calm down their beloved customers:

  • the obvious one: fix Word HTML export tool to generate some good & reliable code
  • the non-obvious one: use Word rendering engine in Outlook too and keep the crappy code

Yeah, since you’re using the same broken engine to create & read your newsletters, problem is solved right?!

The cool thing with IE being the rendering engine in Outlook was that you were able to use all plugins & ActiveX objects in mails (which is also why it was a giant security breach). Which means Flash-enable. This could sounds totally crazy in iPhone nowdays but yes, we used to send mails with some flash objects in them to play a streaming video inside your email. With this new Outlook, they were no ways to do it anymore. Even if our customer client target wasn’t corporate, they decide to stop it, and go back to some Outlook-compatible things. End of story.

This was 4 years ago. No iPhone, no iPad, Firefox was below 10% of market share.

5 years and new smartphone/tablet market later…

Call me nostalgic (or stupid) but when one of my customer asked me this week for a link to a youTube video as the main news of its April newsletter, i thought “hey, this could be really cool to play it right from the mail!”. Since i’ve already made those research & development back in the agency days, i knew that this wouldn’t be an easy / possible task…

But i had faith. Why? HTML5.

You still can’t use Javascript, Flash or whatever scripted solutions out there. Outlook is still using Word, and Javascript still doesn’t have any mailboxes V.I.P pass. But modern browsers / rendering engines can now render video without any script if they support HTML5 video element: Firefox, Safari, Chrome, Opera. On Mobile, iPhone/iPod/iPad Safari, Android Chrome. For others, <video> element provides a fallback.

My first idea was pretty simple… and stupid: put the new YouTube iframe embed. Of course, it fails.
So second idea: put the <video> element inside the newsletter, and use a fallback.

Here is the code i’m using:

<video x-webkit-airplay="allow" poster="videoposter.jpg" controls="controls" width="594" height="364" preload="metadata" autobuffer autoplay tabindex="0">
  <source src="video.webm">
  <source src="video.m4v">
  <source src="video.ogg">
  <source src="video.3gp">

  <object type="application/x-shockwave-flash" width="594" height="364">
    <param name="movie" value="{youtube-video-link}">
    <param name="allowFullScreen" value="true">
    <param name="allowScriptAccess" value="always">

    <a href="{youtube-link}" target="_blank"><img src="youtube-screenshot.jpg" alt="..." width="594" height="364" border="0"></a>
  </object>
</video>

As you can see, there is something for everybody! WebM for Google Chrome of compatible browsers, m4v for Apple, ogg for Mozilla-based browsers and (even 3gp but i don’t think it could be used by any as an embed). As a first level fallback, there is a flash player integration & as the last choice available, an image linked to the YouTube videos. I testing in both mail client & web browser since this can also be used in the mirror page (‘if you can’t read this email clic here’ link).

Safari & Chrome / Webkit

With no suprises, It works great on Safari on a Mac and all iOS devices (iPhone, iPod, iPad – using mpeg4 codec) in both browser and mail client. Note that it’s a real WOW effect on iPad 🙂 I was a bit surprised to see the flash player on Safari 5 under Windows and not HTML5 but well… if no flash player installed, image fallback is used.

No surprises neither, it works like a charm in Chrome. Still, i think Gmail blacklists <object> elements so you ends up with a black block. Without the object fallback, you’ll see the image fallback.

Apple experience is exactly the same between desktop and mobile: it just works. Just click on the round play button to open the video (just like on YouTube).
On Android, for now, all i can get is the poster to be displayed but no way to get the video.

Apple Safari & Mail

Google Chrome Mac, PC, and Google Mail

Apple iPad & iPhone

Firefox / Gecko

Since its 3.5 release, Firefox supports HTML5 videos too (Ogg Theora codec). Thunderbird can play them too but doesn’t show controls neither autoplay, which is a PIA!! User has to right click and press “play”. Since it’s something nobody would do, user stay with the poster placeholder. Argh…

Fennec is only used on Nokia Maemo & Firefox Mobile is not out yet. Since Fennec works as good as Firefox 3.5, i have strong hopes.

Mozilla Firefox & Thunderbird

Internet Explorer

Oh well oh well… at least, IE is honnest: even IE9 can’t play it. Flash player is used from IE6 to IE9. If no flash player, image fallback is used.

WindowsMail & Outlook 2007 / 2010 use the image fallback. As expected so it’s cool.
With no device in hand & one of the most broken simulator of the market, i can’t tell you for Windows Phone7. No doubt image fallback is what you’ll get anyway.

Microsoft Internet Explorer

Underdogs

Opera: Once again, thumb up to the guys from sweden, it works in both web & mail client. Opera Mobile is btw using the image fallback.

Opera Browser, Mail & Opera Mini

Blackberry: No matter how hard you try, it just doesn’t work. The worse is Blackberry OS6 & 7, which supports HTML5 video element but have no video codec, so the fallback is ignored and you end up with a black block. Can’t tell for Playbook for now, but since 1.0 doesn’t have a mail client, this is a non-issue.

Blackberry OS6 Webkit browser

WebOS: You certainly ignore it but WebOS  is made on top of HTML5. Its native applications are in fact made using HTML5 technologies. So we could expect a 100% support right… no, we’re wrong, it only detects the (deprecated) <embed> element and creates a link to it. If you only put the <object> element (which is a new standard for years), you’ll have a missing flash player message instead of the image fallback. Lame! Let’s hope HP teams will fix that…

Palm WebOS

Bada: Honestly, nobody cares…

Facebook Messages: Same as Bada, but it doesn’t work.

Facebook Messages

Research result

Here is what i figured out, i’m still investigating what could be done to nicely support the 2 or 3 biggest platforms and the rest the best i can. It seems pretty clear that you just can’t use the same solution for the mail & the mirror page, which would be pretty conveignant. Some cool JS libraries like PopCorn.js will help you with that in the browser, but is a nogo for mail client & webmails.

For now, if you don’t care about Thunderbird (feb 2010 metrics says 2.4% of the market), get rid of the flash object and this should be ok. All others will get the imge fallback, and iPhone/iPod/iPad users will benefit from their high-end device. Only Blackberry OS6 users will be left in the cold, but they’re used to see any web content as broken as can be anyway…

If you need a 100% reliable solution, just forget about it for today.

Posted in Uncategorized

Leave a Reply

Your email address will not be published. Required fields are marked *