Punched card coding: the secret of interactive email

Default avatar.
October 19, 2015
Punched card coding: the secret of interactive email.
Email predates the Web by around 10 years (depending on who you talk to) and in that time the web has evolved into an dynamic, interactive entity. However, the most exciting thing you’re likely to see in an email these days is a nice animated gif, and we got those in the 90’s. Well now everything is changing, this is the dawn of interactive email. What if you could use image galleries in email, tabbed layouts, or multi page layouts? What if you could play a game, read a live twitter feed, or even shop, select/edit items and checkout directly in your email? Have email clients started to support JavaScript? No. And this isn’t an extension, plugin download, or even new app. This is all HTML and CSS! And mostly CSS2!

Punched card coding

So how do you go about detecting user interactions and creating complex functionality without JavaScript? I created a technique I’m calling punched card coding. This basically uses a large number of radio buttons and styles the CSS based on the :checked values of those buttons. A simple example of this is a tabbed layout: HTML
<input type="radio" name="tabs" id="tab1" checked> 
<input type="radio" name="tabs" id="tab2"> 
<input type="radio" name="tabs" id="tab3">
<input type="radio" name="tabs" id="tab4"> 
<label for="tab1">Tab 1</label> 
<label for="tab2">Tab 2</label> 
<label for="tab3">Tab 3</label> 
<label for="tab4">Tab 4</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> 
<div class="tab tab4">Content for tab 4</div> 
CSS
input { display:none; } 
label { 
 display:block; 
 float:left; 
 width:148px; 
 border:1px solid #ccc; 
 text-align:center; 
 padding:1em 0; 
} 
.tab{ 
 width:598px; 
 height:1em; 
 padding:2em 0; 
 border:1px solid #ccc; 
 text-align:center; 
 display:none; 
 clear:both; 
} 
#tab1:checked ~ .tab1, 
#tab2:checked ~ .tab2, 
#tab3:checked ~ .tab3, 
#tab4:checked ~ .tab4 { 
display:block; 
}
See this example at work: http://codepen.io/anon/pen/WQwagL When the radio button for #tab1 is checked, then .tab1 is shown. When the radio button is not checked, it reverts to its default value. Because these radio buttons are all in the same array, only one can be checked at a time, this stops multiple tabs from being shown at once. This is quite an adaptable concept. Replace the tab labels with thumbnail images and the content with images and you have a simple image gallery. Or, move the tabs to a navigation layout to create a fake multipage layout. When fixing up some bugs on an email I was building, I had the radio buttons set to display, and noticed a resemblance to an old IBM punched card radio buttons / punched card image. Once I understood this, it allowed me to expand my thinking: it’s just a series of checked or default values. You could think of it as true/false, or one/zero. The potential is huge.

Games in email

My first experiment was building a game. The theory is that the player has to click a label to score a point. When checked, that also then shows the label for the next radio button and so on. I also added a label for the previous radio button so you could lose points too. Then, to make it into a game I animated the labels to move around, making them harder to hit and styled it into a whack-a-mole type game. Play the game here: http://codepen.io/M_J_Robbins/full/jpCKH/

Shopping cart in an e-mail

The next example is a little more complicated. This one uses 117 radio buttons and 2 checkboxes to control it. Some of the features include image galleries, multi page layout, add/remove items, form validation, dynamic price calculations on line total, subtotal tax, discounts, and the total price. All of it is built in just HTML and CSS. RebelmailShoppingCart The concept here is when you click “BUY NOW”, it works as a form submit and carries the details of all the checked radio buttons. Then the selected card will be charged and the selected products will be dispatched, to the selected address, all without visiting the website.

Support and limitations

There are a few limitations to this, as you would expect in e-mail. Firstly there is a limitation on file size. If the email exceeds 102kb, it will be clipped in Gmail, Yahoo, and Outlook.com. Also, it runs a much higher risk of getting flagged as spam. I should note that limit is just for the HTML and CSS you send. Downloaded assets such as images and fonts aren’t included in this. To help get around the problem, we uglify and minify our code; but that in turn can lead to some errors, so be careful. Then there’re all the varying rendering issues across different email clients, on different devices, different operating systems and different browsers. To simplify all of this, we like to break down all the email clients into 3 groups, Static, Limited and Interactive. Static clients: Outlook (Windows), Outlook.com, Gmail app These clients strip the functional CSS, so the email will just fall back to a simple, static layout. The end user shouldn’t notice any difference between these interactive emails and the normal emails they receive every day. Limited clients: Gmail (webmail), Yahoo, AOL These clients have varying limitations on the CSS. Some of the more advanced things are stripped or edited by the email client preprocessors; but they still support some interactions. Interactive clients: Applemail, iOS, Android, Mailbox These have the full bells and whistles. They support everything above, and some very cool new ideas I’m working on too. The good news is, based on stats from emailclientmarketshare.com, out of 1.05 billion emails opened in August, 57% of emails were opened in interactive clients, and a further 20% on limited clients. So, 77% of users have the ability to see some level of interactive email.

So what does the future hold?

As you can see, e-mail has the potential to be so much more than static text and images. We’ve already seen companies like Nest and B&Q using galleries in their emails, and Litmus has done a load of great experiments (experiments like a video background, live twitter feed, and a “find the golden ticket” giveaway). This is a very exciting time to be in e-mail, we’re are only limited by the depth of our imagination…and Outlook; Outlook is still a pain to deal with…and time; as you can imagine, these take a lot longer to build than a regular email. We’re only limited by the depth of our imagination, the rending of older email clients, and the time it takes to build the e-mails. Featured image uses email image via Shutterstock.

Mark Robbins

Mark Robbins is an Email Developer and CSS Hacker at Rebelmail.com you can follow him for more email and CSS hack on twitter @M_J_Robbins and codepen.io/M_J_Robbins

Read Next

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…

The 10 Best Logos of 2023 - Ranked

From vintage aesthetics to innovative new color schemes, we’ve seen a lot of creative logo designs this year. In this…

Exciting New Tools for Designers, February 2024

2024 is well underway and shaping up to be an interesting year. So, to help you keep your focus on working hard and…

The Art of Engineering AI Prompts

In the rapidly evolving world of artificial intelligence, the ability to communicate effectively with AI tools has…

15 Best New Fonts, January 2024

In this month’s roundup of the best new fonts, we find a large number of vintage, retro, and revival typefaces. Is it…

5 Web Design Disasters That Will Ruin Your 2024

Welcome to 2024, where web design is as fast-paced as ever. You know how crucial a killer website is nowadays — your…