Checkbox Hack Review

[00:00:00]
>> Jason Rodriguez: So when you get into more advanced stuff like that example,
>> Jason Rodriguez: That we saw before, all of these different elements are, in this case it would be track boxes because you're tracking multiple states. But something like that color switcher or the size switcher, those are gonna be radio inputs, because you only want one of those states checked at a time.

[00:00:27]
But all of this just uses a more complex variation of that check box hack. There's a lot of styling that goes into something like this. When you start thinking about fallbacks, you have to consider what that experience is because this checkbox hack isn't gonna work everywhere. So in that case, you might just have whatever that product happens to be and then a CTA button that says go visit it on the website or check out on the website.

[00:00:53]
But there's a lot of stuff you can do just taking that really simple checkbox hack and then applying it in creative ways. Test as much as you possibly can when you're using something like this. It doesn't work everywhere, it's usually Apple Mail or webkit-based email clients. And just make sure you're thinking about those fallbacks and having good experience.

[00:01:14]
In the case of the example that we were playing with, the fallback would just be hiding those labels so that it doesn't look like there's anything to switch. And then you can stack those. I think I have it on the mobile version here. So when you get down to mobile, where just, this will be the fallback for anything that doesn't display that interactivity.

[00:01:39]
We can hide those labels, those inputs, so that it doesn't look like anything's clickable, then we just stack that content. So all of that content still visible, still available for anybody that wants to access it, but they don't get that nice little progressive enhancement of that switcher. Any questions about that?

[00:01:56]
I feel like it can get really complicated. I'll try to put up on the GitHub repo some additional examples of some of the crazier stuff that people have done. We did for the launch of our litmus builder, our code editor for email designers. We built our it was an interactive product tour of the builder product.

[00:02:17]
So it had these little kinda glowing icons, when you tapped on it, it would pop open a tool tip and tell you about that feature. You'd go to the next one, it was this cool interactive product tour. But I feel that's a good example of using this checkbox hack to provide this really elegant, interesting, and educational experience for subscribers, yeah?

[00:02:39]
>> Student: This may not be relevant, it's more just for curiosity, but on the example like shopping cart within the email.
>> Jason Rodriguez: Yep.
>> Student: Do you know if they're just like constructing a insane set of string params that then gets sent over the wire?
>> Jason Rodriguez: Yes that's exactly how it works.

[00:02:55]
So when you add those different states then it's, you're essentially updating that URL and sending it over as a parameter. So when you hit your application or whatever the web app is, then it'll read that populate the check out, and you can just finish up there. So yeah, you can get super complex with this kinda stuff, but it's pretty damn cool what people have been able to come up with.

[00:03:19]
I was saying earlier too, you can do some cool things where, this is where interactive stuff is kinda where linked CSS might come into play. So I was saying before, most email clients will strip out that linked style sheet. But you can do some cool stuff using linked style sheets for clients that support it, like Apple Mail, where you can have these different interactive states.

[00:03:40]
And then you can dynamically feed in content using a linked style sheet. So in your content here, this might be an element with a class, and there's nothing by default in that element, but then you can use this CSS content property and a link style sheet. So on your server you can inject whatever the hell you want into that CSS style sheet, into that content property.

[00:04:01]
And then when you trigger say an email then it pulls in, loads that link style sheet, and that content property fills out whatever that content happens to be. There's another guy that does a lot of interactive stuff named Cyril Gross who works, I believe he's Swedish, works over in Sweden for Mayoress, which is an agency.

[00:04:20]
And he built a really cool interactive dynamic advent calendar for Christmas for I think like American Express or somebody like that. So every day they would update that style sheet and reveal another grid in that advent calendar. When you clicked on an element it would pop up a modal and have information or a dealer, something like that.

[00:04:40]
So crazy stuff you can do inside of email. But it all hinges on this checkbox hack which is brilliant.