CSS day 2016
This is a preheader.

CSS and interactive email

Mark Robbins

@M_J_Robbins   @GoRebelmail   #CSSday

What is interactive email

An action taken in an email that triggers an event within the same email.

Fleeting interactions

code:hover{
 transform:  rotateX(-90deg);
}
code:focus{
 transform:  rotateX(-90deg);
}
code:active{
 transform:  rotateX(-90deg);
}

Static interactions

Checkbox hack

Basic Examples

Gallery
Hotspots

Linking click to inputs

<input type="radio" id="foo">

<label for="foo"> </label>

The pains of webmail

  • Gmail strips out all class and id
  • Yahoo edits all class and id
    e.g. id="yui_3_16_0_ym19_1_1464879065122"

Nesting labels

<label>
  <input type="radio" name="array1">
  <div>[image]</div>
  <label>
    <input type="radio" name="array1">
    <div>[image]</div>
    <label>
      <input type="radio" name="array1">
      <div>[image]</div>
      <label for="null"></label>
      <div>[thumbnail]</div>
    </label>
    <div>[thumbnail]</div>
  </label>
  <div>[thumbnail]</div>
</label>
input:checked + div{
  display:block;
}

input:checked + div + label + div{
  border-color:red;
}

Support and fallbacks

Static - 19%

<!--[if mso]><!-->
  Outlook sucks
<!--<![endif]--> <style></style>

Limited - 18%

:checked
+

Interactive - 63%

~
-webkit-cool-stuff

Punched card coding

#itemA-3:checked ~ #itemB-6:checked ~ #itemC-2:checked ~ #itemD-11:checked ~ #itemE-5:not(:checked)~ #itemF-2:checked ~ #itemG-5:checked ~ div .foo{display:none;}

Games

  • 6 Radio buttons
  • Score counter
  • Game gets progressively harder
  • Prize at the end
TWack-A-Vole

In email shopping

  • 117 Radio buttons
  • 4 Checkboxes
  • Add/remove products
  • Calculate prices
  • Multi page layout
  • Edit options
  • Form validation
Abandon cart - Concept

CSS Analytics

  • What version of each module you see
  • Every interaction within the email
#image1:checked + * {
  background-image:url(tracking.gif?gallery|image1);
}

Restrictions

  • File size is limited to 102kb
  • CSS is limited to ~ 12,000 characters in Gmail
  • ESP’s can break the code
  • You need a device lab for testing
  • Email clients have no beta version, no docs, no release notes

Some fun examples

3D Phone
Puzzle slider
codepen.io/M_J_Robbins

Thank you

Mark Robbins

@M_J_Robbins   @GoRebelmail   #CSSday