How 5 Email Easter Eggs Helped Sell Out Litmus Live

[ 0 By

Using HTML5 video background or including a live, dynamic Twitter feed in our emails have created major hype around the launch of Litmus Live. We’re sending emails about emails to email lovers (so meta) and they love email easter eggs. These emails were repeatedly forwarded, shared on social media, and even written about. While there are proven tactics and topics that increase email virality, being the email geeks that we are, we’ve found including advanced and interactive techniques has led to some major buzz.

When it came to launching ticket sales for this year’s event, we wanted to keep the excitement going. We opted to combine advanced email hacks with some fun by hiding five “golden tickets” within the email. Each ticket was hidden using a unique email hack and the first subscriber to find a specific ticket and tweet about it (using the #TEDC15 hashtag and including a screenshot) won a free ticket to the conference of their choice: Boston or London.

Looking for this year’s Litmus Live?

Litmus Live (formerly known as The Email Design Conference) brings the email community together to celebrate their craft and give email professionals a platform to learn, share, and grow. With sessions covering everything from marketing strategy to innovative email development techniques and production processes, you’ll take away actionable advice that will have immediate impact.

Get all the details on Litmus Live →

The email was a huge hit—all tickets were found within moments (and we sold all of our early bird tickets in under 10 minutes with the buzz generated from this email). Email geeks loved the concept and playfulness of the email. View the email here:

Here’s a breakdown of the five hacks used to hide the golden tickets inside the email.

Golden Ticket #1: Hidden ALT Text

One of our favorite techniques to enhance email design is ALT text, which helps communicate the message when images cannot. The first golden ticket was a message hidden in the ALT text of an image. So, only users with images disabled could see this message. Fun fact: 43% of Gmail users view email with images off by default.

Here is what the ticket looked like with images on:

Screen Shot 2015-07-17 at 1.32.53 PM

Here is what the ticket looked like with images off:

Screen Shot 2015-07-17 at 1.33.14 PM

To create the ticket through ALT text, we first broke up the image into 3 different images each within their own table row and cell.

<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td>
          <img src="http://pages.litmus.com/l/31032/2015-06-10/363lv5/31032/61908/tedc15_line1.png" width="600" height="55" border="0" alt="Congratulations!"/>
        </td>
    </tr>
    <tr>
        <td>
          <img src="http://pages.litmus.com/l/31032/2015-06-10/363lv7/31032/61912/tedc15_line2.png" width="600" height="56" border="0" alt="You’ve found a golden ticket! Take a screenshot and tweet to @litmusapp with the #TEDC15 hashtag. Act fast—if you’re the first, you’re the winner!"/>
        </td>
    </tr>
    <tr>
        <td>
            <img src="http://pages.litmus.com/l/31032/2015-06-10/363lv9/31032/61914/tedc15_line3.png" width="600" height="56" border="0"  alt="GOLDEN TICKET #1: HIDDEN ALT TEXT"/>
        </td>
    </tr>
</table>

This allowed us to better style the ticket. Then, we simply styled the background of the images to contain a gold color and added in some simple font styling on the images. Here is an example of one of the images:

<img src="http://pages.litmus.com/l/31032/2015-06-10/363lv5/31032/61908/tedc15_line1.png" width="600" height="55" border="0" style="display: block; color: #333333; font-family: 'futura_md_btbold', Helvetica, Arial, sans-serif; background-color: #f3c478; font-weight: bold; text-align: center; font-size: 26px; line-height: 36px;" class="white-walkers" alt="Congratulations!"/>

(*Note: To make the ticket search harder, we converted all of our CSS class names to Game of Thrones references!)

Golden Ticket #2: Hidden Image

The second hidden golden ticket was one for the true email geeks that were searching the code of the email. This ticket was the most literal of the bunch, as it was literally a hidden ticket. We simply inserted an image into the email, but didn’t display it in any email client. Only subscribers who searched the source code would be able to find the unused image URL.

We hid the image in the email for all clients using this code:

<div style="width: 0px; height: 0px; display: none; mso-hide: all; overflow: hidden; position: absolute; z-index: -99;">
    <a href="https://litmus.com/conference/?utm_campaign=tedc15&utm_source=pardot&utm_medium=email" target="_blank">
        <img src="http://litmus-email-campaigns.s3.amazonaws.com/tedc15-tix-live/n2.png" style="width: 0px; height: 0px; max-width: 0px; max-height: 0px;"/>
    </a>
</div>

When users visited the image URL, they found the golden ticket:

gt2

Golden Ticket #3: Hidden ASCII Art

For the third hidden golden ticket, we used animated ASCII art right inside the email. We simply used the same text color as its background to hide the ASCII art.

Here’s how the ticket looked by default:

Screen Shot 2015-07-30 at 4.17.33 PM

The only way a user would be able to see this ticket would be to highlight that area of the email. Highlighting that section would reveal the ticket:

Screen Shot 2015-07-30 at 4.18.05 PM

Here’s how we implemented it:

<marquee>
    <span style="color: #ffffff; font-family: 'tisaproregular', Tisa Pro, Helvetica, Arial, sans-serif; font-size: 16px;">
        You’ve found a golden ticket!<br/>
        Take a screenshot and tweet to <a href="http://twitter.com/litmusapp" target="_blank" style="color: #ffffff;">@litmusapp</a> with the <a href="https://twitter.com/search?q=%23TEDC15&src=typd&vertical=default&f=tweets" style="color: #ffffff;" target="_blank">#TEDC15</a> hashtag. <br/>Act fast—if you’re the first, you’re the winner!
    </span><br/>
    <pre style="font: 4px/2px monospace; color: #ffffff;">
        <!-- ASCII art inserted here -->
    </pre>
</marquee>

And yes, we went old school and used a <marquee> tag to animate the ASCII art. We used picascii to generate the ASCII art. This was by far the most tweeted about ticket—people love highlighting text!

Golden Ticket #4: Hidden Hover

We started to ramp up the technicality and difficulty with the fourth hidden ticket. This ticket could only be found if hovered over on the exact area. Not only could this ticket only be seen on hover, it could only be seen in a specific email client: Outlook.com.

Here’s what the ticket looked like when found:


Here’s the base HTML for the Outlook.com ticket:

<div class="daenerys" style="width: 0px; height: 0px; max-height: 0px; overflow: hidden;">
    <div class="the-wall">HOVER ARROW FOR A SURPRISE =)</div>
    <div class="tyrion">→</div>
    <div class="wildlings">
        <div class="valyrian-steel">
            <img src="http://litmus-email-campaigns.s3.amazonaws.com/tedc15-tix-live/n4.png" style="width: 0px; height: 0px;" />
        </div>
    </div>
</div>

We used a targeting hack to make this ticket only display in Outlook.com. Inserting .ExternalClass before a class name and prepending a class name with .ecx is a way to use Outlook.com-specific CSS.

We simply hid the area by default and only displayed it on hover for Outlook.com using the following code:

.ExternalClass .ecxdaenerys {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 0;
}

.ExternalClass .ecxdaenerys:hover {
    opacity: 1;
}

The button had an opacity of zero by default, but turned to full transparency on hover. When users additionally hovered over the arrow on the button, it displayed the hidden ticket using the following CSS:

.tyrion:hover + .wildlings {
    display: block !important; 
    position: absolute !important;
    z-index: 10 !important;
}

.ExternalClass .ecxvalyrian-steel img {
    width: 650px !important;
    height: 350px !important;
}

Golden Ticket #5: Hidden Keyboard Command

The final ticket was perhaps the most difficult one to find and decode. Using only CSS, we created a hidden keyboard command for WebKit clients that displayed the hidden ticket when entered.

Here’s what the ticket looked like when found:


We drew inspiration from Mark Robbins’ CSS Super Mario game, which used CSS keyboard shortcuts. We ended up using several different email hacks to make this work, but the implementation ended up being pretty lightweight and simple.

First, due to limited support for the keyboard command functionality (and to make it somewhat tougher to find), we only enabled this hidden ticket to display in WebKit email clients. To do this we wrapped the CSS in a WebKit targeting media query:

@media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert CSS here */ }

