Today I gave a talk at Fluent 2014 entitled Supercharge Your Mobile Emails, in which I talked about how to add animation, dynamic content and interactivity to your email templates to improve the mobile email experience. These HTML & CSS techniques were discovered as part of building LinkedIn Intro, but my talk focuses on how anyone can leverage them when authoring HTML email templates.
SLIDES DOWNLOAD: Supercharge Your Mobile Emails
Below is a brief summary of the highlights. The slides themselves are the best way to see the techniques visually and get an idea of some use cases for each capability.
Email is not dead!
According to a McKinsey study, the average professional spends 28% of their day working on email. People are opening emails on different devices – five years ago less than 4% of emails were opened on mobile devices, but today, 50% of emails are opened on mobile devices. At the same time, the rendering engines in iOS’s Mail.app and Android’s Email app are vastly more capable and permissive than any of the web-based clients (Gmail, Yahoo! Mail, etc). This means we can now use CSS3 to add the following to our emails:
- Animations, using the -webkit- prefixed versions of the CSS Animation spec. We can animate almost all CSS properties, and even CSS Filter Effects.
- Dynamic content, use <iframe> elements styled to integrate seamlessly with message content. We can also take server headers into account when requesting images, and create some interesting effects by combining these with animated gifs.
- Interactive components – by leveraging the compatibility layer for :hover we can respond to tap events in pure CSS, enabling users to interact with our emails without getting forced out into the browser app.
In the coming weeks I’ll follow up with separate blog posts that deep dive on each topic. In the meantime, please at me @LeeMallabone if you need help.
fonicmonkey 