TEDC15 Boston

Building interactive email

Mark Robbins

Email Developer / CSS Hacker

@M_J_Robbins       @GoRebelmail

What is interactive (kinetic) email

An action taken in an email that triggers an event within the same email.
Mark Robbins - TEDC15 Boston

Basic interactions

:hover
:active
:focus

  1. .cta:hover{
  2.   background:red;
  3. }

Intermediate interactions checkbox:checked

  1. <label> <input type="checkbox" id="expand">
  2. <div class="title">...</div>
  3. <label class="content" for="null"> </label> </label>
  1. #expand:checked + .title + .content{
  2.   max-height:300px;
  3. }

Advanced interactions radio:checked

  1. <input type="radio"id=" welsh">
  2. <input type="radio"id="irish">
  3. <input type="radio"id="english">
  4. <label for="welsh">...</label>
  5. <label for="irish">...</label>
  6. <label for="english">...</label>
  7. < div class="welsh">...</div>
  8. <div class="irish">...</div>
  9. <div class="english">...</div>
  1. #welsh:checked ~ * .welsh{
  2.   display:block;
  3. }

Yr wyf yn cyfieithu hyn ar-lein, mae'n debyg yn anghywir
Aistrithe mé an líne, is dócha mícheart
I translated this online, it's probably wrong


Example

Support

Static

23%
Gmail app
Outlook (win)
Outlook.com

Limited

21%
Gmail (webmail)
Yahoo!
Aol

Interactive

56%
iOS
Apple Mail
Mailbox

Based on 1.06 BILLION open in July tracked by Litmus.com

Support

Static

Limited

Interactive

Ridiculous interactions
punched card coding

  1. #itemA-3:checked ~ #itemB-6:checked ~ #itemC-2:checked ~ #itemD-11:checked ~ #itemE-5:not:(checked)~ #itemF-2:checked ~ #itemG-5:checked ~ * .div1{
  2.   display:block;
  3. }

Example 2

Example 3

Example 4





Thank you

Mark Robbins

Email Developer / CSS Hacker

@M_J_Robbins       @GoRebelmail