Top digital agency, bigdog is based in the U.K., and has Fortune 500 clients like Pret and Feld Entertainment which presents Disney On Ice. The agency is at the forefront of digital marketing– and their team has done some particularly impressive things using email marketing. This post contains some technical mojo, so read on to learn how this agency does it.
We talked to Jon Carey, Lead Front End Developer at bigdog, about how the agency is using interactive emails to deliver marketing assets that are totally unique and different and these assets really excite their clients, and their clients’ customers.
bigdog has won many national awards, like Brand Republic and the DADI awards, for its email marketing. The agency’s work is inspiring, and will encourage you to think about email marketing in a whole new way.
For this post, Jon sat down and talked to us about how interactive emails can increase engagement, and keep brands at the forefront of email marketing, and marketing in general.
Why interactive email?
JC: About a year ago we started investigating and developing advanced techniques with the aim of delivering enriched emails which users can interact with. We’re now prototyping and developing interactive emails regularly, delivering content to users which very few have seen before.
We started by introducing CSS animation into an email. We kept it simple at first and developed a really nice, slick animation for the header of an email campaign.
You can see the animation by checking out this link. (If you’re in Chrome or Safari, you’ll see the interactive version. In Firefox, you’ll see the fallback version).
How do you technically create an interactive email?
JC: Some of our junior team members haven’t experienced the challenges we’ve experienced in the past. Some of us that have been in the field for a really long time have pre-defined notions of what is and isn’t possible, but our junior team members don’t come from that background, they haven’t had those hurdles. They’re asking questions that have made us stop, think, re-evaluate, and look for solutions to some age-old problems. Lo and behold– it turns out there are.
We’ve been taking a look at how we can introduce some basic logic into the emails to detect user interactions. For example, if somebody clicks something, can we make something happen?
Using the “Checkbox Hack” and the general sibling selector we can style the content differently based on the checked state of a radio button, checkbox or a combination of both. The radio buttons and checkboxes are hidden from the user, but using labels we can change the state of those inputs which then triggers a change in style or starts an animation.
You need to create fallback content as well because these emails only work on the latest email clients. On a mailing list, maybe only 40-50% will see that content, so we need to make sure we provide fallback data and information for those that don’t see it.
Can you share an example of a successful interactive campaign?
JC: Pret was launching its Smoothie and Frappe campaign for 2015. The team wanted to create something that was engaging, something that was different and stood out. We decided to put together a prototype of an interactive email to show the client, and it really excited them.
Martin Skillings, the campaign’s art director sent me a scamp of what he wanted with the idea that we could use interactive emails for Pret:
From that, I went on and developed a very basic prototype of what we could offer. Once we’d gotten it up and running, we sent it over to the client, and they absolutely loved it.
From there, we developed the final version. Built upon the original prototype we developed the campaign further by introducing personalized images and optimizing the campaign for mobile.
You can see the interactive campaign by checking out this link. (If you’re in Chrome or Safari, you’ll see the interactive version. In Firefox, you’ll see the fallback version).
Originally, we tried using animated GIFs to show the cups filling up. This worked ok, until you went back to one you’d already clicked. Because the image was cached, it wouldn’t rerun the animation, it would just show you a full cup.
We achieved what we wanted using CSS animated sprites. For each drink we created a sprite sheet containing a sequence of images making up the individual frames of the animation. When these frames are played back rapidly, it gives the illusion of movement. This technique allowed us to play the animation from the beginning each time.
Like I said, we needed fallback content. In this case, we provided a fallback image of all of the drinks with a click through to the campaign landing page.
How does Campaign Monitor fit in to what you do at bigdog?
JC: One of the things we absolutely love about Campaign Monitor is how quick and easy it is to set up a campaign. Within moments the email has been imported and we can send a test to Litmus where we can view our email across multiple email clients and devices.
It’s this speed and ease of use that is essential to our rapid prototyping. If we were using another email client, it would take forever.
Another feature I love is Campaign Monitor’s cm_dontimportimage attribute. We’ve found this particularly useful for adding personalized images into our campaigns. This technique was used in the Pret Smoothie and Frappe campaign where the cup holder was personalized with the recipient’s first name.
For every unique name in the mailing list, we exported a personalized image which was then hosted on an external server. Using cm_dontimport on our image tag and a custom field inside our image source, we were able to serve a personalized image to those recipients with their first names.
What advice would you give to others on how to create great emails?
JC: For us, it’s about experimentation, really trying to push what you think is possible.
Revisit all of your preconceptions, and try to do something that takes you out of your comfort zone. It’s that ethos that has been the driving force behind the emails we’ve developed. The feeling has been contagious– once we’ve developed one idea, we’re onto the next. It’s a rapid process and very exciting. Don’t be afraid to fail, those failures in turn can inspire great ideas.
What can others learn from how bigdog uses email marketing?
- Push boundaries and question your assumptions – You may have preconceived notions about what will work and what won’t, but your assumptions might not be correct. At all times, you should be future-thinking, pushing boundaries and questioning your assumptions. Don’t be afraid to take risks– they pay off!
- Think about delight – bigdog is committed to impressing and wow-ing their clients at every turn, and they aren’t happy unless their client is truly delighted. How can you delight your audience using email? How can you give them something that will impressive them?
- Test and experiment – bigdog relies on tests and experimentation to try out new ideas. Follow suit and A/B test your design and messaging to make sure you nail your emails.
It’s clear that bigdog is pushing the boundaries on what can be done with email marketing, encouraging us to rethink how we connect with our customers, and how we can leverage technology to create the best possible experiences.
bigdog’s story shows that email marketing has a ton of potential, and that we can always uncover new ways to use it. As long as we push boundaries, focus on delighting our customers, and constantly experiment, we’ll be well on our way to advancing how we use email marketing.