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> 
input { display:none; } 
label { 
 border:1px solid #ccc; 
 padding:1em 0; 
 padding:2em 0; 
 border:1px solid #ccc; 
#tab1:checked ~ .tab1, 
#tab2:checked ~ .tab2, 
#tab3:checked ~ .tab3, 
#tab4:checked ~ .tab4 { 
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

15 Best New Fonts, July 2024

Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…

20 Best New Websites, July 2024

Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…

Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance

WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…

Exciting New Tools for Designers, July 2024

Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…

3 Essential Design Trends, July 2024

Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…