Sam Johnston - Interactive Email Developer

Sam Johnston

I design and code responsive websites and emails, specialising in interactive email and CRM workflow optimisation.

Carousel in Email - The Checkbox Method

Carousel in Email - The Checkbox Method

As a huge improvement on my last post, CSS Overflow in Email, I’d like to show you something that works really well and is already more than just an experiment. Taking inspiration from the B&Q email that went out over Christmas we’ve built on and enhanced the Carousel technique previously used.

Interactive Email?

We believe that this sort of email is going to become more and more prevalent really soon and there are good reasons why it’s only now that they are even possible. With Yahoo! Mail fixing their CSS support we no longer have to use CSS attribute targeting, this lets us apply multiple classes to HTML elements and we can combine them with pseudo classes, media queries and advanced selectors too. An ever accelerating shift to mobile also means we can take advantage of greater CSS3 support on mobile devices. Whereas before in a desktop oriented world with limited and flaky CSS we were limited to basic linear table layouts.

Why is it the future?

We’ll see this even more because it’s interactive, and not in a gimmicky way. It’s well supported and plays nicely anywhere it’s not. It’s also a great way to organise all your content above the fold in a way that previously was reserved solely for websites. CSS3 animations means the email is smooth and sleek too.

How does it work?

The email uses the checkbox method to toggle different content, except instead of checkboxes I use radio buttons as they can be grouped together providing some fluid transitions and easier targeting. Conditional code and media queries are then used to target different clients and toggle content or layouts on and off. Supporting clients get the feature packed carousel in all its glory and unsupported clients fall back to a static, stacked version.

Is anything else possible?

YES! Using the same techniques we can build; accordions, real time content sorters, image carousels and even a button that toggles snow. All of which would normally require JavaScript.

Design Considerations

When building an email like this it’s important to consider the design of your three versions in full. You’ll have a webkit/moz desktop version, a mobile version and a fall-back version. The webkit/moz desktop and mobile versions are fairly flexible and easily targeted with CSS so I would recommend the fall back version is designed first. You’ll want it to look as if all your slides are stacked on top of each other, you can then bring in new content or remove existing content with media queries. You’ll also want to put serious thought into your buttons, they’re extremely flexible and you can style and position them in lots of ways, but always go for mobile first as there is less real estate to work with, and it has better support. Make sure you and the client know the limitations of this too — we’re still in the email universe, you can view the list of supported and unsupported clients below. It’s also important to know your user base. If most your users are still using desktop clients, this is probably not for you.

One of our recent Nissan GB emails:

https://litmus.com/builder/5b3d6fd

Test Results

The carousel works in any client that supports webkit and moz CSS.

Apple Mail 7
Apple Mail 8
Outlook 2011 for Mac
Outlook 2016 for Mac
Mozilla Thunderbird
iPad and iPad mini iOS
iPhone iOS
Android
Windows Mobile
AOL (Chrome, Firefox & Safari)

The email then falls back in all the other email clients I tested, some MSO conditional code was needed.

Lotus Notes and IBM Notes
Outlook 2000
Outlook 2002
Outlook 2003
Outlook 2007
Outlook 2010
Outlook 2013
AOL (Internet Explorer)
Gmail App (iPhone, Windows Mobile & Android)
Gmail
Google Apps
Office 365
Outlook.com
Yahoo! Mail

Want to talk about interactive / kinetic emails? Get in touch with me on Twitter @iamsamj88 or @TMWagency

Comments