Building an interactive email

Full disclosure, I mostly know what I’m doing with building an interactive email. But every time I start one the design is usually different so there’s a moment of “oh crap, what the hell am I doing again?” I thought that was pretty in line with the point of this newsletter and since a bunch of you probably stumbled across my humble newsletter from the email marketing space, I figured I’d share some interactive email coding basics.

1. Da Basics

So interactive email. There’s two ways to do it - AMP for email and the checkbox hack. I have never had access to an ESP that supports AMP for email. I’m not 100% sure AMP for email will ever take off, but I am open to being proven wrong on that front. Until that happens, I stick to the checkbox hack version of interactive email. Essentially you’re relying on hidden inputs to allow users to interact with your email in fun ways.

There are two main inputs that I usually use: the radio button and the checkbox. Using these two inputs we can accomplish a lot of different things.

1. Radio buttons. These are great when you want your subscribers to only be able to choose one of something.

2. Checkboxes. These are great when you want people to be able to choose more than one of something.

In both cases, the key is hiding the actual input tag with some CSS and then styling the label however you want - an image, a button, a tab, some text, your imagination really is the limit here.

2. Support

This is where the fun part comes. I’ve found there’s two different ways you can do these types of emails and which method you chose will determine what kind of support your email has and also how fun you can go with your interactive design.

Adjacent Sibling Selector: +

This first method method has the widest support (Apple, AOL, and Yahoo - possibly Samsung Mail), but it is more limiting because you have to be very deliberate about how you organize your code.

To use the adjacent sibling selector you have to nest your labels, input, and content to ensure that your content and your inputs are adjacent siblings (aka your content comes directly after your input) and your labels are connected to the correct inputs without having to use the “for” attribute. You end up with code that looks somewhat like this:

<label>
    <input type="radio" name="tab" id="tab1" checked="checked">
    <div>
        <div class="title1 tab">Label 1 Title</div>
        <label>
            <input type="radio" name="tab" id="tab2">
            <div>
                <div class="title2 tab">Label 2 Title</div>
                <label>
                    <input type="radio" name="tab" id="tab3">
                    <div>
                        <div class="title3 tab">Label 3 Title</div>
                        <div class="content3" style="height:0px;max-height:0px;overflow:hidden;">
                             <h2>You can't go wrong with Jeff Goldblum</h2>
                             <p style="text-align: left;">Hey, you know how I'm, like, always trying to save the planet? Here's my chance. I gave it a cold? I gave it a virus. A computer virus. My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!</p>
                        </div>
                    </div>
                </label>
                <div class="content2" style="height:0px;max-height:0px;overflow:hidden;">
                    <h2>No seriously it's the best</h2>
                    <p style="text-align: left;">Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special. I gave it a cold? I gave it a virus. A computer virus. Did he just throw my cat out of the window? You know what? It is beets. I've crashed into a beet truck.</p>
                </div>
            </div>
        </label>
        <div class="content1" style="height:0px;max-height:0px;overflow:hidden;">
            <h2>I love me some Jeffsum</h2>
            <p style="text-align: left;">God help us, we're in the hands of engineers. My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! I gave it a cold? I gave it a virus. A computer virus. Jaguar shark! So tell me - does it really exist?</p>
        </div>
    </div>
</label>

Now when you create the CSS for the above code, you can use the adjacent sibling selector to style the code:

//style the specific labels when the inputs are checked:
#tab1:checked+div .title1,
#tab2:checked+div .title2,
#tab3:checked+div .title3 {
     background-color: #7EABCE;
     color: #262524; }

//show the content when the inputs are checked:
#tab1:checked+div .content1,
#tab2:checked+div .content2,
#tab3:checked+div .content3 {
     display: block !important;
     max-height: none !important;
     height: auto !important; }

Pros

Using the adjacent sibling selector means that your interactive code will work in more email clients. As mentioned above, this is supported in Apple (and iOS), AOL, and Yahoo.

Cons

You’ll notice that the content for the third tab comes before the content for the first tab in the code above. It’s a bit confusing, but as you build the nest in, your labels count forwards - 1, 2, 3. But then as you’re backing out of the nesting your content counts backwards - 3, 2, 1. It’s a little confusing and I find it very easy to get lost in my code with this technique.

I also find it more difficult to create some of the more interesting designs as the inputs, labels, and content all have specific designated spots and absolute positioning isn’t supported in the same places that the adjacent sibling selector is supported.

General Sibling Selector: ~

This method is limited to Apple Mail and iOS devices. In this case your inputs have to be siblings of the content you want to manipulate. So you can put your inputs at the top of your interactive content and then manipulate any content that comes after. When I use the general sibling selector method, I also use the “for” attribute with my labels so I can put them where ever I want to, but still have them tie back to the appropriate inputs.

