#Emailweekly: The scariest email in your inbox?

For those of you signed up to our great weekly newsletter, you’ll have noticed some spooky goings on in your inbox last week. We decided to spend a bit of time on it for a Halloween special and send out an email no’one would be expecting…

The brief: What scares us #emailgeeks the most?
All image emails?
Non responsive emails?
Sending out a broken email…

We’ve all been there. That post send moment when you realise that your campaign has gone out wrong. The panic sets in as you contemplate how you’re going to tell the boss. If only you could go back in time, if only you could create an email that can fix itself…

The approach:
Like any email build, interactive or otherwise, it’s always best to start with a baseline. One that caters for the most basic rendering experience (here’s looking at you Outlook). So with that in mind we felt that receiving the standard newsletter would be a suitable fallback.

The only difference this time round, was that we decided to tailor the intro copy based on client. Essentially we created 3 different intros. One for Outlook, one for -webkit- and a generic version for everyone else.

To target Outlook we used the following conditional code:

<!--[if gte mso 9 | IE]>
   <p class="fontsize26 bodycopy outlookcopy" style="padding: 20px 0 0 0; ">
   It looks like you're already using Outlook...<br>
   It doesn't get much scarier than that!<br>
   Not a follower of Tim Cook?
   Why not come and take a <webversion>look</webversion>
   </p>
<![endif]-->

 

For the other versions we used a combination of CSS and media queries to hide and reveal the correct copy. Wrapping the 2 intros in conditional comments to hide them both in Outlook.

 

<!--[if mso]><!-->
  <p class="fontsize26 bodycopy generic-copy">
    No tricks, but we do have some treats<br>
    Some email design & code, get comfy in your seats<br>
    Find an email client that supports checkbox<br>
    Or <webversion>view online</webversion> in your favourite spooky Socks<br>
  </p>
  <p class="fontsize26 bodycopy webkit-copy" style="display: none">
    Once upon a Wednesday in November<br>
    Came an email you would always remember<br>
    A whole list of things broken and dead<br>
    Which were fixed by a button <strong>BIG and <span style="color: #e00f41">RED</span></strong>
  </p>
<!--<![endif]-->

 

In addition to this we also had to use a bit of gmail targeting to make sure that the -webkit- styles and buttons wouldn’t get picked up:

 

/* Target Gmail */
u + .body .generic-copy{display:block!important;}
u + .body .webkit-copy{display:none!important;}
u + .body .webkit-button{display:none!important;}

 

Next we moved onto the fun interactive Halloween bit. Because support for interactive emails is limited to those clients that support -webkit- we were able to use the following media query to target only those clients:

 

/* Target Webkit, Applemail and Browsers */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
}

 

