by
Geoff Bell & Jamie Jalleh
Designers
As part of the Creative Services team, we primarily design and build emails but also work on a number of other things.
An interactive email has the functionality for users to take an action within the email that triggers an event within the same email. It's a great way to surprise and delight your customers, as well as keep them in the inbox.
Litmus
Carousels
Hamburger menu
Interactive Quiz
Although they're nice, GIFs don't make an email interactive...
The majority of interactive emails use 3 techniques:
The "Checkbox Hack"
"Punch Card Coding"
&
Sibling Selectors
The "Checkbox Hack" is where you use a connected label and checkbox input to control something else.
The most common use of the checkbox is to show interactive content in a compatible email client, although it's also used for hamburger menus.
Usually like this:
input[type=checkbox]{ position:absolute; top:9999px; left:9999px; } label{ -webkit-appearance:push-button; -moz-appearance:push-button; display:inline-block; margin:60px 0 10px 0; cursor:pointer; } div{ background:green; width:400px; height:100px; line-height:100px; color:white; text-align:center; margin:auto; } input[type=checkbox]:checked ~div { background:red; } <label for="toggle-1">I'm a toggle</label> <input type="checkbox" id="toggle-1"> <div>I'm controlled by toggle</div>
Punch card coding uses multiple radio inputs, as well as labels, and styles something else based on the :checked values of those buttons.
Called punch card coding, because it looks like a punch card.
Usually like this...
input { display:none; } label { float:left; display:block; width:146px; border:1px solid #ccc; border-collapse:collapse !important; text-align:center; padding:1 em 0; } .tab { width:450px; height:1em; padding:2em 0; border:1px solid #ccc; text-align:center; display:none; clear:both; } .tab1 { background-color:red;} .tab2 { background-color:blue;} .tab3 { background-color:green;} #tab1:checked ~.tab1, #tab2:checked ~.tab2, #tab3:checked ~.tab3 { display:block; } <input type="radio" name="tabs" id="tab1" checked> <input type="radio" name="tabs" id="tab2"> <input type="radio" name="tabs" id="tab3"> <label for="tab1" class="button1">Tab 1<label> <label for="tab2" class="button2">Tab 2<label> <label for="tab3" class="button3">Tab 3<label> <div class="tab tab1">Content for Tab 1</div> <div class="tab tab2">Content for Tab 2</div> <div class="tab tab3">Content for Tab 3</div>
The general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element.
Make sense?
Sibling selectors explained...
Most interactive emails will work on
Apple Mail / default mail app on iPhones
Outlook for Mac
Most other clients will serve users the fallback.
Might not sound like a lot, but makes up
46%
of opens by email client, including 3 of the top 4.
Source: http://emailclientmarketshare.com/
Enhanced brand
They bring your emails to the level of your website, and if you're seen to be using more advanced techniques, that in part helps your brand be seen as more advanced and forward thinking.
Higher level of engagement
If content is interactive, readers are more likely to engage with it. They're more likely to take it in, and more likely to click, which is ultimately what most people want.
Customer
Co-op
Email
Funeral care
Interactivity
Quiz
Click to open rate:
vs industry average
vs non-interactive version
Black Friday
Click to reveal
SSE
Broadband & phone
Carousel
Communicator
Christmas Email
Slider
Created by:
Paul Airy @Paul_Airy
Accessibility Switch
Aaron Simmonds @otherside_uk
Adventure Game
Nest @nest
Shopping cart in an email
Any questions?
The end...
