How We Created a Fully Interactive Email Slider in Litmus' Newsletter
We like to experiment with new design and coding techniques in our newsletters, and this month we tried something new.
Since the hero content of this month's newsletter was about interactive email, we decided to make the entire email interactive (#someta) - you can see it here in Builder. We've long had the idea of making a full page slider design for our newsletter featuring each article, so this was the perfect use case for it.
We used the radio buttons hack to create HTML and CSS click events where each article was its own "slide" tied to a radio button. The contextual logic hides and shows each slide article content based on if its corresponding radio button is checked. We’ve used this technique before in email and can learn more in-depth about interactive email here.
We kept the development super simple and only targeted WebKit clients with a min-width of 800px - so mostly Apple Mail and Outlook for Mac which is a core desktop audience for us. We decided to forego a mobile implementation of this navigation as we have a small mobile audience (~10-15% on any given send), but a nice future enhancement would be to create a unique navigational component for mobile WebKit users. Check out our past Community contest on email navigation for ideas.
We also displayed a banner at the top of the email leading to this post for those viewing in WebKit clients to learn a bit more about how we did this.
What are your thoughts?
- Did you like this design or implementation?
- What could be improved?
- Are you interested in doing this or have ideas on better use cases for it?