Getting interactive with ActionRocket and the BBC

This FF episode was sponsored by Netcore. 

Matt Helbig: What's up, Email Geeks? Welcome back to another episode of Feedback Friday, this week with Jay from ActionRocket. Tell us a little bit about yourself.

Jay Oram: I'm the senior coder and interactive email specialist at ActionRocket, which means I spend all my time trying to find new stuff to make the emails look cool.

When I started, the idea was that I would just learn how to code emails, and then I realized that there was so much cool stuff out there. I kept badgering my managers to try new stuff that they were just like, okay, well you just go away and sort it out, and then we'll pitch it to some clients. If they like it, we'll do it. And that's what we did.

Matt Helbig: Sweet. I feel like the BBC page on our website has become the go-to spot for interactive email showcase, honestly. I'm really impressed with what you guys have done for them.

So tell us a little bit about this email.

Jay Oram: BBC has great assets when they come to do things like this because they've been working with David Attenborough who creates all the nature emails. They always have amazing assets and pictures, which is why they come to us and they say, we've got all these amazing pictures and these cool ideas.

And in this instance, we had the five episodes. And they were like, how can we put as much of this information in an email to get people to want to click on it, to want to be able to look at the interesting episodes that we've put together?

We've had a long relationship with BBC and they know that we're good at designing. They're happy with the work that we've done before, so they come to us and say, just do whatever you want and we'll pass it back to our stakeholders. If they're happy with it, we'll go forward. 

Sam, who is the designer for this email, won a Litmus award for the design work he's been doing. And so they trust his ideas of what the design could look like. And I am always testing out new things and constantly sharing it with Sam and the other designers at ActionRocket. Then, the two eventually line up. 

So in this case, we had the interactive accordion and some CSS, animations, and checkboxes, and stuff like that. Sam kind of knew all the things we could do and then he creates a design and he says, pretty sure we can do this, Jay, is that right? And then we go back to the BBC and they're happy with it. So we start designing and building.

Matt Helbig: It was really interesting to see all the different kinds of tools that you guys use with an email in this email.

I mean, there's custom web fonts, there's live text, there's interactive stuff. Do you have to sell this to the client or are they letting you sort of run with what you guys want to do each time?

Jay Oram: The live text, custom fonts, CSS, animation are all things that we work with all of our clients to push whatever is the latest standard for email. So, having live text and making it as accessible as possible, not having image buttons and that kind of thing is something that we try and promote from the very beginning of starting with the clients.

So they're kind of on board with all of that part. The sell-in with BBC is not too difficult because they've seen the stuff we've done before and they kind of know what we can do. So, whenever they do come to us with something and say, do whatever you want, they're expecting something completely different. 

If anything, it’s a little bit harder for Sam and the designers to constantly be coming up with these new ideas. But like you said, there's the checkbox hack that they call it to get everything to interact together. Then the CSS animations make the posters move, live text, live buttons. There's quite a lot of stuff in there when you think about it...background images.

Matt Helbig: How difficult was something like this background image, ‘cause that is the one thing that I don't know if I can wrap my head around. And I like the attention to detail where there's some transition effects or the images also have some background colors here.

Jay Oram: Yeah. So, there's a transition between the background images. Once you click on the accordion that's relevant for it. This one pushed us a little bit harder because you usually remember with the checkbox hack that you try and keep everything kind of flowing together.

So if, for example, if you click on the volcanoes, the next part in the code opens and then maybe something after that would animate, and with that means that we can keep the labels and the inputs in the right places so that it works on as many clients as possible.

But with the background image, because that was first in the code, it meant that we had to move all of the inputs above everything else. So it wasn't inline and then everything that came after it got affected. So we hid the inputs at the very top and then the label for the checkbox is on that accordion bar, and then when you click on that, that then sets off a chain of reaction of, change the background image, and open that bar for the accordion.

They've all got subtle transition effects and animations that slowly opens, slowly closes, slowly fades between background images. Bringing the user interface, design animation basics that you can do on the web into email is the whole idea.

Matt Helbig: It felt really native, especially on a phone. It felt really natural. And I do think that attention to details, the transitions make the email feel better. It's not snapping as much as some of the interactive stuff that I tend not to really go towards. Smoothing out those transitions makes it feel a lot better and it reads a lot better.

How long does something like this take to build? How much testing is involved? Obviously, there's fallbacks involved. So, does that become a concern with the amount of timing that things like this take?

Jay Oram: Because we've been working with clients for a while, including the BBC, they kind of know that there's a bit of a lead time.

And with these kinds of projects, especially with the big nature programs that the BBC put out, they know two, three months in advance before the episodes are gonna go live and the launch date. So there's a huge amount of marketing that is happening behind the scenes before the episode becomes live, and we're one part of that.

We’re given the assets and Sam will create two, three concept designs, think about all the things that they've told us they want it to be included, and then there’s kind of a couple of two, three, four back and forths between the designers to do things.

At every step when Sam's designing something, if he's unsure if he can actually do it, he'll drop me a message or quick meeting and discuss is this possible? Maybe we could do this instead. 

The design for this one actually came about after...we both watch things on Disney+ and they had a Marvel screen where they had vertical lines with each movie on. So they had the Thor movie or the Avengers movie, and then when you clicked on it, the line expanded. So that was kind of where the idea came from. Sam rightly so, realized it wasn't going to work on mobile because squeezing five really thin lines in on mobile, and then trying to expand them all horizontally, wasn't going to work.

So, changed it to this more traditional accordion where it gets bigger. There's kind of a process of trial and error and thinking about ideas, and just throwing stuff at each other to kind of figure it out. Usually a couple of weeks, maybe three weeks on a big project to kind of get the design sorted, and all the way through that, I'm part of the processes with the developers to see what is possible. 

In this case, because we wanted to make sure it was possible, I made a quick proof of concept just by not adding any assets or loads of texts or anything, literally just the bare bones. Can I open a carousel and an accordion this way? Can the background image change? All those kinds of little transition effects and CSS that we tried to play with. 

So I kind of had all that ready in my back pocket before they signed off the final design and said, yeah, go for it, and then the actual build itself kind of takes maybe two or three days because Sam's had all that time to work on the copy and they maybe got a copywriter in, or the images he's already put together for the design to be signed off. So really my step is the quickest one of the two or three days of building. Testing-wise, we Litmus and Email on Acid to make sure we cover as many different devices as possible.

With interactive emails, you need to be at click and do things. So the devices tests on Litmus and that could give us, is it interactive in the right place? Does everything look okay? Does the fallback load correctly in all the right places, and does it look correct in all those places?

I've got my Macbook, which I work on, two PCs and six or seven mobile phones with as many different email clients on them as possible.

So the final check is running them through all those live devices. And then another check on top of that is we give it to another coder on the team and they run through everything again. I double-check it, triple-check it with live devices, and then we send it to another coder and they do the check-in as well. So, altogether, the testing, and then if anything comes up, changing it, it's probably about a day's worth of work.

So probably a week, four or five days, working week kind of thing to start from the design being done to the build being completely finished and signed off. And then we send it to the team and then they have to implement it in their ESP. Inevitably, something comes up in that testing. 

I think in this case, the footer itself, they were pulling in with some AMP scripts in Salesforce. Because the width was slightly different to the width that we designed the email, we then had to quickly change a few bits and pieces in that just to get it. ‘Cause it was kind of a standard footer that they use on everything for legal reasons.

So that was just something that we had to kind of work with and fit around. So, probably a month to six weeks is probably, from getting assets to delivering the final, full interactive build with all these parts in it.

Matt Helbig: It's awesome that you can have that one-on-one communication with the designer throughout this process and work together with a team like that.

I feel like some people end up just handing off emails or don't have that designer resource. So it's interesting to see how much time and effort goes into an email like this. How do you prove the ROI on an email like this that takes this long to make?

