Email carousels: more opportunity for engagement
body.single div.blog .blogPageDetails .row.contain:not(:first-child) {margin-bottom: 40px;}@media only screen and (max-width: 600px) {body.single div.blog .col p > img {width: 100%!important; height: auto!important;}}
An increasingly popular trend in email is the use of carousels. They allow you to display much more information in an email, without having the recipient spend time scrolling down a lengthy message. They’re also good at maintaining engagement.
You may have received an email containing a carousel like this.
But did you know there is much more you can do by expanding on the basics of this technique?
You’re not limited to the standard looking carousel in the above example. With a bit of planning, a great design and a sprinkle of CSS animation, the possibilities are endless.
Here are some examples of what can be achieved by being extra creative and innovative. It’s important to let your mind wander and do something different, to achieve the most impact. And yes, they all work in emails that support interactivity.
Image Scaling
Combining the CSS scale() function with transitions, we can create a smooth effect which increases the size of the panel in view. Giving it the focus it needs while still being able to see the previous and next content.
Rotating Images
This incredible example uses a mix of the translate and scale CSS functions, along with animation keyframes, to create a rotating effect when the arrows are clicked, bringing the focused product to the front.
Parallax Cruise Journey
Using several backgrounds transitioning at different speeds the Parallax effect is created.
Going a little further, adding in hotspots along the way creates an informative journey for the user.
Rotating Image and Fading Text
Multiple effects happening at once can help keep things exciting.
This carousel links some cool image transitions with a content area that fades the text in and out, as well as a background colour change to match the mood of the image.
A view from Rob Pellow, Innovation Director
Why have interactivity in email?
We love a bit of innovation and interactivity in our emails but it’s not just because it’s cool (though it IS cool). There are some really good business and CRM reasons for it, too, including:
– It makes engagement measurable. Not every email is about getting someone to go somewhere else as quickly as possible. Some are informational, some are just for fun and some are about giving your users a chance to explore content before they make a decision about their next journey with you. Adding tracking to the ’soft’ click of your interactive elements will show you that a) people were interested or engaged and b) which content resonated with which audiences.
– It allows us to gather behavioural data for use in future communications. For example, if you had an email that allowed people to vote for which upcoming product release they were most excited about, you can take that simple in-email click and update the user’s record. Then the future emails; pushes; direct mail; in-app messages or landing pages you send to that user can be all about that product, or the product could be referenced in a small way.
Ultimately, emails never exist in isolation, if you want to increase the value of email for your users and increase the ROI for your business, then letting the user tell you what they are interested in the easiest way possible, will mean that you can get more and more relatable in your communications in every channel.