![\"\"](\"https:\/\/static.wixstatic.com\/media\/0cf246_ff72c641579244c6bab20cf1e8fcb857~mv2.gif\")
<\/div>\n<\/div>\n<\/div>\n\u00a01. Image ref: litmus.com<\/h6>\n
And just like that,\u00a0KAPOW!<\/strong><\/em>, the Kinetic Hero saves the day.<\/p>\n \n B&Q had great results from their debut Kinetic email;<\/p>\n 18% increase in responder-to-open rates, with 32% increase among club members.<\/strong><\/p>\n<\/li>\n 42,000 click-throughs to the website.<\/strong><\/p>\n<\/li>\n 30% decrease in time spent on email.<\/strong><\/p>\n<\/li>\n<\/ul>\n (Click here for the full marketing report from Oracle.)<\/a><\/p>\n <\/p>\n 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.\u00a0 A regular email format would have seen users scrolling down through different sections, with the\u00a0information and links spread out across the email – the Kinetic Hero, however, had everything in one place.<\/p>\n \nB&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.<\/p>\n \n 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. Hamburger style menus<\/p>\n<\/li>\n Forms<\/p>\n<\/li>\n Graphs<\/p>\n<\/li>\n GIFs<\/p>\n<\/li>\n Polls<\/p>\n<\/li>\n Tap to reveal<\/p>\n<\/li>\n Flip \/\u00a0hover \/ carousels or slideshow images<\/p>\n<\/li>\n Embedded video and more…<\/p>\n<\/li>\n<\/ul>\n As you can see, Kinetic Heroes have a lot of work to do.<\/p>\n \n Just as superheroes have their different identities, i.e. Spider-Man and\u00a0Peter Parker or Superman and Clark Kent, Kinetic emails can be broken down into three different types:<\/p>\n \n 1. Kinect<\/strong><\/p>\n These are the emails that utilise CSS transitions and animations. A good example of this is the auto scroll carousels.<\/p>\n \n 2. Kinetic Interactive<\/strong><\/p>\n 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.<\/p>\n \n \n 3. Kinetic Effects<\/strong><\/p>\n This is where CSS uses different effects to animate or make the email interactive. \n 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.<\/p>\n \n For example, Pret\u2019s smoothie email is a good example of a Kinetic fallback.<\/p>\n Left is the interactive version and Right is the standard fallback:<\/p>\n A working example can be found\u00a0here<\/a>.<\/p>\n \nThe Outcome – How this Kinetic Hero Boosted Results…<\/h3>\n
\n
The Power of Kinetic<\/h3>\n
\nSome dynamic content examples that Kinetic email might utilise include:-<\/p>\n\n
Kinetic Heroes And Their Many Disguises…<\/h3>\n
![\"\"](\"https:\/\/static.wixstatic.com\/media\/0cf246_12eb850bb1eb4323bd990a0c633612e1~mv2.gif\")
<\/div>\n<\/div>\n<\/div>\n![\"\"](\"https:\/\/static.wixstatic.com\/media\/0cf246_15926289016e462a9eae1ab06a0e8d3e~mv2.gif\")
<\/div>\n<\/div>\n<\/div>\n
\nFor 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.<\/p>\n![\"\"](\"https:\/\/static.wixstatic.com\/media\/0cf246_1a85f83eae5a4716810f50c1ae6110f2~mv2.gif\")
<\/div>\n<\/div>\n<\/div>\nThe Fallbacks of Being a Kinetic Hero<\/h3>\n
![\"\"](\"https:\/\/static.wixstatic.com\/media\/0cf246_162df5c7ba7947e1ac2ee107ef547e5f~mv2.gif\")
<\/div>\n<\/div>\n<\/div>\n\u00a02. Image ref: freshinbox.com<\/h6>\n