In this method the code looks a bit more straight forward:

<input type="radio" name="tab" id="tab1" checked>
<input type="radio" name="tab" id="tab2">
<input type="radio" name="tab" id="tab3">

<div>
    <label for="tab1">Label 1 Title</label>
    <label for="tab2">Label 2 Title</label>
    <label for="tab3">Label 3 Title</label>
    <div class="content1" style="height:0px;max-height:0px;overflow:hidden;">
        <h2>I love me some Jeffsum</h2>
        <p style="text-align: left;">God help us, we're in the hands of engineers. My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! I gave it a cold? I gave it a virus. A computer virus. Jaguar shark! So tell me - does it really exist?</p>
    </div>
    <div class="content2" style="height:0px;max-height:0px;overflow:hidden;">
        <h2>No seriously it's the best</h2>
        <p style="text-align: left;">Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? I was part of something special. I gave it a cold? I gave it a virus. A computer virus. Did he just throw my cat out of the window? You know what? It is beets. I've crashed into a beet truck.</p>
    </div>
    <div class="content3" style="height:0px;max-height:0px;overflow:hidden;">
        <h2>You can't go wrong with Jeff Goldblum</h2>
        <p style="text-align: left;">Hey, you know how I'm, like, always trying to save the planet? Here's my chance. I gave it a cold? I gave it a virus. A computer virus. My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!</p>
    </div>
</div>

For this code you can use the general sibling selector in your styles:

//style the specific labels when the inputs are checked:
#tab1:checked~div .title1,
#tab2:checked~div .title2,
#tab3:checked~div .title3 {
     background-color: #7EABCE;
     color: #262524; }

//show the content when the inputs are checked:
#tab1:checked~div .content1,
#tab2:checked~div .content2,
#tab3:checked~div .content3 {
     display: block !important;
     max-height: none !important;
     height: auto !important; }

Pros

The CSS is pretty similar to the first method, but using the general sibling selector means that the html is much cleaner and easier to read. Also, since I can put the labels and content where ever I want to I don’t have to use absolute positioning. (Apple does support absolute positioning, so you can combine it with this method to do even more fun things)

Cons

I mentioned this one already, but it’s only supported on Apple mail and iOS devices (and Outlook for Macs). So if you don’t have the subscribers opening on those devices it might not be worth it.

Both of the above methods are supported in web browsers, so a great fallback is providing a compelling call to action and linking to the view in browser version.

Please keep in mind, that I’ve been using the general sibling selector method for awhile now, as it allows Hannah to be a little more free with their designs. So the other version might not be as well supported as it used to be. DON’T @ ME IF IT DOESN’T WORK. I’ll figure it out the next time I try and use it.

Also, I am not Levar Burton, you really shouldn’t take my word for it. Test the shit out of your emails before you send them. (I’m a teensy bit biased, but Litmus is a great tool for testing your emails. 🤪)

3. Examples

It’s that easy. Really. Now go make awesome emails like these ones:

Fly or flop?

Keep an eye on your inbox if you’re subscribed to Litmus emails for the latest interactive email I did. It’s nothing fancy, but it was fun to make. And we threw in several different fun fallbacks for email clients that don’t support the checkbox hack. Yay for targeting emails with howtotarget.email.

Keep in mind that I didn’t cover how to hide/show the interactive content and the fallback content, but this email is getting a bit long, so I’ll leave that for another email.

Til next month; take chances, make mistakes, get messy!
Carin

Jake said it best. And as a follow up, being sort of good at something is the next step towards being OK at something, which is the next step towards being great at something. You see where this is going. Don’t let the fact that you suck at something stop you from doing it.

Also, make some bacon pancakes, because life’s too short to live without bacon pancakes.

My husband challenged me to actually finish the giant pile of books that I have on my bedside table before the end of the year, so I’ve been working my way through that. You can follow along with my progress on Twitter if you want to, but here’s this month’s books from the pile and then some: Olivia Butler’s Adulthood Rites and Imago, Alexandra Bracken’s Passenger, Seanan McGuire’s Every Heart a Doorway, Ivy Asher’s The Bone Witch, Neal Stephenson’s Seveneves, Jason Pargin’s If This Book Exists, You’re in the Wrong Universe, and Rachel Harrison’s Cackle.

Follow along as I devour books this year

Like the newsletter? Have ideas? Wanna share a story about something you dove into recently or something you're reading? Reply and let me know! I'm always up for new things to try or new books to read.

If you’re getting this, I’m going to assume you got the welcome email and you kind of know what you signed up for. And if you don’t, that’s OK too, because I’m not 100% sure what I’m doing either. That’s kind of the point. 🤪

If this isn't for you, feel free to unsubscribe below.