To achieve the keyboard shortcut command, we use the <button> tag and some CSS magic. Also, since we only wanted this content to display for WebKit, we ended up using the content property to inject and draw all of the content of the ticket when triggered with the keyboard command. Thus, our HTML simply consisted of empty <div> tags:

<button class="kings-landing" accesskey="t" style="border: 0px; padding: 0px;"></button>
<div class="sansa lannisport">
    <div class="ramsay">
        <div class="winterfell"></div>
    </div>
</div>

We have used this content hack for a couple of our previous emails including the launch email for this year’s Litmus Live.

The keyboard command was able to be triggered using the following CSS:

.kings-landing:focus ~ .sansa {
    display: block !important;
}

By using the :focus state and selecting the sibling class of .sansa, the keyboard command of CTRL + ALT + T (since “t” was defined in the accesskey attribute in the button) triggered the hidden ticket as a fullscreen overlay. Here’s the CSS that made the overlay possible:

.sansa {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(131,189,193,0.7);
    display: none;
}

.winterfell::after {
    content: url('http://litmus-email-campaigns.s3.amazonaws.com/tedc15-tix-live/n5.png');
}

Updating the Golden Tickets in the Email

As the hidden tickets were found, we updated the email in real time. Here is an example of what a golden ticket looked like:

As soon a golden ticket was claimed, we updated the ticket image to show that it had already been found. Here is what an updated ticket looked like:

We also created a status board for the tickets at the bottom of the email to let subscribers know how many tickets were still available. This is what the status board looked like before any tickets were found:

status-board-empty

We made each ticket an image so we could easily update and overwrite it to reflect its status. Here’s what it looked like when they were all claimed:

Screen Shot 2015-07-30 at 4.05.00 PM

Get awesome emails about emails

Don’t miss our next mind-blowing email—or tips on how to create ones yourself. Subscribe to our monthly newsletter and get the latest email tips and tricks delivered straight to your inbox.