| 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 |
| Faux-Video Animated video using jpeg sprites. |
F | Intermediate | Fallback section |
| Filmstrip Interactive Technique Only fully interactive technique that works in the Gmail Android App. |
S | Simple | 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.. |
| 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. |
| 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 |
| 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 Halloween Email | Scroll to walk the avatar to safely deliver an email. |
| 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. |
| Articles | Notes |
| Paint by Numbers | Table tr td created this fun coloring activity email. |
| 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. |