simulating clicks

        interactive email         develop engaging experiences

Bart den Hertog Email Developer

14 years ago

Ryan Sutton
Mark Robbins

example

<style>
.switch { ... }
.switch .ball { ... }
#example1:checked ~ .switch .ball { left:84px; }
</style>
<input type="checkbox" id="example1"> <label for="example1"><span class="ball"></span></label>

example




1
2
3
<style>
.example2 .buttons, .example2 .numbers { ... }
.example2 .numbers { ... }
.example2 .buttons .button, .example2 .numbers .number { display:none }
#example2_1:checked ~ div .button2_1, #example2_2:checked ~ div .button2_2, #example2_3:checked ~ div .button2_3,
#example2_1:checked ~ div .number2_1, #example2_2:checked ~ div .number2_2, #example2_3:checked ~ div .number2_3 { display:inline-block }
</style>
<input type="radio" name="example2" id="example2_1" checked>
<input type="radio" name="example2" id="example2_2">
<input type="radio" name="example2" id="example2_3">
<div class="numbers">
	<div class="number number2_1">1</div><div class="number number2_2">2</div><div class="number number2_3">3</div>
</div>
<div class="buttons">
	<label for="example2_2" class="button button2_1 click">Add one</label><label for="example2_3" class="button button2_2 click">Add one</label><label for="example2_1" class="button button2_3 click">Start again</label>
</div>

design & development


  • campaign idea first
  • brainstorm w/ designer & developer
  • make interactions fun
  • new? prototype & test
  • css3 skills

goals vs. interactivity

ux/campaign goal type
inform caroussel, magazine, accordion, popup
explore popup, parallax, zoomable content, hover
profile/feedback switches, rating, poll, form
decision quiz, widget
conversion shopping cart, configurator
engage game

Interactivity support by client

Market
share

50%
Features
Outlook ~6% Gmail ~35% Apple ~48%

Crowan Air: introducing crow pilots

Tap a hotspot, see the pilot!
Captain Squawk McFeather
Known for his signature caw-caw call on the intercom, Captain Squawk McFeather is the most charismatic bird in the sky.
Officer Beaky Buzzard
First Officer Beaky Buzzard, with his uncanny ability to spot a worm from 30,000 feet, is the sharpest eye in the fleet.
Wingman Warbler
Flight Lieutenant Wingman Warbler, the songbird of the skies, is famous for his in-flight concerts.
Commander Cluck Norris
Commander Cluck Norris, the action hero of Crow Airlines, once did a barrel roll to avoid a flying frisbee. 
<style>
.slide .airlines .hotspot:before { /* hotspot pulse animation */
	animation:pulse 3s ease-in-out infinite;
}
@keyframes pulse { ... }
.slide .airlines .popup { /* popups by default scale 0 (=invisible) and transition is on with fancy easing */
	transform:scale(0) translate(-50%,-50%);
	transition:all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}
#pilot0:checked ~ div .hotspot { /* hotspots only visible when nothing's open */
	transform:scale(1);
}
#pilot1:checked ~ div .popup1, #pilot2:checked ~ div .popup2, #pilot3:checked ~ div .popup3, #pilot4:checked ~ div .popup4 {
	transform:scale(1) translate(-50%, -50%);
} /* open each popup with scale transition */
</style>
<input type="radio" name="pilot" id="pilot0" checked>
<input type="radio" name="pilot" id="pilot1">
<input type="radio" name="pilot" id="pilot2">
<input type="radio" name="pilot" id="pilot3">
<input type="radio" name="pilot" id="pilot4">

Tinder for crows

Hi BeakyBlinder,

We've selected the best potential matches for you. Tap on the heart if you want to caw-municate your affection, or if love is not in the air, the red x.
Thank you. We will message you when there is a match.
FeatheredFlirt (20F)
MurderMaven (24F)
CawCawtie (19F)
WingedWanderer (21F)
<style>
#profile1_no:checked ~ div .profile1,
...
#profile4_no:checked ~ div .profile4 {
	transform:rotate(-20deg) translateX(-100%);
	opacity:0;
}
#profile1_yes:checked ~ div .profile1,
...
#profile4_yes:checked ~ div .profile4 {
	transform:rotate(20deg) translateX(100%);
	opacity:0;
}
</style>
<input type="radio" name="profile1" id="profile1_vote" checked>
<input type="radio" name="profile1" id="profile1_yes" class="p1">
<input type="radio" name="profile1" id="profile1_no" class="p1">
<input type="radio" name="profile2" id="profile2_vote" checked>
...

Dutch Beer Knock Down game

Knock 'em down

Click on the bottle you'd like to hit with a ball, try it!

Well done!
<style>
#bottle2_6:checked ~ div .ballposition2 .animation {
   --width:150%;
  --height:150%;
}
@keyframes bottle_hit_translate { /* also keyframes for rotate */
  15% {
    transform: translate(calc(var(--fallx)*0.15),-25%);
  }
  40% {
    transform: translate(calc(var(--fallx)*0.40),calc(var(--fally)*0.40)); 
  }
  100% {
    transform: translate(var(--fallx),var(--fally));
  }
}
</style>
<input type="radio" name="try1" class="try1 bottle1_gone" id="bottle1_1">
<input type="radio" name="try1" class="try1 bottle2_gone" id="bottle1_2">
...
<input type="radio" name="try2" class="try2 bottle1_gone" id="bottle2_1">
<input type="radio" name="try2" class="try2 bottle2_gone" id="bottle2_2">
...

css3 skills & tricks

  • positioning!
  • transitions + easings, animations
  • transforms: scale, translate, rotate
  • css variables
  • 3d transforms (fun but unreliable)

3d example

Top
Right
Bottom
Left
Front
Back

checkbox logic

  • choice/logic first, layout follows
  • checkbox usually only for toggles
  • mostly radio button groups
  • every possibility
  • limit logic by blocking clicks

checkbox logic

any of a checkbox group? 
.choices:checked ~ ... { ... }
default "0" checked radio for start 
#checkbox0:checked ~ ... { ... }
choice 2 and up (radio) 
#choice1 ~ .choices:checked ~ ... { ... }
combination of clicks 
#q1_2:checked ~ #q2_3:checked ~ ... { ... }
random order w/ switching labels 
#try1_2:checked ~ #try2_3:checked ~ ... { ... }

fallback

  • gmail, outlook and other non apple mail
  • usual static email layout
  • animated gif with click to webversion
  • preferably webversion reacting to first click

tracking interactive clicks

  • possible before privacy protection
  • only small group left
  • tracking clicks w/ links as background images
    <div style="background-image:url(http://linkhere);display:none" class="pixel1"></div>
  • filter out data for real clicks

html end result

  • client targeting in <head>: howtotarget.email
  • template css
  • interactive css
  • template html
  • interactive and fallback "divs"

testing


  • interactive: webkit browser & apple device
  • litmus/emailonacid for fallbacks
  • don't forget mobile

make it interactive and fun!

thank you


www.bartdenhertog.nl
mail@bartdenhertog.nl
linkedin.com/in/bartdenhertog
slack #emailgeeks