We could then set about creating a set of CSS classes that would intentionally break the email structure. I have to say, it’s a very strange feeling to intentionally break an email. We as #emailgeeks spend so much time testing and problem solving bugs that it was actually quite a refreshing change to force errors.

 

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .gmail-copy, .generic-copy {display: none;}
    .webkit-copy {display: block!important;}
    .gmail-button {display: none; height: 0; width: 0; line-height: 0;}
    .webkit-button {display: block!important; height: auto; width: 200px; padding: 20px 0}
    /* Add positive margin 1 */
    .margin-pos-1 {margin: 15px 100px 5px 12px;}
    /* Add positive margin 2 */
    .margin-pos-2 {margin: 80px 10px 50px 40px;}
    /* Add positive padding */
    .pad-pos {padding: 5px 20px 100px 5px;}
    /* incorrect font stack*/
    .font-says-no {font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif!important;}
    /* Increase font size */
    .font-house-massive {font-size: 100px;}
    /* Decrease font size */
    .font-sml {font-size: 3px!important;}
    /* hide correct salutation */
    .fname-pos {display: none;}
    /* Display wrong salutation */
    .fname-neg {display: inline-block!important; font-size:inherit; line-height: inherit;}
    /* Decrease line-height */
    .line-height-sml {line-height: 2px;}
    /* Increase line-height */
    .line-height-big {line-height: 80px;}
    /* Missing image */
    .backgroundghoul {background-image:url(http://images.emlcdn.net/)!important;}
    /* faux outlook 1px keyline */
    .line {border-bottom: 1px solid white;}
    /* tile background image */
    .tile {background-repeat: repeat;background-size: 25%;}
    /* Hide unsubscribe */
    .unsub {color:#333; text-decoration: none;}
}

 

Once created we could then apply these classes to different parts of the email to give the illusion that the email was broken.

The next stage was to add the interactive code so that we could undo the CSS we’ve just created. Firstly we would need to add a checkbox <input> into our email:

 

<!--[if mso]><!-->
    <input type="checkbox" name="bustin-makes-me-feel-good" id="bustin-makes-me-feel-good" style="mso-hide:all; display:none!important; height:0px; max-height:0px; overflow:hidden; font-size:0; margin-left:-10000px;">
<!--<![endif]-->

 

For ease we tend to place the input straight after the openingtag. Using name and id attributes allows us to link the to the input and also target it with CSS. Finally we use MSO conditional code and styles to make sure the checkbox is hidden across all clients. This is because we don’t actually need to see the input as we’ll be using a to turn the checkbox on and off.

Next we needed to add the . We had decided early on that we wanted to use a big red button as we wanted to make it quite obvious what you needed to do. In order to work we needed to wrap the button image in a tag. By matching the id and for attributes with the name and id from the input allows us to link the 2 together. This is what allows the user to turn the interactive elements on and off within the email.

 

<!--[if mso]><!-->
  <label id="bustin-makes-me-feel-good" for="bustin-makes-me-feel-good">
    <img class="webkit-button" src="https://arcdn.net/ActionRocket/Email-weekly-email/Build/images/ar-button.png" width="200" alt="Bustin makes me feel good" border="0" style="display: none"/>
  </label>
<!--<![endif]-->

 

Now that we have successfully got the input turning on and off we could look at targeting the classes we originally created to reverse the styles we had already applied via CSS. To do this we used the following piece of code:

 

#id:checked ~ * .classname {/*styles in here*/}

 

By using this CSS selector we are essentially declaring that when the input(#id) is :checked target all sibling elements (~) with any (*) matching .classname with the following styles. With this logic it was a simple case of targeting each of the classes within the media query and overwriting the styles using !important.

 

/* I ain't afraid of no ghost */
    #bustin-makes-me-feel-good:checked ~ * .margin-pos-1 {margin:0 !important;}
    #bustin-makes-me-feel-good:checked ~ * .margin-pos-2 {margin:0 !important;}
    #bustin-makes-me-feel-good:checked ~ * .pad-pos {padding:10px !important;}
    #bustin-makes-me-feel-good:checked ~ * .font-says-no {font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;}
    #bustin-makes-me-feel-good:checked ~ * .font-house-massive {font-size:inherit !important;}
    #bustin-makes-me-feel-good:checked ~ * .font-sml {font-size:28px !important;}
    #bustin-makes-me-feel-good:checked ~ * .fname-pos {display: inline-block !important; font-size:90px; line-height: 105px; padding:20px 0 0 0; letter-spacing: -5px; font-weight:700;}
    #bustin-makes-me-feel-good:checked ~ * .fname-neg {display: none !important;}
    #bustin-makes-me-feel-good:checked ~ * .font-house-massive {font-size:inherit !important;}
    #bustin-makes-me-feel-good:checked ~ * .line-height-sml {line-height: inherit !important;}
    #bustin-makes-me-feel-good:checked ~ * .line-height-big {line-height: inherit !important;}
    #bustin-makes-me-feel-good:checked ~ * .backgroundghoul {background-image:url(http://images.emlcdn.net/cdn/1152/2510f3ed-ef1f-4206-9fa9-2fd0c6f11226/eyes.png)!important; background-size: 100% auto;}
    #bustin-makes-me-feel-good:checked ~ * .line {border-bottom: none!important}
    #bustin-makes-me-feel-good:checked ~ * .tile {background-repeat: no-repeat !important; background-size: cover !important;}
    #bustin-makes-me-feel-good:checked ~ * .unsub {color:inherit !important; text-decoration: underline !important;}

 

So there it is. A scary, broken email, fixable at the click of a button. Why did it work so well? Well, maybe it was because it really did trick some of you into thinking there were mistakes in the email, and we had messed up. OR maybe it was simply because it was awesome!

Here it is again for those of you unlucky enough not to receive it:

 

  • Sixxiron

    Not sure if you meant to do this to make a point of broken emails, but the email embedded at the end of this post looks busted AF. Again, maybe I’m missing the point/joke. Love you guys tho!

    • Action Rocket

      Hey! This is what the email actually looked like in the inbox. You need to click the red CTA at the top which fixes the email, it will then render correctly 🙂