Next week me and Mark Robbins will be running a workshops in Brighton, Mark is leading a workshop on interactive email and I will be running one on including CSS animation in email. There's still time to sign up to be there in person or online.
We are going to play with the 2x main ways to create an interactive experience with checkboxes. For the best experience, check out this email online.
The "for" technique
<input type="checkbox" id="clickme">
<label for="clickme">Check the box</label>
Will look like below:
Now this label below is connected to a checkbox just after the <body> opening tag. This means we can out the label anywhere and using CSS target all of the elements in our email - such as a section background color:
The CSS for this checkbox is below:
Note: If you open this email in your browser you can edit the CSS and see it work live!
You can also use this to debug CSS in email clients!
Support for this technique is only Apple Mail / iOS mail
This technique has wider support in email clients, but limits what is possible - you couldn't change the background of an email, or nest multiple elements inside one another. But for a click to reveal - it has everything you need!
Note: For all the code you would need to set this up in your email checkout this Github repo.
Support for this technique is Apple Mail / iOS mail, Outlook for Mac, Outlook (Webmail), Outlook app, Yahoo, AOL.
We can assign animations to elements using CSS selectors and then using the attribute animation, we can do anything! (Well almost anything!) We are using this format:
In short hand to describe some attributes of the animation - but the actual animation is happening in the keyframes:
Using percentages as a timeline, we can set what happens ar 0%, 100% or any percentage we like, using any CSS attributes!
Support for this technique is only Apple Mail / iOS mail
Hopefully that has given you a little insight into how to start with interactive and animated elements in email - I'll hopefully see some of you in Brighton next week, or maybe at future workshops - Stephen Jay 🤓
Be Trusted // Be Connected // Be Inspired // Be Kind
This is an email sent by ActionRocket. All copyrights and
trademarks remain the property of their respective owners. Email
Inspire is not affiliated with ActionRocket.
Other Emails from ActionRocket
EmailWeekly #493: Click here for creativity 🧑🎨
EmailWeekly #492: Black History Month
EmailWeekly #491: The 2024 summer wrap-up 🌇
EmailWeekly #490: Dark mode, activated :sunglasses:
