HTML Email Development, v2

Animated & Interactive Emails

HTML Email Development, v2

Check out a free preview of the full HTML Email Development, v2 course

The "Animated & Interactive Emails" Lesson is part of the full, HTML Email Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Jason discusses when and when not to use interactivity and animation in emails.

Preview
Close

Transcript from the "Animated & Interactive Emails" Lesson

[00:00:01]
>> Rodriguez: So this has taken us into the last main part of the workshop, where we start taking those email campaigns that we've built, that are relatively simple, then we start adding some progressive enhancements to them. So we're gonna add some animation, see how we can have some basic interactivity and animation in our email campaigns.

[00:00:21]
And then look at a little bit more complicated interactive email example that would mimic something like a carousel, an image switcher, something like that you would see on a website. So, animation interactivity in email is a hot topic right now in the industry. We do this research every year to see what marketers are prioritizing, what they wanna focus on in the coming year, and where they're setting their budgets, what they're actually prioritizing with their money.

[00:00:49]
And one of the biggest things every year is interactivity in emails. So it's good to see that people are focusing on more important things like boosting personalization, doing better segmenting, and using automation a lot better in their email marketing programs. But 43.8% of marketers are prioritizing adding interactivity to their email campaigns.

[00:01:11]
There's couple of different reasons why they might do that. It can drive engagement and keeps people in email a little bit longer. When you get into really advanced versions of interactive emails, you can even do cool stuff like, in the inbox, you're gonna have a checkout experience for our product.

[00:01:28]
And for our conferences, we do the ticket purchasing process starts in that interactive email. We've done weird things with having a live Twitter feed inside of an email campaign. You can do choose your own adventure games inside of emails, it depends on what you wanna do. But a lot of times you don't necessarily need an interactive email for it to be effective and to have it work for your business, and get what you want out of an email campaign.

[00:01:58]
The most common things that people are adding from an interactivity standpoint tend to be those carousels, the image galleries, which we'll see how we would build something like that. But it's essentially just tabbed contents, so we have a couple of tabs. Some of them are hidden by default, and then depending on what you click on, then it will display some secondary content.

[00:02:18]
And we'll see how that works, but there's other cool things you can do with interactive email, you can have hamburger menus. If you don't want to show an entire navigation bar inside of your email, I would argue that you should rarely have a navigation bar in an email campaign.

[00:02:31]
But that's, I guess open for debate depending on your opinion, you can do quizzes and polls. You can do some basic kinda forms and stuff to get feedback from your subscribers. You can do accordions say which is kinda handy if you're doing something like I have a lot of disclaimers in the footer of your email campaign, which is really common for retail businesses.

[00:02:54]
The financial industry, higher education oftentimes have to have a lot of disclaimer information in their footer. If you don't want to display that by default, you can put it in accordion so people can pop it open if they really need to get to that information. Some cool marketing type stuff, you can reveal an offer depending on what they do inside of the email itself.

[00:03:15]
You can get really complicated and add products to a cart and then send that over to your website and then complete the purchase there. So all kinds of really cool things that people are experimenting with in email. But the main thing to note is that it doesn't work everywhere across the board for email clients.

[00:03:31]
So you have to think really carefully about what your fallback is, when you're creating this email to make sure that it's still a useful email campaign for the large number of users, for most audiences that won't be seeing that interactive content. Some pros for interactivity though is that it can increase accessibility.

[00:03:52]
Especially when you're doing simple things which we'll see about like using hovers in an email campaign. That's interactivity, you interact with the email by hovering over and it changes some state in the email. That can make things more accessible for, excuse me, people that need that added accessibility.

[00:04:09]
They need some sort of trigger visually to show that something can be interacted with. You can add some cool functionality like that checkout process or things like feedback surveys or something like that using interactivity. And the big one tends to be, though, just increasing that engagement, that buzz around an email campaign.

[00:04:29]
Like what we do with our Twitter feed or something like that, or in email game, like a choose your own adventure game. But again, it doesn't work everywhere, it works very few places. Usually Apple Mail and some WebKit based clients are your main bets for getting interactivity to work.

[00:04:48]
It's usually complex to add that interactivity, we'll see how it's actually added. It's not just using JavaScript or something like that, it's kind of like most things email it's an old school approach to adding interactivity to some markup on a web page. It can be harder to track depending on what you're doing.

[00:05:06]
You have to think more deeply about how you're tracking engagement, set up triggers for those different interactive states to let you analyze how people are using those emails. And then, more often than not, it tends to be flashy instead of functional. So there's no real goal behind the campaign, other than to make it flashy and create some buzz around your brand or something like that.

[00:05:28]
So, I would suggest if you're thinking about adding interactivity consider why you would wanna add that interactivity. If there's a real goal behind it, if you're providing some sort of functionality that people really are asking for in your email. Or you wanna show off and it actually works for your product or your company, then that's awesome, definitely check this stuff out.

[00:05:48]
But if not, you're just trying to be flashy and stuff, you can oftentimes get away with just having a nice animated GIF in there. Or, getting them out of the inbox and back on your website or in your application where you can do all that stuff a lot better and a lot more readily than you can inside of email.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now