Splat the fly
I’ve been talking a lot recently about interactivity in emails. Things like embedded HTML video, progressive disclosure and image carousels have really caught my eye, so I decided to try and create an interactive game contained 100% in the email.
The concept
The concept for my game is pretty simple, a fly moves around the screen, if you splat they fly (by hovering over it or tapping it on a smartphone) a link is displayed where you can claim your prize.
The theory being if you can engage the user in the email they’re already partially committed and more likely to follow through to the site. The sense of achievement gained by catching the fly makes the ‘prize’ feel more deserved.
How it works
The CSS animation is playing on a loop. When you hover/touch the fly element three things happen;
- The animation is paused using
animation-play-state:paused; - The fly image is changed using
background-position:bottom; - The prize link is displayed using
display:block;
The difficulty of the game is easily adjusted simply by changing the speed of the animation animation. Remember, if you make it too hard and people will get bored and give up, too easy and there’s no sense of achievement.
The image of the fly is an animated gif, I love the idea of pairing gif animation with the CSS animation to exploit the benefits of both techniques. I’ve also done this as a sprite to avoid any delay when changing the image from flying fly to twitching fly.
Support
The :hover function works well on most devices however iOS apparently only supports in on clickable elements, so I swapped the div I was using for a button, that still didn’t work so I added :focus as well, which has fixed it. Thanks to Alex Ilhan for help with the iOS issues.
As this requires live testing I can’t do too much with my limited resources. It seems to work OK in Android 4, Outlook 2011, Thunderbird and iOS.
Using webkit targeting to hide it from non-compatible devices should help with support.
If anyone does want to use this concept for a campaign, please let me know as I’d be interested to see the results.