By Kevin Mandeville, Content Designer at Litmus, @kevingotbounce Recently, our company sent the launch email for The Email Design Conference. We knew we couldn’t promote an Email Design Conference with just any email, which is why we aimed for a forward-thinking and uniquely impressive one. Naturally, we wanted it to be so amazing that people […]
Recently, our company sent the launch email for The Email Design Conference. We knew we couldn’t promote an Email Design Conference with just any email, which is why we aimed for a forward-thinking and uniquely impressive one.
Naturally, we wanted it to be so amazing that people couldn’t help but attend the conference to learn about the tricks we used.
So, what did we decide to do? We used an HTML5 video background. That’s right: video background in an email.
In addition, you can view the Litmus test results of the final email sent to subscribers (note some screenshots may be “wonky” due the video animation). The video background worked in the following clients:
Outlook 2011 (Mac)
As you can see, the HTML5 video degrades gracefully across all clients with the fallback image.
We expected the email to get some attention, but the response we received blew our socks off. We’re proud to report that it prompted hundreds of tweets — generating comments, questions, and praise.
With such an overwhelming response, we fast-tracked this blog post breaking down the methodology and process behind the email. Here’s a step-by-step guide to the implementation of this responsive email.
Designing For Desktop
First off, we created a full-width table as a container for the top section of the email:
Within that table, we created a table cell with a “fallback” background image that acted as a static image for when the video was not loaded:
background-color: #f2ae44; background: url (http://pages.litmus.com/l/31032/2014-04-17/2hs7p/31032/17346/video_bg.jpg) top center no-repeat;background-size: cover;” width=”100%”>
The fallback background image looked like this:
Creating a fallback background image was necessary for two reasons:
The majority of email clients do not support video backgrounds.
Some subscribers may have trouble downloading the video background due to large file size.
It was also important to include a background color on both the
to ensure there was a fallback when images were disabled. This step was crucial for subscribers using Outlook, AOL Mail, and other email clients that block images by default, and was especially important for our email since the design uses white text in the video section—we wanted to avoid white text on a white background.
Next, we used a wrapper
for the video as the first element in the
Since video backgrounds are only supported in Webkit-based clients (Apple Mail and Outlook 2011 for Mac), a Webkit-only media query was used to apply CSS to the