This is part 2 of a 4-part tutorial. New here? Start with part 1.
Four steps to interactivity
1. Inputs: The all-powerful radio button!
When building interactive emails the grunt work is done by the radio button inputs. These always appear at the top of the block of code; as later we will be using the CSS Tilde selector. As the tilde selector can only control proceeding elements we need to ensure everything we want to control with the inputs is after their position in the code.
For this email, we will need a total of 15 inputs, 1 for each piece of the character, 5 head inputs, 5 body inputs, and 5 leg inputs.
<!-- Inputs --> <!-- Inputs - Heads --> <input name="slider1-rad" type="radio" id="slider1-rad1" class="slider1-rad1" style="display: none; visibility: hidden;" > <input name="slider1-rad" type="radio" id="slider1-rad2" class="slider1-rad2" style="display: none; visibility: hidden;" > <input name="slider1-rad" type="radio" id="slider1-rad3" class="slider1-rad3" style="display: none; visibility: hidden;" > <input name="slider1-rad" type="radio" id="slider1-rad4" class="slider1-rad4" style="display: none; visibility: hidden;" > <input name="slider1-rad" type="radio" id="slider1-rad5" class="slider1-rad5" style="display: none; visibility: hidden;" > <!-- Inputs - Bodies --> <input name="slider2-rad" type="radio" id="slider2-rad1" class="slider2-rad1" style="display: none; visibility: hidden;" > <input name="slider2-rad" type="radio" id="slider2-rad2" class="slider2-rad2" style="display: none; visibility: hidden;" > <input name="slider2-rad" type="radio" id="slider2-rad3" class="slider2-rad3" style="display: none; visibility: hidden;" > <input name="slider2-rad" type="radio" id="slider2-rad4" class="slider2-rad4" style="display: none; visibility: hidden;" > <input name="slider2-rad" type="radio" id="slider2-rad5" class="slider2-rad5" style="display: none; visibility: hidden;" > <!-- Inputs - Legs --> <input name="slider3-rad" type="radio" id="slider3-rad1" class="slider3-rad1" style="display: none; visibility: hidden;" > <input name="slider3-rad" type="radio" id="slider3-rad2" class="slider3-rad2" style="display: none; visibility: hidden;" > <input name="slider3-rad" type="radio" id="slider3-rad3" class="slider3-rad3" style="display: none; visibility: hidden;" > <input name="slider3-rad" type="radio" id="slider3-rad4" class="slider3-rad4" style="display: none; visibility: hidden;" > <input name="slider3-rad" type="radio" id="slider3-rad5" class="slider3-rad5" style="display: none; visibility: hidden;" >
2. Labels: Where the interaction happens
In all interactive emails, we hide the inputs themselves and use labels as the actual buttons which control your interactive elements. So now we need to add some labels to control the inputs.
For this example, we are going to need a grand total of 30 labels! The reason for this is each input has 2 labels, a left and a right button. This is a common technique when building sliders in interactive emails. We essentially have a set of two labels for each input/slide. These labels are then hidden or shown depending on the current slide. For example, when we are viewing slide 3, the left arrow will point to slide 2, and the right arrow will point to slide 4. When either of these arrows are clicked we hide them, and then show the next slides set of controls. It's a little confusing at first, but you'll get the hang of it 😉.
<div class="controls"> <!-- Controls - Heads --> <div class="controls1"> <!-- Slide 1 --> <label for="slider1-rad5" class="slider-nav slider-nav-lft slider1-nav1"></label> <label for="slider1-rad2" class="slider-nav slider-nav-rgt slider1-nav1"></label> <!-- Slide 2 --> <label for="slider1-rad1" class="slider-nav slider-nav-lft slider1-nav2"></label> <label for="slider1-rad3" class="slider-nav slider-nav-rgt slider1-nav2"></label> <!-- Slide 3 --> <label for="slider1-rad2" class="slider-nav slider-nav-lft slider1-nav3 slider1-nav-start"></label> <label for="slider1-rad4" class="slider-nav slider-nav-rgt slider1-nav3 slider1-nav-start"></label> <!-- Slide 4 --> <label for="slider1-rad3" class="slider-nav slider-nav-lft slider1-nav4"></label> <label for="slider1-rad5" class="slider-nav slider-nav-rgt slider1-nav4"></label> <!-- Slide 5 --> <label for="slider1-rad4" class="slider-nav slider-nav-lft slider1-nav5"></label> <label for="slider1-rad1" class="slider-nav slider-nav-rgt slider1-nav5"></label> </div> <!-- Controls - Bodies --> <div class="controls2"> <!-- Slide 1 --> <label for="slider2-rad5" class="slider-nav slider-nav-lft slider2-nav1"></label> <label for="slider2-rad2" class="slider-nav slider-nav-rgt slider2-nav1"></label> <!-- Slide 2 --> <label for="slider2-rad1" class="slider-nav slider-nav-lft slider2-nav2"></label> <label for="slider2-rad3" class="slider-nav slider-nav-rgt slider2-nav2"></label> <!-- Slide 3 --> <label for="slider2-rad2" class="slider-nav slider-nav-lft slider2-nav3 slider1-nav-start"></label> <label for="slider2-rad4" class="slider-nav slider-nav-rgt slider2-nav3 slider1-nav-start"></label> <!-- Slide 4 --> <label for="slider2-rad3" class="slider-nav slider-nav-lft slider2-nav4"></label> <label for="slider2-rad5" class="slider-nav slider-nav-rgt slider2-nav4"></label> <!-- Slide 5 --> <label for="slider2-rad4" class="slider-nav slider-nav-lft slider2-nav5"></label> <label for="slider2-rad1" class="slider-nav slider-nav-rgt slider2-nav5"></label> </div> <!-- Controls - Legs --> <div class="controls3"> <!-- Slide 1 --> <label for="slider3-rad5" class="slider-nav slider-nav-lft slider3-nav1"></label> <label for="slider3-rad2" class="slider-nav slider-nav-rgt slider3-nav1"></label> <!-- Slide 2 --> <label for="slider3-rad1" class="slider-nav slider-nav-lft slider3-nav2"></label> <label for="slider3-rad3" class="slider-nav slider-nav-rgt slider3-nav2"></label> <!-- Slide 3 --> <label for="slider3-rad2" class="slider-nav slider-nav-lft slider3-nav3 slider1-nav-start"></label> <label for="slider3-rad4" class="slider-nav slider-nav-rgt slider3-nav3 slider1-nav-start"></label> <!-- Slide 4 --> <label for="slider3-rad3" class="slider-nav slider-nav-lft slider3-nav4"></label> <label for="slider3-rad5" class="slider-nav slider-nav-rgt slider3-nav4"></label> <!-- Slide 5 --> <label for="slider3-rad4" class="slider-nav slider-nav-lft slider3-nav5"></label> <label for="slider3-rad1" class="slider-nav slider-nav-rgt slider3-nav5"></label> </div> </div>
3. Content: The parts you control with the buttons
Now you get to put your designer hat on and create some awesome graphics. For this example, I have used LEGO Minifigures but you could design your own character builder in any way. You could even use this technique to build other content 'combinations', maybe a clothing style selector, or an interior decoration service combining wall colours with items. Get creative with it, the possibilities are endless!
I always try to keep things as simple as possible for asset creation as images in emails really do need to be pixel perfect. For this reason, each of my LEGO figures is sliced up in the same artboard and then output as different PNGs. This allows me to position all the slider divs holding the slides at an absolute position and the pieces of the character will be aligned perfectly. Keeping the images all the same dimensions will make your life a lot simpler later. The alternative would require positioning the individual sliders or slides with the code itself. Making the email more complicated and the file size heavier.
<!-- Content --> <div class="slides-cont"> <!-- Content - Heads --> <div class="slides slides1"> <div class="slide slide1"> <img src="http://ofishialdigital.com/examples/minifigures/img/head1-180x230-2x.png" width="180" height="230" class="w180 h230" alt="" border="0" class="responsive"> </div> <div class="slide slide2"> <img src="http://ofishialdigital.com/examples/minifigures/img/head2-180x230-2x.png" width="180" height="230" class="w180 h230" alt="" border="0" class="responsive"> </div> <div class="slide slide3 slide-start"> <img src="http://ofishialdigital.com/examples/minifigures/img/head3-180x230-2x.png" width="180" height="230" class="w180 h230" alt="" border="0" class="responsive"> </div> <div class="slide slide4"> <img src="http://ofishialdigital.com/examples/minifigures/img/head4-180x230-2x.png" width="180" height="230" class="w180 h230" alt="" border="0" class="responsive"> </div> <div class="slide slide5"> <img src="http://ofishialdigital.com/examples/minifigures/img/head5-180x230-2x.png" width="180" height="230" class="w180 h230" alt="" border="0" class="responsive"> </div> </div> <!-- Content - Bodies --> <div class="slides slides2"> <div class="slide slide1"> <img src="http://ofishialdigital.com/examples/minifigures/img/body1-180x230-2x.png" width="180" height="230" class="w180 h230" alt="" border="0" class="responsive"> </div> <div class="slide slide2"> <img src="http://ofishialdigital.com/examples/minifigures/img/body2-180x230-2x.png" width="180" height="230" class="w180 h230" alt="" border="0" class="responsive"> </div> <div class="slide slide3 slide-start"> <img src="http://ofishialdigital.com/examples/minifigures/img/body3-180x230-2x.png" width="180" height="230" class="w180 h230" alt="" border="0" class="responsive"> </div> <div class="slide slide4"> <img src="http://ofishialdigital.com/examples/minifigures/img/body4-180x230-2x.png" width="180" height="230" class="w180 h230" alt="" border="0" class="responsive"> </div> <div class="slide slide5"> <img src="http://ofishialdigital.com/examples/minifigures/img/body5-180x230-2x.png" width="180" height="230" class="w180 h230" alt="" border="0" class="responsive"> </div> </div> <!-- Content - Legs --> <div class="slides slides3"> <div class="slide slide1"> <img src="http://ofishialdigital.com/examples/minifigures/img/legs1-180x230-2x.png" width="180" height="230" class="w180 h230" alt="" border="0" class="responsive"> </div> <div class="slide slide2"> <img src="http://ofishialdigital.com/examples/minifigures/img/legs2-180x230-2x.png" width="180" height="230" class="w180 h230" alt="" border="0" class="responsive"> </div> <div class="slide slide3 slide-start"> <img src="http://ofishialdigital.com/examples/minifigures/img/legs3-180x230-2x.png" width="180" height="230" class="w180 h230" alt="" border="0" class="responsive"> </div> <div class="slide slide4"> <img src="http://ofishialdigital.com/examples/minifigures/img/legs4-180x230-2x.png" width="180" height="230" class="w180 h230" alt="" border="0" class="responsive"> </div> <div class="slide slide5"> <img src="http://ofishialdigital.com/examples/minifigures/img/legs5-180x230-2x.png" width="180" height="230" class="w180 h230" alt="" border="0" class="responsive"> </div> </div> </div>