large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="http://ift.tt/2pWsfRd">ux news / Raindrop.io</a> |   </p>
<p>                    By <a href="http://ift.tt/2aLocUa">Kevin Mandeville</a> </p>
<p>We’ve had great success with our interactive emails using <a href="http://ift.tt/2qrQwlv">live Twitter feeds</a> and <a href="http://ift.tt/2pWyvZ1">hidden golden tickets</a> to promote Litmus Live over the past couple of years. For <a href="http://ift.tt/2qrOstR">Litmus Live 2017</a> we added a new twist—an interactive quiz inside the email. To “unlock” an entry and win a golden ticket, subscribers had to answer each of the five questions in the quiz correctly.</p>
<p>In case you missed it, here’s the email:</p>
<p>The <a href="http://ift.tt/2qrCccK">interactive</a> quiz is fully functional in Apple Mail, Outlook for Mac (2011 + 2016), and iOS Mail. Here’s what the interactive quiz looked like in those email clients:</p>
<p>We had a few requests from the email community asking how we created the email. Here’s a breakdown of how you can build your own interactive quiz in an email.</p>
<h2>The Quiz</h2>
<p>The concept for the structure of the quiz revolves around “slides” connected to radio buttons. Each “slide” in the quiz houses the content for a single question that is only visible when a player checks a radio button. Players simply move to the “next” slide after answering a correct question.</p>
<p><img src="https://d31v04zdn5vmni.cloudfront.net/blog/wp-content/uploads/2017/05/quiz-slides.png" alt="quiz-slides"></p>
<h3>A Step-by-Step Guide Building Your Own Quiz</h3>
<p>We built a stripped down, boilerplate quiz template for you to use and follow along with as we walk through how to build your own interactive email quiz:</p>
<h4>1. Set up the radio buttons</h4>
<p>At the top of the content section where the quiz is placed, there is a group of <strong>radio buttons</strong>:</p>
<pre><code>&lt;input type="radio" name="slide" id="one" checked&gt; 
&lt;input type="radio" name="slide" id="two"&gt; 
&lt;input type="radio" name="slide" id="three"&gt;</code></pre>
<p>Each input type is defined as <strong>type=”radio”</strong> so they can be seen as radio buttons. Use the same name attribute—<strong>name=”slide”</strong>—for each radio button so that they are associated as a group. Then, to make sure each button can be targeted, give each radio button a unique id and check the first “slide” to display by default with a checked attribute.</p>
<p>We’ll also want to hide the radio buttons by default using the following CSS:</p>
<pre><code>input { 
  display: none; 
}</code> 
</pre>
<h4>2. Connect the slides with radio buttons</h4>
<p>Below the radio buttons, place the “slides” that will be associated with them.</p>
<pre><code> 
&lt;div class="wrapper"&gt; 
  &lt;div class="slide1"&gt; 
     
  &lt;/div&gt; 
  &lt;div class="slide2"&gt; 
     
  &lt;/div&gt; 
  &lt;div class="slide3"&gt; 
     
  &lt;/div&gt; 
&lt;/div&gt; 
</code> 
</pre>
<p><strong>.slide1</strong> corresponds to the radio button of <strong>id=”one”</strong> and should have the content for Question #1, .slide2 to id=”two” with Question #2, and so forth. The goal is to connect the content to a radio button so that it only displays when that radio button is checked. To make this happen, hide the slides’ divs by default, and only display them when their corresponding radio button is checked:</p>
<pre><code> 
 
.slide1, .slide2, .slide3 { 
	display: none; 
} 
 
#one:checked ~* .slide1, #two:checked ~* .slide2, #three:checked ~* .slide3 { 
	display: block !important; 
} 
</code> 
</pre>
<p>The next step is to create the HTML structure for a question.</p>
<h4>3. Create the HTML Structure</h4>
<p>To create a multiple choice question with only one correct answer, we will use another group of radio buttons. The easiest coding convention to follow is “label &gt; input &gt; content associated with that label,” and continue nesting labels until all of the questions are listed.</p>
<p>The HTML structure for our question with three possible answers will look like this:</p>
<pre><code> 
&lt;h1&gt;Insert Question title here&lt;/h1&gt; 
&lt;label&gt; 
  &lt;input name="quiz"&gt; 
   
  &lt;label&gt; 
    &lt;input name="quiz"&gt; 
     
    &lt;label&gt; 
      &lt;input name="quiz"&gt; 
       
    &lt;/label&gt; 
  &lt;/label&gt; 
&lt;/label&gt; 
</code> 
</pre>
<p>Each input has the same name (name=”quiz”) so they are associated as a group and <strong>only one</strong> can be true at a time.</p>
<p>Let’s fill this with some real content:</p>
<pre><code> 
&lt;h1&gt;What is 1 + 1?&lt;/h1&gt; 
&lt;label&gt; 
  &lt;input name="quiz" class="wrong"&gt; 
  &lt;div&gt;A) 1&lt;/div&gt; 
  &lt;label&gt; 
    &lt;input name="quiz" class="correct"&gt; 
    &lt;div&gt;B) 2&lt;/div&gt; 
    &lt;label&gt; 
      &lt;input name="quiz" class="wrong"&gt; 
      &lt;div&gt;C) 3&lt;/div&gt; 
    &lt;/label&gt; 
  &lt;/label&gt; 
