CSS in Email: Star Wars Edition
I was mulling around CodePen and found this super cool CSS animation featuring the Star Wars AT-AT walker of The Empire Strikes Back fame written by r4ms3s. I thought to myself, hmm I wonder if it will work in email?
Burberry’s Interactive Scarf Personalizer Email
Burberry sent a really slick kinetic email campaign featuring a 3 step interactive scarf personalizer. The email allowed recipients viewing the email on a webkit based email client the ability to select a scarf and then view a preview of the scarf with the recipient's initials monogrammed on the scarf...
Gmail, We Need To Talk
I posted an "open letter" to Gmail on TechCrunch about why better HTML/CSS support will help Gmail's goal to get developers excited about innovations in email.
Read the article
Read the article
Pret’s Kinetic Email Case Study on Campaign Monitor
Check out this case study of a kinetic campaign featuring an interactive smoothie cup the digital agency bigdog created for Pret, a British sandwich retail chain featuring their line of smoothies.
The kinetic version featured an empty cup and the recipient could watch the cup fill up by selecting from six different flavors. The fallback version featured a stack of smoothies, which I thought was neat.
The kinetic version featured an empty cup and the recipient could watch the cup fill up by selecting from six different flavors. The fallback version featured a stack of smoothies, which I thought was neat.
CSS Animation Entrance Effects in Email
Posted in CSS Help, Interactive Email, Interactive Email Tutorials, Kinetic Email by Justin On November 6, 2015
Entrance effects using CSS animation can add some flair to your email. Unlike more ambitious kinetic email designs that may involve a lot of development time , entrance animation effects leveraging CSS 2D transforms can deliver some pizzaz without a lot of extra effort.
CSS Animations in Email and Vendor Prefixes
Posted in CSS Help, Interactive Email, Interactive Email Tutorials, Kinetic Email by Justin On November 5, 2015
Although CSS animations are only supported by modern email clients, used strategically CSS animations can bring a level of flair and sophistication to your email.
How I Helped Make Office 365 a Little Safer
A few months back, while testing clients for kinetic CSS support I stumbled upon something peculiar when I opened a test email in Office 365. A purple div was appearing at the bottom left of the browser window within the area of the client that was outside of the email itself...
Hybrid Collapsible Menu For Email
Here's a collapsible navigation menu for email that uses the :checked selector when available and :hover when not. Certain email clients as well as email service providers don't support checkboxes in email so when checkboxes are stripped, this technique continues to work in clients that only support the :hover selector.
Image Carousel for Email Tool
Posted in Email, Email Resource, Interactive Email Tutorials, Kinetic Email by Justin On August 25, 2015
Here's a tool that lets you build an image carousel for email that displays up to five images. In addition to the modern mobile clients such as the iOS Mail and Android 4.x Mail clients, the generated carousel works in Yahoo! Mail and Gmail webmail as well...
Gmail on Android doesn’t display background images on non-Gmail accounts
One of the features of Gmail on Android is that you can configure it to access email from non-Gmail accounts. However it appears that when doing so, background images are not displayed when emails from non-Gmail accounts are opened.