beyond tellerrand - Munich 2018
This is a preheader.

Interactive Email

Mark Robbins

Rebel

@M_J_Robbins  |  @GoRebelmail

Modern email clients support

  • SVG
  • CSS grid
  • CSS animation
  • HTML video & audio
  • CSS filters and blend modes
  • Responsive images, <picture>, srcset
  • Interactivity

What is interactive email?

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

Mark Robbins, REBEL

Fleeting interactions

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

Static interactions

Checkbox hack

Gallery

Progressive enhancement

Static

37%

Limited

5%

Interactive

51%

HTML forms

  • Works in about 77% of email opens
  • Better support for GET than POST
  • Variaty of bugs particually with text input
  • Multiple layers of targeting CSS
  • Always changing
Review

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 ~ .wrapper .foo{display:none;}
Shopping cart

Accessibility

CSS checkbox accessibility

(work in progress)

  • <label aria-live="polite">
  • <input type="checkbox" id="check" style="display:none;">
  • <div class="faux-checkbox" role="button" aria-label="tick box" aria-describedby="checkbox-label status" tabindex="0"></div>
  • <span id="checkbox-label">
    click me
  • <div class="visually-hidden" id="status">
  • <span class="checked">checked</span>
  • <span class="unchecked ">unchecked</span>
  • </div>
  • </span>
  • </label>
Some fun stuff

Thank you

Mark Robbins

Rebel

@M_J_Robbins  |  @GoRebelmail