&lt;/label&gt; 
</code> 
</pre>
<p>In this example, the correct answer to “What is 1 + 1?” is B) 2. We will assign classes of <strong>.wrong</strong> to wrong answers and <strong>.correct</strong> to the correct answer to help us display success or error messages and styling.</p>
<h4>4. Defining the success and error messages</h4>
<p>Let’s add in success and error messages in the HTML:</p>
<pre><code> 
&lt;h1&gt;What is 1 + 1?&lt;/h1&gt; 
&lt;label&gt; 
  &lt;input name="quiz" class="wrong"&gt; 
  &lt;div&gt;A) 1&lt;/div&gt; 
  &lt;label&gt; 
    &lt;input name="quiz" class="correct"&gt; 
    &lt;div&gt;B) 2&lt;/div&gt; 
    &lt;label&gt; 
      &lt;input name="quiz" class="wrong"&gt; 
      &lt;div&gt;C) 3&lt;/div&gt; 
    &lt;div class="error"&gt;Try again!&lt;/div&gt; 
    &lt;/label&gt; 
  &lt;div class="success"&gt;Correct!&lt;/div&gt; 
  &lt;label for="two" class="next"&gt;Next Question →&lt;/label&gt; 
  &lt;/label&gt; 
&lt;div class="error"&gt;Wrong =(&lt;/div&gt; 
&lt;/label&gt; 
</code> 
</pre>
<p>Here we are placing these success or error messages right before the closing <strong>&lt;/label&gt;</strong> of their corresponding answer. Since we are nesting, it essentially follows a reverse order. So, the first closing <strong>&lt;/label&gt;</strong> applies to answer C, the second closing <strong>&lt;/label&gt;</strong> to answer B, and the third closing <strong>&lt;/label&gt;</strong> to answer A.</p>
<p>We’ll want to hide those messages by default:</p>
<pre><code> 
.error, .success, .next { 
    display: none; 
} 
</code> 
</pre>
<p>And only display them when their corresponding radio button is checked:</p>
<pre><code> 
.wrong:checked ~ .error { 
    display: inline-block !important; 
} 
.correct:checked ~ .success { 
    display: inline-block !important; 
} 
.correct:checked ~ .next { 
    display: inline-block !important; 
} 
</code> 
</pre>
<p>We’re essentially saying that when a player chooses:</p>
<ul>
<li>A wrong answer, the <strong>.wrong radio button is checked</strong> and the error message is displayed</li>
<li>A correct answer, the <strong>.correct radio button is checked</strong> and the success message is displayed</li>
</ul>
<p>The success message also has a special <strong>&lt;label&gt;</strong> of “Next Question” that directs users to move on with the quiz.</p>
<pre><code>&lt;label for="two" class="next"&gt;Next Question →&lt;/label&gt;</code></pre>
<p>The <strong>“for” attribute</strong> is powerful for interactivity in email because it lets you map items to any input field—even if they are separated from each other in the HTML.</p>
<p>In this example, we’re saying <strong>for=”two”</strong>, which corresponds to the input with the <strong>id=”two”</strong>—this is our second “slide” and question in our interactive quiz. In slide “two” and the second question of the quiz, the <strong>&lt;label&gt;</strong> will be for=”three” to map to the third question of the quiz. Thus, we can map the interaction of an input from inside one slide to change to another slide with the for attribute.</p>
<p><img src="http://ift.tt/2sij4Qk" alt="label-mapping"></p>
<p>And there you have the content for the HTML of your quiz. You can simply reuse the same structure across all questions and just change the correct/wrong status and messages as needed.</p>
<h3>Fallback</h3>
<p>Since not all clients support an interactive quiz, we created a fallback image and call-to-action button that linked to a customized web version of the email where users could participate.</p>
<p><img src="http://ift.tt/2pWp5wY" alt="How to Build an Interactive Email"></p>
<p>This was shown by default and then hidden for WebKit clients where the quiz was activated:</p>
<pre><code> 
@media screen and (-webkit-min-device-pixel-ratio: 0) { 
  /* Insert CSS here */ 
} 
</code> 
</pre>
<p>It was easy to check that the fallback implemented worked across all of the email clients that don’t support interactivity, by using <a href="http://ift.tt/2qrE9pw">Checklist</a>. <a href="http://ift.tt/2pWcAkW">See how the email rendered</a> across multiple email clients with varying support for interactivity.</p>
<div>
<table>
<tbody>
<tr>
<td><img src="http://ift.tt/255QNH4" alt=""></td>
<td>
<h2>Run a Checklist for every email</h2>
<p>Preview your email in 70+ apps and devices, validate that your links, images, and tracking work properly, test your email’s load time, and more–all before pressing send.</p>
<p><a href="http://ift.tt/2qrG8ue">Try Litmus free →</a></p>
</td>
</tr>
</tbody>
</table>
</div>
<h2>High Social Engagement</h2>
<p>It’s important to measure the success of any email campaign. For our interactive email quiz we used Twitter activity as a measure of success for the campaign. The campaign saw around 650 tweets on Twitter with the #LitmusLive hashtag—a huge success for us!</p>
<h2>Sharing is caring</h2>
<p>You now have everything you need to add an interactive quiz to your next email, and we can’t wait to see how you use it! If you feel like sharing your interactive quiz campaign, head over to the Community. And if you have any questions, let us know—we’re here to help.</p>
<p><a href="http://ift.tt/2qrAesQ">Head to the Community →</a></p>
<div><a href="http://ift.tt/2pWsfRd">http://ift.tt/2pWsfRd</a></div>


How to Build an Interactive Quiz in an Email

How to Build an Interactive Quiz in an Email

Top Stories