What You Need to Know About Kinetic Email Design >


As mobile email opens continue to grow, the challenge of converting glances to skims, skims to reads, and reads to clicks is ever-challenging. Enter: Kinetic Design, a coding technique for creating high-impact interactive emails—right in the inbox.

For those looking for that X-Factor to bring their emails up a level, look no further. Hover over animations and carousels of hero images are tell-tail signs that kinetic design is being used.

These interactive elements focus on not only improved click-through rates, but pumping up overall engagement with a little surprise and delight—as well as upping the overall time spent on the email.

We first tried some in-email interactivity with our annual BrightWave holiday card—and saw firsthand how it can skyrocket click-throughs and time spent on the page. Now our Art Director extraordinaire Jason Crawford has figured out how to make hover-over possible in this “test” email. We can’t wait to put this feature to work for our clients.

The Tech Powering Kinetic

Kinetic email at its core is a coding technique via some creativity with HTML and CSS—HTML5 and CSS3 to be more specific.

Grrrr: A Caveat

There is a catch. The kinetic effect ONLY works with Gmail, Yahoo Mail, Gmail, Outlook.com, AOL, Outlook 2003, iPad, and a few android clients. For many marketers these clients will represent a large portion of their audience, so we consider kinetic design worthwhile for improving engagement and click-through rates. Readers on other email clients will see a static image instead of a subtle surprise of kinetic.

Kinetic Email Takeaways

  • Coding tactics that allow an animation within an email for many of today’s most popular email clients.
  • Keep the animation subtle, a surprise & delight to a selected group with supporting devices. Viewers with non-supported devices should not miss out on anything important.
  • Those that implement can expect great click through rates, and longer times engaging with an email.



Leave a Reply
(will not be published)