Jay Oram: The team at the BBC try and give us some feedback. They give us what they think worked well in terms of data on, was it worth doing interactive versus not interactive? Obviously they have the, anyone that got the static fallback version would be the one group, and then anyone that got the interactive version...the way they tell the difference between that is by using different links on the fallback and the interactive.

So, if they get more clicks on one, they know it's that than the other ones, so they can compare the difference. In this case, the interactive one got more clicks, so overall it performed better. There wasn't a control group that only got static and a control group that only got interactive. They can only work on the clicks. But they have an audience breakdown that they know the people that are in the audience. So they use the built-in information that's in Salesforce, and over the time of working with us, we've probably lots of different return paths, Email on Acid, Litmus, to test out different newsletters and campaigns to see what the audience devices breakdown is.

And they're confident that there's quite a large number that we'll get this fully interactive version on Apple Mail, iOS Mail, WebKit, if they get to be online...not as big an audience get the fallback. So, that’s the kind of data that we're working on. I know that from this email itself, they had, 34% of people that clicked through to iPlayer, watched all five episodes, so that's quite a large amount of people that got drawn in and then went to it.

And I think there was quite a high percentage, from their point of view, they want to get people to use iPlayer, which is their online video streaming service. So this email enticed more people than the other iPlayer emails to go on the website and sign in and use an account for the first time.

So it was kind of always working to grow the audience. So those are the kinds of KPIs that we get to back up using this kind of thing. The BBC don't have a massive budget, and they kind of save these interactive emails for the big hit programs that they really want to push. They really want to make a big deal out of maybe five or six a year or something.

Matt Helbig: Looking at that content, that type of media, it felt really natural, like interacting here and then going on to that landing page and seeing some of the same sort of content.

Is there anything else that you might want to change if you had a little bit more time?

Jay Oram: Every single time I build something, there's always like, oh, I want to change this, or how can I do that a little bit better? This one, the way the accordion is set up, it doesn't actually let you click on it to open it and then close it using the same button. It's just the problem with the way that the checkboxes work. You can click on one, but then you can't unclick it.

The way that we coded it meant that so that we could have all of the background changes and the transitions and things meant that what I would need to do to be able to make that happen would be to copy that first bar with the header, the background image and the pulsing, and have almost a double. 

So once you clicked on it to open a different button would appear that you could click to close it, but in exactly the same place. Either we didn't have the time because they were about to launch it or the more code that we add, the heavier the email gets to load. Even though the interactive version wouldn't show on Gmail, all of that code still is in the file when we want to try and keep it below that hundred kilobytes. 

So I'm always wary of adding more things that we don't have to. It's always a bit of a balancing act between what we can and can't do. And another thing that I always want to do, but it's always difficult is making it more accessible. 

One thing that we’ve been trying to work on more, not necessarily of interactive emails, but for normal emails is being able to use the keyboard to navigate. In this case, it doesn't really work as well as I would have hoped it to be using the keyboard to navigate. 

But apart from that, it pretty much ticks all the boxes if you were to use it as a screen reader or visually if there's any color blindness or different ways of visually seeing it, or if the images are turned off or things like that, all of those things. They look good enough, if not as good as possible with what's going on. There's always little things, but nothing major that would have had a major impact.

Matt Helbig: Yeah, this one looked really clean and just poking around the code, I felt like it was pretty lightweight compared to some of the other interactive emails I've seen where they've added a lot more code and stuff like that.

On the fallback side, do you sort of build the fallback into this content or is it a whole separate piece of the email?

Jay Oram: In most cases, we try and make it so that the interactive content is shared with the fallback. In this case, the BBC team weren't happy with having all of the accordions open in that format that they were in and making a really long email.

So in the end, we went with a different fallback design to the interactive design, and we couldn't share the resources as much as we would have hoped. Like you said, we made sure that everything was as light as possible in the code anyway. So, effectively adding all the content again, wasn't like doubling the whole way of the email.

Matt Helbig: Are there any resources that you might have for people that might be interested in getting into interactive emails?

