Dynamic and Interactive (Kinetic) Email Examples & Techniques

Examples, tips, live campaigns and experimental techniques.

Tutorials / Examples

Articles Support Complexity Fallback**
Animated Entrance Effects
Add impact to your email by having call-to-actions fly-in or pop-out.
F Easy Static assets
Animated Image Carousel
Timed animated image carousel with fade transitions.
F Easy Fallback section
Carousel w/Add to Cart
Requires :checked support. Works in kinetic clients* and Yahoo! Mail.
S Complex Fallback section
Hamburger Collapsible Menu
Implementing the Hamburger menu in email
(This version requires :checked CSS support).
F Intermediate Static menu
Hamburger Menu (Hybrid)
Hamburger menu (This version will work if either :checked or :hover CSS support is present - some mobile clients and ESPs support :hover but not :checked.)
S Intermediate Static menu
Hotspots in Email
Interactive hotspots in email that display more context.
S Intermediate Fallback section
Image Carousel for Email
Uses :checked selector and works in kinetic clients* and Yahoo! Mail. Features a builder tool.
S Complex HTML in fallback section
Image Carousel for Mobile
A simple example since it only works in kinetic clients*
F Intermediate First Image
Image Carousel (:hover based)
Uses :hover vs :checked selector. Selection on Webmail active only while cursor is over thumbnail.
S Complex First Image
Ken Burns Effects
Add pan and zoom effects to your email.
F Easy Static image
Interactive Puzzle in Email
Create fun and unique experiences in email.
F Complex Static image
Rollover Image
Rollover images that is supported by Gmail webmail and Yahoo! Mail
S Easy First image
Rollover (Tap) to Reveal
The reverse of rollover.
S Easy Revealed image
Tabs for Email
Requires :checked support. Works in kinetic clients* and Yahoo! Mail.
S Complex First tab
Tap to Switch Image
Provides a tap area in mobile to switch between two images.
S Easy First image
Support
F: Only works in fully kinetic clients. Read this article for background.
S: Works in fully and semi kinetic clients (ie. some webmail clients)
Fully kinetic clients support animations and interactivity. They are primarily the iOS (iPhone, iPad) and Apple Mail email clients. Read this article for background. See chart for details.
* *  Read this article about discussion of kinetic email fallback strategies for clients that do not support interactivity..


Tools

Image Carousel for Email Generator
Create a thumbnail driven image carousel that will render in many major email clients.
Rollover Image for Email Tool
Create interactive rollover images that work in Webmail.



Tips

Articles Notes
Four Interactive Email Fallback Strategies Strategies and techniques on how to display interactive content when viewed in non interactive email clients.
Targeting The New Responsive Gmail With CSS The updated Gmail and Gmail App support media queries but not interactivity (mostly) or animations. Learn how to target these clients.
Tracking User Interactions in Email With Google Analytics Use these techniques to guage if your recipients are engaging with your interactive designs.
Bulletproof Solution to Hiding Mobile Content when opened in Non-Mobile Email Clients Hiding content in the various email clients require using several techniques.
How To Hide Checkbox And Radio Inputs In Email Hiding form elements in email is different than hiding divs and other content.
CSS Animations in Email Introduction to CSS animations and vendor prefixes in email

Live Campaigns

Articles Notes
B&Q Kinetic Carousel  (Source) The ground breaking interactive campaign by Oracle that got everyone's attention.
B&Q Falling Snow  (Source) Email featuring falling snow and flashing cards by Wax Media
Bobbi Brown Product Hotspots  (Source) Tapping the hotspots show product details and price.
Burberry Scarf Personalizer  (Source) Recipients can customize their scarf in the email.
Burberry Animated Hero  (Source) Hero with fade, zoom and pan effects.
Email on Acid Infographic with Hotspots  (Source) Email Marketing Insights infographic with interactive hotspots.
Email on Acid Puzzle in Email  (Source) Unlock a four letter code to get a coupon.
Hamburger Collapsible Menu  (Source) An eye opening technique by Jerry Martinez
HP ENVY Animated Carousel  (Source) Animated gallery of images of the All-in-One PC
Litmus Live Twitter Feed in Email  (Source) Realtime twitter feed using external CSS with animated gif fallback
Nest Product Carousel  (Source) 3-item carousel with navigation arrows.
Pret Interactive Smoothie Cup  (Source) Select your favorite flavor and watch the smoothie cup fill!
Taco Bell Breakfast Scolling Email  (Source) Scroll through the morning of 3 friends as they make their breakfast decision.

Experimental

Articles Notes
Sonic the Hedgehog Kristian Robinson creates versions of the classic Sonic game that plays in email.
Minesweeper Play the classic PC game in an email. By table tr td.
Star Wars AT-AT Walker Cool CSS animation adapted for email.
Pagination for Email Convert a long email to a paginated format in mobile.
Splat the Fly Fun splat the fly game that works in Webkit based clients by Mark Robbins
ThWack-a-Vole Follow up to the Splat the Fly game by Mark Robbins with score counter
SVGs in Email Good primer of SVG in email by Anna Yeaman at STYLECampaign.

Copyright 2016 FreshInbox