Is it a bird? Is it a plane? No it’s Kinetic Email!
“Kinetic email… what’s that?” we hear you say. “That must be the latest in email development!” Well… actually, despite sounding like a new type of superhero, Kinetic emails (or as we sometimes call it ‘Captain Kinetic’), have been around for a few years now.
Kinetic email was coined by the Oracle Corporation in July 2014 for their B&Q email marketing campaign. The email they produced used HTML5 and CSS3 and contained an interactive hero image carousel, which was triggered by mouse hover buttons.
And just like that, KAPOW!, the Kinetic Hero saves the day.
The Outcome – How this Kinetic Hero Boosted Results…
B&Q had great results from their debut Kinetic email;
- 18% increase in responder-to-open rates, with 32% increase among club members.
- 42,000 click-throughs to the website.
- 30% decrease in time spent on email.
(Click here for the full marketing report from Oracle.)
The clever part of using a kinetic carousel image which housed all the information and links meant there was less time spent in an email by the user. A regular email format would have seen users scrolling down through different sections, with the information and links spread out across the email – the Kinetic Hero, however, had everything in one place.
B&Q successfully decreased the time spent in email and upped the click through rate, by directing the user (via the interactive carousel), without the need to scroll through the whole page.
The Power of Kinetic
So the basis of Kinetic images within email is the use of CSS3 transitions and animations, which opens up lots of possibilities for captivating or interactive emails.
Some dynamic content examples that Kinetic email might utilise include:-
- Hamburger style menus
- Forms
- Graphs
- GIFs
- Polls
- Tap to reveal
- Flip / hover / carousels or slideshow images
- Embedded video and more…
As you can see, Kinetic Heroes have a lot of work to do.
Kinetic Heroes And Their Many Disguises…
Just as superheroes have their different identities, i.e. Spider-Man and Peter Parker or Superman and Clark Kent, Kinetic emails can be broken down into three different types:
1. Kinect
These are the emails that utilise CSS transitions and animations. A good example of this is the auto scroll carousels.
2. Kinetic Interactive
These type of emails are where the user actually interacts with the email. The example below has a collapsible hamburger menu. Other examples could be a carousel where each slide has a clickable button.
3. Kinetic Effects
This is where CSS uses different effects to animate or make the email interactive.
For example how hovering over this B&Q example which used CSS animate to change the background colour, giving the impression of the wall paint changing colour.
The Fallbacks of Being a Kinetic Hero
Captain Kinetics possible Kryptonite could be Outlook (or ‘Baron Outlook’ as I like to call him). The majority of email clients work well with interactive and dynamic CSS techniques. Outlook however, does not and would rely upon the fallback code and images that are in place, mean that the kinetic image becomes a static one…which is obviously less engaging.
For example, Pret’s smoothie email is a good example of a Kinetic fallback.
Left is the interactive version and Right is the standard fallback:
A working example can be found here.
If you’re worried about your Kinetic Hero image rendering properly in an inbox, never fear, an extensive email client support list produced by FreshInbox, for interactive and dynamic CSS can be found here.
The Conflict – Kinetic vs AMP
Captain Kinetics potential arch nemesis could be Gmail (to keep with the theme, we’ll call it ‘Ghoulmail’).
Google recently announced that they are bringing their Accelerated Mobile Pages (AMP) framework to Gmail. AMP for Email is open source code, it will allow developers to embed widgets in emails that are constantly up-to-date and include actionable functions that work without leaving your inbox. This could include actionable forms where the user could for instance RSVP to an event, schedule an appointment, or fill out a questionnaire right from the email message.
Aakash Sahney, Gmail’s Product Manager, stated:
“AMP for Email. This new spec will be a powerful way for developers to create more engaging, interactive, and actionable email experiences.”
The jury is still out on AMP for Email, the majority are worried about security and spoofing the end user with fake links. Others are quick to respond that there are plenty of safeguards in place with fast response times to fake emails.
AMP for Email is due for release later on this in 2018, and some companies already developing features for AMP for Email include Pinterest, Booking.com, and Doodle.
The Vision
Although Kinetic emails have been with us for a few years now, it’s possible they have not reached their full potential. A well planned campaign could utilise the unique attributes of Kinetic design or styling, and push through its current boundaries.
Google’s AMP for email could also give Kinetic a boost or refresh of new ideas, being a very close competitor. Also what advancements might Kinetic utilise with updated HTML and CSS standards? Let’s hope the email clients allow for more CSS3 transitions or animations to keep taking email forward.
Kinetic emails are quite adaptable with good fallback support on standard imagery, so why not try out some Kinetic ideas today… trust your senses and be use a kinetic hero.
