Video in email
That wait appeared to be ending last year with many clients reporting 50% mobile iOS usage making HTML5 more viable. That's not to say we're blindly enthusiastic, but using it on a few projects was enough to make me reassess the video in email options out there. Below are eight techniques covering the gamut from thumbnails to HTML5. You'll need to weigh up ease of implementation, target audience, your goals and cost before considering any of them.
Still image
On the minimal end you can add a play icon over any still image to indicate it's video content. You can get creative with how you brand the play button. YouTube has an official icon you can download here. Alternatively you can feature a video player, which if recognizable sets clear landing page expectations. Ease of implementation ensures the still image linking to a landing page is the most widely used method of adding video to an email.
Pros: Easy, fast, cheap, lightweight, universal support and gets users straight to your website.
Cons: Video easy to overlook, one still image to entice users, extra clicks to view the content.
Animated Gif
This technique is easy to implement, pick a small number of frames and cut between them. This bumbleandbumble email uses just four frames, while Nasty Gal uses twelve. In this horizontal email, American Eagle Outfitters demonstrates how eight frames of motion immediately draws the eye to the video content.
MailerLite just added a tool that automatically generates an animated Gif from your videos. Here's one of their emails showing a 15 frame Gif. Ignas Rubezius, CEO of MailerLite, told me that the click rate for their own emails increased from the average 5% to 8% when including the animation. He also felt that animated Gifs were, "enough for now" as support for HTML5 playback is still low.
Pros: Movement draws the eye, broad support, multiple frames in which to demo a product or tell a story, doesn't take much time or skill to create, and fairly lightweight.
Cons: Not as polished as some other techniques, no audio, will add to the file weight if used across large areas and with too many frames, and only first frame shown in Outlook.
Cinemagraphs
Developed by Jamie Beck and Kevin Burg in 2011, cinemagraphs are when an isolated element within the frame is animated on a loop. As their website states, "It's more than a photo but not quite a video". That first year Anthropologie and Columbia featured cinemagraphs in their emails, more recently Mr Porter ran a series.
Netflix sent a cinemagraph in an email to promote the second season of House of Cards, show creator Beau Willimon also shared teasers on the web. Experian stated that 72% of clients who’ve used animated Gif’s or cinemagraphs in email experience higher transaction-to-click rates. Seen as the classy person's Gif, cinemagraphs can highlight a brands artistry. Although they do take extra skill to create, they are often widely shared.
Pros: Show of your brands creativity, cover a larger area than a VideoGif, sweet spot between a photo and video, the inventors call them 'living photographs'.
Cons: Takes more time and skill to create (software), file size for HOC was 1.6MB, no audio, Gif quality sometimes poor, only first frame displayed in Outlook.
Video Gif
In Dec 2008 I wrote how to create a VideoGif, that same month Sears was the first retailer to send one, followed by REI in Feb. 2009. Video Gifs went on to have their heyday in 2011, Neiman Marcus, Kenneth Cole and World Market were among the brands to experiment.
Recently Redbox have been sending Video Gif trailers, though across larger areas and in less boxy designs than those early attempts. Quality and file size have always been the downside of using video Gifs, and Redbox are pushing both to the limit. The Hobbit example weighs 6.7 MB and you can clearly see compression artifacts. Though having the trailer play right in the email without technical hassles makes this an attractive compromise.
Video Gifs can also be used as fallbacks to HTML5, like this example by UGG. The UGG fallback Gif is 400px wide scaled up to 650px, 300 frames and 8.3MB. The Gif is viewed in clients such as desktop Gmail that don't support HTML5. We did quite a few video Gif campaigns back in the day and our software of choice was ProMotion.
Pros: Plays directly in the email, requires little effort from the user, no need for fallbacks, easier to create than cinemagraph or HTML5 and can show a 10 – 20 sec trailer.
Cons: No audio, poor image quality, large file weight (there's a 10MB Gif limit for desktop Gmail). Historically this lead designers to contain them to small areas and 20 sec clips.
JPEG push
(btw demos only live until the end of October)
In 2010 we developed a solution that allowed us to stream JPEGs, here's an in-depth write up. The benefits were superior 24bit image quality, and ~4x the resolution of a Gif for the same file weight. JPEG push was also dynamic, in this Sherlock demo the sub-titles and title top left are added in real-time. The Avatar demo features sub-titles, first name personalization and a countdown.
The downside was that JPEG push only ran in a limited number of clients — today its iOS, Mac Mail, Yahoo Mail (not IE), AOL (not IE), BBZ10, WP7.5 — before falling back to a dynamic Gif or still via device detection.
Here's a few more demos: James Bond, one of my favorites Alice In Wonderland and Avatar scaled up big for fun if you have lots of bandwidth. The tech has variable frame rate and compression built in, so the quality and smoothness will vary depending on your connection. We haven't touched the demos in years so the fallbacks may need some adjustments, especially in Gmail were it used to play prior to image caching.
We successfully used JPEG push in our Xmas slots game, and its how we did the live video streaming in iOS (all the video you see here is JPEG push).
Pros: Better image quality and smaller file weight than a Gif, dynamic so you can insert live content, plays in the email.
Cons: No audio, no player controls, still bandwidth heavy, JPEG push isn't a widely known technique, requires fallbacks.
YouTube
When you place a YouTube link in an email with link tracking disabled, you can play the video directly in desktop Gmail or Outlook.com. The video thumbnail appears above the email in Outlook.com and below in Gmail, when clicked the player overlays the creative.
I've seen few brands use this technique, in fact the only example I could find was Cabela's from 2012, captured in Yahoo Mail (originally shared on the RetailEmailBlog). Although Yahoo recently posted about link previews, I couldn't get my YouTube video to work in Yahoo Mail. I know it worked a few years back, no doubt I'm doing something stupid.
Click a thumbnail to launch the player as an overlay:
Pros: Real video without leaving inbox, easy to implement, falls back cleanly in other clients.
Cons: Only YouTube videos, might reduce website traffic, may distract from email offers, no tracking.
HTML5
HTML5 video support is predominately Mac Mail and iOS, so its only been worth implementing in the past couple of years as mobile usage has shot up to ~50%. Working with Chanel, we developed an in-house HTML5 video solution last year.
Using media queries we switched between three experiences: desktop, iOS and non-iOS mobile. Outlook.com only plays on an obscure right click, so we coded it so that the play icon doesn't appear, though it still display's in other desktop clients like Gmail.
The videos were edited in a way that gave glimpses of the show, abstract teasers that encourage you to view the full event on the landing page. As the majority of people check mobile email in portrait, it was decided that the video would also favour that orientation.
Chanel were able to gather stats on these global campaigns and the feedback was that the videos performed very well. Though you might want to consider using a vendor for HTML5 video if you don't have the resources to deal with analytics, hosting and QA. This email by Allen Edmunds uses Movable Ink technology, while this Barneys example uses Liveclicker.
Pros: Stunning and engaging where it works, supports audio, player controls, teaser to expanded website content.
Cons: Upfront investment for that first send, time to implement even with a vendor, support is mostly Mac Mail and iOS, need fallbacks, may want to drive users straight to website.
HTML5 background
In April 2014, Litmus sent an email which is the first I've seen featuring HTML5 background video. Support is limited to Apple Mail and Outlook 2011 (Mac), but it degrades cleanly to a still image. It's crucial to know which clients people are viewing your emails on when considering different video in email techniques. Litmus knew that 30% of their audience uses Apple Mail so the enhancement was worth it. You can read their tutorial here.
Pros: Great enhancement, clean fallbacks, bought the conference atmosphere to the inbox, couldn't achieve this with an animated Gif.
Cons: Support is limited to Apple Mail and Outlook 2011 (Mac), need in-house skill to implement and real devices to QA on.
No clear choice
While HTML5 is real video in email, I'd be more enthusiastic if it had wider support. I only recommend it where you have at least 50% coverage. The array of faked video techniques are still very much in use. Even video platforms like YouTube, Redbox and Netflix are currently using stills, video Gifs and cinemagraphs in their emails. That's not to say your video in email strategy should mirror theirs, but it does indicate that its early days for HTML5 video.
There's also no reason to settle on just one approach. The team at Hulu told me that they use a variety of techniques depending on the context. They shared a Happy Birthday email that features a still, a video Gif movie trailer, and an HTML5 email announcing new movies each weekend. Like Hulu, rotating between tactics depending on the video content and campaign goals makes the most sense.