Email has a bad reputation. Too many people think of it as being stodgy….static… boring. People like you – people who would read an email marketing blog – know better. Email isn’t stodgy at all. Especially when you break out the ROI charts comparing it to other channels. From that view, email is downright sexy.The difference between the two views is in how you practice email marketing. Boring content wrapped up in an uninspiring email design, with the same email going to every subscriber is indeed boring.
But toss in some segmentation, personalization, and some killer content. Make it mobile-friendly, animated, and easy to share. Then email can be just as cool as anything else. But you gotta push the envelope.
That’s where the cutting edge email tricks come in. The mindset of “Email 2.0”, as some of us like to call it. And nowhere do you see the future of email better than in interactive emails.
We dipped our toe into this subject a week ago, in the post about how to use social media content in your emails. The first example I showed you actually was interactive content. It was a live Twitter feed inside the email message for The Email Design Conference. Anybody could interact with that email by posting a tweet with the hashtag #TEDC15. The Twitter feed inside the email would automatically update with every new tweet carrying that hashtag.
That’s just one application. The possibilities for interactive emails are almost endless. Some developers talk about emails with so much interactivity that they’re basically “apps in your inbox” or “emailed microsites”. I haven’t seen any emails that go quite that far, but if the developers are talking like that, it’s a matter of time until someone pulls it off.
Even if we step back from the big dreams of what interactive emails could be, there’s plenty of cool things are already being done. There are many practical applications for interactive emails. Here are a few examples:
A feed of top news stories
Newspapers and emails – how 1980’s, right? Well, maybe not. The Chicago Tribune decided to try their hand with interactive emails. Except instead of a Twitter feed, they put in the feed of their own top news stories.
An email with a live feed of top stories from The Chicago Tribune. Image from Movable Ink’s “The Inkredible 5, Best of 2015”
Rotating carousels of product images
Earlier this year UK Retailer B&Q got a lot of attention for this email:
Image from Litmus’s blog post, Is This The Future of Email Design?
Anyone familiar with website design will recognize the mouseover effect. But to see it in an email is definitely thinking outside the box. So how did they do it? This email is a mix of tricks including simple animations and CSS transitions and Z-index for the layering.
As interactive emails get more widely used, you might one day see a template like this in your email template selections. The mouseover action is a great way to get more information into a very limited space.
Interactive navigation bars and menus (sometimes called accordion navigation)
Navigation is tricky in email messages. You want to include it, because it gets people to your site. But rendering it in mobile can be difficult. There’s also the problem of the navigation “cluttering” the design of the email, or worse – distracting from the call to action. Interactive navigation can get around a lot of those problems, while still giving people an easy way to get more information without having to click through to a website.
Here’s an example of what this kind of interactive email might look like. The animation is from the email design company Email Monks.
I love these accordion layouts, but there are some serious limitations:
- They only work on mobile devices.
- They won’t work in the Gmail app or in third party apps.
- They won’t work in any email client that doesn’t support CSS3, like Windows-based clients.
Ugh. While it sounds like that cuts out most email users, there are still plenty of people who can see these. But you’ll need a fallback email for anyone who doesn’t have an email client that supports this. More about fallback emails – and the limitations of most interactive emails – in a moment.
Tabs (yup, just like browser tabs)
It's hard to cram everything you want to say in an email into a space smaller than an index card. With careful use of tabs you can almost 10x the space to your emails. The animated gif below from FreshInbox shows how they work.
If you’re feeling confident with your email coding skills, check out their tutorial for how to create this effect. There’s another good tutorial for how to create an email like this from Mark Robbins on Web Designer Depot.
Polls inside an email
Ticketmaster sent an interactive email with a poll in it earlier this year. It went out just before the MTV Video Music Awards. The email asked who the subscriber thought would win for best female video, best male video, best rock video and video of the year. Subscribers could vote directly in the email. After voting, they were redirected to a results page to see how other people had voted.
The results for Ticketmaster were terrific - 182% more opens than their average email. The click-through rate and engagement levels were good, too. 80% of the people who voted in the email decided to vote again after they saw the overall results.
Here’s what the email looked like:
From Movable Ink’s ebook “The Inkredible 5, Best of 2015”.
Customize a product from within an email
What about something most sophisticated? Like a three-step process, all within an email? Burberry’s done it. Their scarf personalized email lets subscribers design their own scarf from within the email.
Not every email client can support something this sophisticated, so Burberry chose to send a “fallback” email, shown below. Fallback emails are always a smart idea. It’s possible to code an email so that if a subscriber doesn’t have the right email client to see the interactive email, the email will just show a more standard version of the message.
Place an order via an email
Every online retailer in the world should be interested in this one. If we can develop email enough for subscribers to place an order entirely from their inbox, well, that’s a game changer.
Several email design companies, including FreshInbox and RebelMail have taken a shot at this. Here’s how Mark Robbins, an Email Developer and CSS Hacker at Rebelmail envisions an email message checkout:
Here’s another version of a checkout from within an email message, this time from FreshInbox:
Feedback mechanisms in emails
There is one very simple kind of interactive email that you could set up yourself – no CSS skills required. Here’s an example of it from Whereowhere. This is the standard footer of their email messages:
That’s a simple, effective way to let your subscribers interact with your emails. You don’t need to know advanced coding or even basic CSS to set something like this up. Just create the images, link them (perhaps to a landing page that responds to which option they chose), and then use your email reports to see which link got the most clicks. Voilà – you’re getting feedback from your subscribers from within your emails.
Buffer tried a variation on this not too long ago. It’s even simpler than the one above.
A feedback mechanism like that wouldn’t have to be limited to rating your email messages. How about letting people choose which one of three blog post topics you wrote about next? Or between two or three new services you might offer?
It’s changes like this that turn emails from one-way communications into something more like a dialogue. And that’s exactly where we should be heading.
The challenge – getting emails to render across all the different email clients and devices
While all this interactivity sounds cool, there’s still a ton of work to be done before most of us can use interactive emails. The big problem is getting an email to look the same (aka “render correctly”) across all the dozens of email clients. Even when most email subscribers can view an interactive email (as the chart below shows), you’ve still got to accommodate the other subscribers. Even if they’re just a small fraction of your list.
Chart courtesy of Rebelmail.
As any email designer will tell you, that’s a wee bit of a nightmare. Especially if you’re used to sending emails in predesigned formats, or emails that have been designed with a drag and drop editor like in GetResponse. An enormous amount of work was done behind the scenes to get those emails to appear pretty much the same (or at least similar and looking good) across dozens of different devices. And even with our pre-tested templates, we still recommend you use the inbox preview tool before you send an email message out.
If you still want to try an interactive email, you’ll need strong HTML and CSS coding skills. Also check out FreshInbox’s grid of which email clients support dynamic and interactive email elements. Finally, take a look at your GetResponse reports to see which email clients your subscribers use most. You might get lucky. If, say, 75% of your subscribers are on Gmail, you could just design an email for Gmail, then create a static fallback email for everyone else.
Back to you
Does that seem like too much? Don’t worry. Play around with simple feedback mechanisms like the footer questions from Whereowhere and Buffer. Sometimes even simple technology paired with a little bit of ingenuity can create something extraordinary.
And stay positive – what’s perhaps beyond our reach now may be an everyday thing a year or two from now. Email is changing fast.
Have you seen any cool interactive emails recently? Have you tried any interactive campaigns? Tell us about them in the comments.