Methods to Create an Interactive Halloween E mail

This publish was up to date on October 8, 2018. It was initially printed in November 2017.

Halloween is one in every of our favourite instances of the yr at E mail on Acid. To rejoice this spooky and enjoyable season, we created an interactive scrolling Halloween e-mail that includes an individual strolling by a panorama of “monsters” to ship an e-mail. There was a whole lot of curiosity in how we did it, so we determined to create a code tutorial.

A phrase of warning, although: We encourage you to take a look at this system earlier than you ship it out to your subscribers. Any code change – irrespective of how tough – can break an e-mail.

View the Halloween e-mail right here

Fake-Fastened Method

We’re calling this system “faux-fixed” as a result of this system makes use of some tips to create an look of an object being mounted in a container with out utilizing CSS positioning attributes. You may then scroll the content material within the container beneath and over the mounted object. (The identify is impressed from Kristian Robinson’s “faux-video” approach).

Usually, positioning a static object inside a scrolling container requires us to model the thing with mounted positioning (place:mounted). Nonetheless, as a result of place:mounted is not supported in many of the main e-mail shoppers, we have to resort to utilizing some CSS trickery.

As a result of we’re not utilizing pseudo-classes, this system has a surprisingly broad e-mail consumer help, together with iOS, Apple Mail and all of the Gmail apps (Internet, Android and iOS).

Easy Instance

As an example how this works, right here’s a easy instance of a basketball “falling” by a hoop:

View in CodePen

The core of the approach includes three elements:

• A hard and fast object (the ball)
• A background picture (the backboard)
• A foreground picture (the ring).

This method sandwiches the mounted object, so it seems over the background and beneath the foreground, and it seems just like the ball goes into the ring when the consumer scrolls.

We wrap the background and foreground picture in a container with an overflow hidden so the content material scrolls. Then, we place the ball statically on high of the container.

Since mounted positioning just isn’t supported in e-mail shoppers, we’re utilizing a intelligent approach by Mark Robbins to use absolute positioning utilizing margins. The code for the ball is positioned outdoors the scrolling container, so it stays in place when the consumer scrolls the content material within the container.

<!-- "absolute" place ball over scrolling container -->
<div model="peak:0px;max-height:0px;overflow:seen!necessary;">
  <div model="show:inline-block;place:relative;opacity:0.999;margin-top:100px;margin-left:166px;width:70px;"><img src="https://www.emailonacid.com/weblog/article/email-development/how-we-created-out-interactive-scrolling-halloween-email/bball.png" width="100%"></div>
</div>

<!-- scrolling container -->
<div model="peak:360px;overflow:auto;">
 ...
</div>

Sandwiching the Fastened Object

We run into browser quirks after we “sandwich” the mounted object. Out of the field, this system works in Safari (and iOS). Nonetheless, in Chrome (and Android), the ball seems hidden by the background picture.

Nonetheless, there’s a trick we are able to use to shift the context so the ball seems above the background. The approach includes creating a brand new “stacking context.” You’ve in all probability used z-index to alter the stacking order of completely positioned components, however do you know there are methods to “bump up” components to the highest by creating a brand new stacking context? This text goes into the small print.

As talked about within the article, we are able to create a brand new stacking context through the use of opacity and place. It’s finest to make use of two strategies as a result of Gmail helps opacity however not place, and Yahoo! Mail helps place (relative) however not opacity. Sadly, Outlook.com helps neither so we’ll should exclude that consumer.

Right here’s the code to create the basketball instance with out fallbacks:

<!-- "absolute" place ball above scrolling container -->
<div model="peak:0px;max-height:0px;overflow:seen!necessary;">
  <div model="show:inline-block;place:relative;opacity:0.999;margin-top:100px;margin-left:166px;width:70px;"><img src="https://www.emailonacid.com/weblog/article/email-development/how-we-created-out-interactive-scrolling-halloween-email/bball.png" width="100%"></div>
</div>

<!-- scrolling container -->
<div model="peak:360px;max-height:400px;overflow:auto;border:2px stable black;background-color:#97defb;">
  <div model="peak:630px;background-image:url('background.png')">
  <img src="foreground.png" model="show:block;width:100%;place:relative;opacity:0.999;">
  </div>
</div>

View in CodePen

Supported Purchasers

*Since we initially despatched this e-mail in 2017, we’ve discovered that there are extra Gmail shoppers that help the interactive function, nevertheless, help just isn’t common due to GANGA. 

Fallback

As with most interactive e-mail designs, we’ll want a fallback for shoppers that don’t help the approach. Our technique is to indicate the fallback by default after which show the interactive content material after we detect shoppers that help it.

<!--[if !mso]><!-->
<div class="interactive" abstract="block-outlook-android" model="show:none;max-height:0px;overflow:hidden;">
   ... Interactive content material hidden by default ...
</div>  
<!--<![endif]-->

<div class="fallback" abstract="block-outlook-android">
  ... Fallback content material displayed by default ...
</div>

The code to allow interactivity is barely extra sophisticated since there isn’t a simple option to detect shoppers that help it.

First, we allow interactivity just for shoppers that help media queries.

  @media display screen {
    .interactive {
      show:block!necessary;
      max-height:none!necessary;
      overflow:seen!necessary;
    }
    .fallback{
      show:none;
    }
  }

Then, we have to block the Android 4.4 consumer that does help media queries however not this kind of interactivity. As a result of Android 4.4 additionally doesn’t help the calc CSS operate we are able to use the next code to cover interactivity from Android:

  @media (max-device-width:800px)   { 
    /* 
    Block for Android 4.4 utilizing calc(vh)
    We do not filter by (min-resolution: .001dpcm) as a result of 4.4 native does not reply to it
    */

    .interactive {
      show:block!necessary;
      overflow:hidden!necessary;
      max-height:0px!necessary;
      max-height:calc(100vh + 1000px)!necessary;
    }
    .fallback{
      show:block!necessary;
      overflow:hidden!necessary;
      max-height:none!necessary;
      max-height:calc(0vh - 1000px)!necessary;
    }
  }

And at last, this doesn’t work within the Android Outlook App. The Android Outlook app helps media queries however not attribute selectors, so we add the “abstract=block-outlook-android” attribute selectors to the interactive and fallback sections and use that to stop interactivity within the Android Outlook App.

  @media (max-device-width:800px) and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
    /* Block for Samsung and Outlook Android */
    .interactive {
      show:none!necessary;
    }
    .fallback{
      max-height:none!necessary;
    }
    /* Reenable on Samsung solely: 
      Outlook on android doesn't help abstract attribute */
    .interactive[summary="block-outlook-android"] {
      show:block!necessary;
    }
    .fallback[summary="block-outlook-android"] {
       max-height:calc(0vh - 1000px)!necessary;
    }
  }

View the whole code in CodePen

Halloween Design

View the Halloween e-mail right here

Our Halloween design used the identical rules we described within the basketball instance. We created an avatar of a bearded man because the mounted object, an animated panorama with monsters because the background picture, and a picture that includes tree branches and bats with a clear background because the foreground picture.

For the fallback, we displayed a static picture and linked it to the net model the place readers on unsupported shoppers can expertise the e-mail on a browser.

Many Prospects

There’s rather a lot that may be carried out with this design. Taco Bell despatched an incredible e-mail with a scrolling design two years in the past that used CSS mounted positioning (which is not supported within the newest iOS Mail). Nonetheless, we are able to create this design utilizing the faux-fixed approach. You may even have a race automotive race down a observe or a fowl flying by clouds. In the event you implement one thing related, please publish a remark under – we’d  like to see it.