How to Create a Completely Interactive Email Using Advanced Coding >

codeemailhero

Every year we put lots of love into our holiday card at BrightWave—creating a greeting that shows off our email chops and also just puts a smile on the faces of clients and email friends alike. Not sure if you checked out this year’s work of kitsch-y genius, but we’ll just say it was no exception.

For the email, we went to the next level on the backend, creating interactivity right in the email. That’s right, folks, you click on various buttons and different tree trimmings animate right in the email.

The proof was definitely in the pudding: The email had a 43% action rate—a 25% increase over the previous year’s holiday email. This massive increase in interaction told us that the technique was as unique and engaging as we had hoped.

While creating interactivity in a website is a simple, well-documented process, we don’t have the same toolkit available to us as email developers. Which means getting very creative with our solutions at times. Read on to see how we pulled this off using checkbox interactivity and web-kit progressive enhancement.

giphy

 

A Nod (& Sip) to Our Inspiration

We got pretty jazzed up when we saw this Pret a Manger email created by Jon Carey, Lead Front End Developer at bigdog, which used interactivity to trigger an animation, creating an eye-catching experience. Of course, we had to take a look under the hood—and keep the idea in our back pocket.  Turns out that the BrightWave holiday email would give us the perfect opportunity to try out this technique and add our own spin.

Checkboxes: They’re What’s on the Hamburger Menu

The first challenge to overcome was how to make a CSS style change occur when a user clicks an element in the email. The common approach is to use a Checkbox—a technique we’ve used for collapsible “hamburger” menus in email. When checked, this triggers a particular set of styles as defined in your CSS.  In this case, terribly tacky and awesome decorations animate on a tree.

We used a Pseudo Class (:checked) and a CSS Selector (~) to select another class to change the element’s style.  It looks something like this:

input#decoration-3:checked ~ .animated-bg { display: block; }

Fallbacks Can Be Fun, Too

Why is the checkbox technique most commonly used for hamburger menus? (And why do you suddenly feel like having a Checkers hamburger?) It’s because that type of menu is only displayed for mobile.  Mobile email apps have much better CSS and HTML support—particularly, iOS Mail and Android Mail App.

That’s great, but we needed this email to work across mobile and desktop email clients and apps.  Since that wasn’t possible, we added a little progressive enhancement—that is, fallback content for those email clients that didn’t support the interactive elements.

This was achieved using a media query to check for –web-kit/-moz CSS capability.

@media screen and (-webkit-min-device-pixel-ratio: 0), screen and ( min--moz-device-pixel-ratio: 0) { *A Whole Bunch of Styles* }

Here’s what those email clients got:

Screen Shot 2016-01-20 at 6.03.43 PM

Those who had a webkit or moz-capable email app or browser, got the interactively enhanced email. The nice thing about this approach is that we could use a whole host of CSS3 techniques without worrying that they might not be supported on some version of Outlook.

Looking to the (Interactive) Future

Since we worked out the kinks of this technique with our holiday send, we can’t wait to put it to use with our clients. The options are floating in our heads like so many sugarplums (75% off of course, since it is January now): Perhaps a slideshow that allows users to click through and engage at their own pace? Or an interactive “price guessing” game that allows a user to reveal what’s behind Door No. 1 or No. 2?

 

 

Leave a Reply
(will not be published)