Although HTML email has been around for almost as long as the Web, email has often been regarded as the Web’s ugly stepchild. The inconsistent and outdated HTML support in email clients seem to reflect a mindset that as long as senders can place some images and text in an email, it’s enough. Why ask for more? Apparently, email is not a medium for innovation.
Recently, that perception began to change as designers began finding ways to implement interactive and dynamic content within email. These techniques not only captured recipients’ attention, they offered new and exciting creative avenues for email designers.
B&Q, a major UK retailer, attracted a lot of attention last year when the company sent a series of emails that featured fully interactive components using just HTML and CSS.
In a press release, Oracle, the developer of the campaigns coined the term “kinetic email” to refer to the techniques used. I personally like the term — “kinetic email” is catchy and appropriate.
However, what exactly is kinetic email? And while we’re talking about it, what isn’t kinetic? I’d like to offer my perspective on what kinetic email is and open a discussion to move email innovation forward.
Beginnings of Kinetic Email
In the past, although email clients such as Apple Mail had robust modern HTML and CSS support, the vast majority of email clients didn’t. This forced email designers to code for the lowest common denominator.
The launch of the iPhone changed everything. The iPhone email client, like Apple Mail, supported modern HTML5 & CSS3. However, the immense popularity and adoption of the iPhone – and later the similarly capable Android phones – gave designers a reason to create email designs tailored for the mobile screen. Using media queries, designers were able to create mobile optimized responsive layouts.
Once designers started to experiment with responsive layouts, they discovered CSS tricks that allowed email to be interactive and dynamic. In 2011, Campaign Monitor posted an article on implementing “progressive disclosure” in email where hidden email content in mobile could be selectively displayed when the recipient tapped on a button.
I began experimenting to see if the same techniques could be implemented in other email clients as well. Surprisingly, because most email clients support the CSS :hover selector, I was able to implement simple interactions such as rollover images in Webmail. I started the FreshInbox blog to document these new techniques.
Around this time, the email community also started experimenting with dynamic HTML and CSS techniques in email. Mark Robbins famously created some fun CSS driven games that work in Webkit based email clients and Jonathan Kim gave a presentation on “Pushing the Limits of Email” at a Litmus workshop.
That said, the absence of suitable fallback mechanisms prevented more advanced concepts from being widely used in email campaigns. In many cases, the more ambitious designs would render badly in Outlook or Gmail.The email design community eventually found ways to work around these limitations by simply hiding dynamic content in Outlook using conditional comments or by using multiple layers of hacks to swap dynamic content with static content when viewed in a more restrictive Webmail client.
B&Q Emails Drive Interest in Kinetic’s Potential
The B&Q campaigns in 2014 brought a groundswell of excitement to innovation in email. It was the first time email campaigns from a major retailer featured immersive, dynamic, and fully interactive content using HTML5 and CSS3. The series included a carousel with multiple thumbnails that revealed different layers in the hero image when the user tapped or hovered the cursor on it and an automatic sliding carousel that contained tappable areas next to products that displayed a bubble with more information when tapped. When viewed on non-supported clients, an alternative layout was displayed where all the content was visible so that recipients using these clients could still get the message.
Oracle, which created the campaigns, termed the technique “kinetic email“. After the B&Q campaigns, many other senders began implementing interactive and dynamic content into their campaigns as well.
Kinetic Email vs Interactive Email
Isn’t kinetic just a different way to describe interactive email?
No. For two reasons – the term interactive email comes with some baggage and kinetic encompasses more than just interactivity.
Interactive email comes with baggage because various forms of technologies have been called “interactive email” – email that required users to install proprietary software to experience interactivity; emails that contain video and animated gifs; and emails with call-to-actions that spur the user to click to landing pages and do an interactive activity such as vote, take a survey, or play a game. I wouldn’t consider any of these true kinetic email.
I also believe that kinetic should include techniques that make an email dynamic but not necessarily interactive – such as CSS animation and transitions and time triggered display of content. Although video and animated gif images can be considered dynamic, I feel that kinetic should be limited to the use of CSS to dynamically control elements in email and not simply display dynamic media.
So What Really is Kinetic Email?
At the core, kinetic email encompasses interactive and dynamic designs in email that are implemented completely in HTML and CSS. Going further, we could categorize kinetic email into three distinct types:
Email that uses CSS transitions and animation to deliver key content in a campaign. An example is an automatic sliding carousel with each slide displaying a different set of content.
- Kinetic Interactive
Kinetic email with the addition of elements that respond to user action. For example, user driven carousels containing navigation buttons, collapsible menus and elements that use progressive disclosure. Kinetic interactive emails would typically involve use of the :hover, :active, :focus or :checked CSS selectors.
- Kinetic Effects
The term kinetic effects can be used when CSS animations and interactivity are mainly used to embellish content. For example, highlighting content upon hovering, falling snow and CSS entrance and attention focusing effects.
Kinetic emails also often incorporate fallback techniques that ensure that these emails do not render poorly on email clients that do not support kinetic content. For example, kinetic content may simply be hidden or an alternative simpler static layout may be displayed.
Examples of Kinetic email:
(Due to a CSS sibling selector bug some of the examples below require a hack to work in iOS9)
What is not Kinetic?
Anything that isn’t HTML or CSS, dynamic and supported natively by an email client is not kinetic.
Kinetic email is not:
- Animated gifs
- Video in email
- Interactive content that requires non-native plugins
- Image based “realtime” content that is generated on the server when the email is opened. However, kinetic email can leverage attributes of realtime (see twitter feed example above)
- Off email interactivity. Emails that contain content such as placeholder images that elicit a click by the user to a landing page where the real interactivity resides
What Does a Kinetic Email Client Need?
Email clients can also be classified by their ability to support kinetic email content.
A kinetic or fully kinetic client supports most of the features that enable kinetic email.
These features include:
- Absolute and relative element positioning
- CSS animations
- CSS transitions
- CSS pseudo-class selectors that enable interactivity — :hover and optionally :checked
- CSS selectors that aid interactivity, primarily the sibling selectors (+) and (~)
This would include the native iOS email clients, the pre-Android 5.0 native email clients, Apple Mail, Outlook for Mac and Outlook for iOS. In fact, AOL Mail would fall in this list except for its lack of support for CSS animations.
Semi-kinetic or kinetic-lite clients support a minimal set of kinetic email features.
At a minimum, this would include:
- The :hover selector
- Ability to selectively hide content, such as using display or overflow
- (Optionally) sibling selectors
The clients in this category include Yahoo! Mail, Outlook.com, AOL Mail, and the consumer webmail version of Gmail.
The remaining clients would fall into the non-kinetic category. The three standouts here are Outlook 2007/2010/2013, the business webmail version of Gmail, and the Gmail mobile apps.
What’s Next for Kinetic Email?
Although kinetic email is not a substitute for a well-crafted and targeted campaign, when used appropriately kinetic email can bolster a brand’s message and increase the recipients’ engagement and delight.
I believe that kinetic email has the potential to attract new interest to email – especially from developers. Who knows? The email client developers at Google, Yahoo! and Microsoft might even begin to take HTML support seriously.
If you have thoughts on what kinetic email should be, feel free to share your opinions in the comments below.