Jay Oram: So I started by literally inspecting as many different interactive emails as I could and find in the code, cutting everything back to the bare minimum. 

The Really Good Emails database with all those interactive emails where you've got the view live code - go in there, strip it back to just the CSS and just the interactive bit, and then keep taking it back until there's literally just the bit that does the movement and that kind of starts your process off.

FreshInbox, that website and the tools that they put together. Justin Khoo put that together. All of the resources on there are really good. Mark Robbins’s Good Email Code website has got some stuff on it, and then he's done a lot of interactive things. So, following what Mark's working on is a good resource.

I've written a number of blogs on the Email on Acid blog, Campaign Monitor, and ActionRocket’s own blog, which is called Email Design Review. They all have breakdowns of loads of different parts of the interactivity, whether it's an accordion or hotspots or a live search bar or anything like that, they're all kind of in there.

And then also the basic elements like a really comprehensive guide on CSS animation for Campaign Monitor. So, break down every single part from how you declare the animation to how to work out a cubic-Bezier if you want to change it and top-level, so you can get started, but then also drill down into every single element so you can see exactly what this is doing.

I think I went away and looked at the web and tried to find tutorials on CSS animation, Cssr, and any HTML attributes that are not as used as much and kind of learn as much as possible from the web, and then try to get stuff in the web to work in email.

If you're working on emails that you only want to work in WebKit, Apple Mail, iOS, or if someone wants to view in the browser, then you've got quite a big range of things from CSS, transitions, animations, transforms. Anything CSS-wise pretty much works in Apple Mail. So, you've got the whole web at your fingertips to kind of learn that stuff.

I joined the Email Geeks Slack group before I actually got a job at ActionRocket, the first developer job I got in email, and learned a lot from that Email Geeks Slack group, and got my job through that as well. So, anyone getting into it, go there and ask as many questions as you can.

Matt Helbig: Do you think interactive is still the way to go or is it worth exploring some of the AMP stuff? How do you see that stuff working together in the next couple of years?

Jay Oram: Everything that is out there should only ever be used if you've got the perfect use case for it. So, even though we could do this all the time for every email and there's hundreds of thousands of things that we could do and new things like AMP or parallax scrolling or all these kinds of things...they're all tools that we've gathered together, but it's the use case.

If there's a specific use for it, then go for it. But don't just use the interactiveness just to hopefully build up your emails or get a better return on investment. I think Elliot mentions it a lot where if your content’s rubbish, making it interactive is not going to make people want to click on it more.

Have good content, have a good subscriber base, have a good list, and then do the interactive stuff. Once you've kind of done all those other things, it's like the icing on the cake to kind of get that little bit extra out of it. 

Because I, every single day, work on these interactive emails, I think it happens a lot. But then I talked to loads of other email geeks and email marketers, and they're not even thinking about interactive. They've got data they're working on or personalization or hundreds of other things. I think it's growing, and in all of the reports that come out online in the email industry and how it's changing, they seem to say that interactive email is a growing thing with AMP now being supported by more email service providers and more email clients.

At ActionRocket, we're getting more interested in creating AMP emails. So, I can only imagine that more people want AMP emails.I know that I have a very kind of tunnel vision view because all I do is interactive stuff and everyone talks to me about interactive stuff, I think it's a big part. But I know it's not a massive industry-wide thing.

If you're not sending interactive emails, that's not a problem. There's loads of other stuff that is definitely worth your time and putting an investment in, working on and working towards, and then working on interactive email afterward.

Matt Helbig: Thanks so much for taking the time today. I really enjoyed looking at this email and hopefully, we get to see some more ActionRocket emails in the wild.

Jay Oram: Yeah, there's lots of stuff out there. And if you look on our social channels, they share when we do work on things like this, and I would encourage anyone that wants to learn to look at the view online link, grab the code, pick at it, and then if you want to understand more then just fire some questions to me on the Email Geeks Slack channel, and I will try and help as much as possible.

Matt Helbig: Great! Thanks so much.

Jay Oram: Cheers!

Matt Helbig: See ya.