{"id":1927,"date":"2015-07-08T18:29:28","date_gmt":"2015-07-08T18:29:28","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=1927"},"modified":"2016-08-17T22:32:21","modified_gmt":"2016-08-17T22:32:21","slug":"the-dawn-of-kinetic-email","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/the-dawn-of-kinetic-email\/","title":{"rendered":"The Dawn of Kinetic Email"},"content":{"rendered":"

\"bnq-kinetic-banner2\"<\/a>
<\/p>\n

Although HTML email has been around for almost as long as the Web, email has often been regarded as the Web\u2019s ugly stepchild. The inconsistent and outdated HTML support<\/a> in email clients seem to reflect a mindset that as long as senders can place some images and text in an email, it\u2019s enough. Why ask for more? Apparently, email is not a medium for innovation.<\/p>\n

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\u2019 attention, they offered new and exciting creative avenues for email designers. <\/p>\n

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<\/a> using just HTML and CSS. <\/p>\n

In a press release, Oracle, the developer of the campaigns coined the term \u201ckinetic email<\/a>\u201d to refer to the techniques used. I personally like the term — \u201ckinetic email\u201d is catchy and appropriate.<\/p>\n

However, what exactly is kinetic email? And while we\u2019re talking about it, what isn’t kinetic? I\u2019d like to offer my perspective on what kinetic email is and open a discussion to move email innovation forward.

<\/p>\n

\nCan’t wait to get started with kinetic email?
\nTry out the Image Carousel for Email Builder<\/a>.\n<\/div>\n


<\/p>\n

Beginnings of Kinetic Email<\/h4>\n

In the past, although email clients such as Apple Mail had robust modern HTML and CSS support, the vast majority of email clients didn\u2019t. This forced email designers to code for the lowest common denominator.<\/p>\n

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 \u2013 and later the similarly capable Android phones \u2013 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. <\/p>\n

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 \u201cprogressive disclosure<\/a>\u201d in email where hidden email content in mobile could be selectively displayed when the recipient tapped on a button.

<\/p>\n

\"cm-progressive-show-hide\"<\/a>
<\/p>\n

In 2013, LinkedIn introduced a tool called Intro<\/a>. It was an add-on for the iPhone email client that inserted a toolbar at the top of an email containing information about the sender. The interactive nature of the toolbar seemed as if LinkedIn had modified the iPhone email client itself or somehow found a way to use JavaScript in email. It turned out the engineers at LinkedIn discovered a way to embed interactive CSS into an email<\/a> that would render in the iPhone email client!

<\/p>\n

\"intro_drawer5\"<\/a>
<\/p>\n

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<\/a>. I started the FreshInbox blog<\/a> to document these new techniques.<\/p>\n

Around this time, the email community also started experimenting with dynamic HTML and CSS techniques in email. Mark Robbins<\/a> famously created some fun CSS driven games<\/a> that work in Webkit based email clients and Jonathan Kim<\/a> gave a presentation on \u201cPushing the Limits of Email<\/a>\u201d at a Litmus workshop.<\/p>\n

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<\/a> or by using multiple layers of hacks to swap dynamic content with static content<\/a> when viewed in a more restrictive Webmail client.

<\/p>\n

B&Q Emails Drive Interest in Kinetic\u2019s Potential<\/h4>\n

The B&Q campaigns in 2014 brought a groundswell of excitement<\/a> 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.<\/p>\n

Oracle, which created the campaigns, termed the technique “kinetic email<\/a>“. After the B&Q campaigns, many other senders began implementing interactive and dynamic content into their campaigns as well.

<\/p>\n

Kinetic Email vs Interactive Email<\/h4>\n

Isn’t kinetic just a different way to describe interactive email?<\/p>\n

No. For two reasons \u2013 the term interactive email comes with some baggage and kinetic encompasses more than just interactivity.<\/p>\n

Interactive email comes with baggage because various forms of technologies have been called \u201cinteractive email\u201d \u2013 email that required users to install proprietary software to experience interactivity; emails that contain video and animated gifs; and emails with call-to-actions<\/a> 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\u2019t consider any of these true kinetic email. <\/p>\n

I also believe that kinetic should include techniques that make an email dynamic but not necessarily interactive \u2013 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.

<\/p>\n

So What Really is Kinetic Email?<\/h4>\n

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:<\/p>\n