Click to Sign Up for a 7 Day Free Trial!

Email Development

How We Created Our Interactive Scrolling Halloween Email

Email On Acid

For Halloween we sent an interactive scrolling email featuring a person walking through a landscape of "monsters" to deliver an email. There was a lot of interest in how we did it so I'll go over the techniques in this article.

View the Halloween email here

Faux Fixed Technique

I'm calling this technique "faux-fixed" because this technique uses some tricks to achieve an appearance of an object being fixed in a container without using CSS positioning attributes. You can then scroll the content in the container under and over the fixed object. (The name is inspired from Kristian Robinson's "faux-video" technique).

Normally, statically positioning an object within a scrolling container requires that the object be styled using fixed positioning (position:fixed). However because position:fixed is not supported in most of the major email clients, we need to resort to using some CSS trickery to achieve this.

Because we're not using pseudo-classes, this technique has a surprisingly wide email client support from iOS, Apple Mail as well as all the Gmail apps (Web, Android and iOS).

Simple Example

To illustrate how this works, I'll use an example of a basketball "falling" through a hoop.

View in CodePen

The core of the technique involves 3 parts, a fixed object (the ball), a background image (the backboard) and a foreground image (the hoop). The aim of the technique sandwiches the fixed object so it appears over the background and beneath the foreground so it looks like the ball is going into the hoop when the user scrolls the content.


We wrap the background and foreground image in a container with an overflow hidden so the content scrolls. Then we statically position the ball on top of the container.

Since fixed positioning is not supported in email clients we leverage this clever technique by Mark Robbins to implement absolute positioning using margins. The code for the ball is actually placed outside the scrolling container so that it stays in place when the content in the container is scrolled.

<!-- "absolute" position ball over scrolling container -->
<div style="height:0px;max-height:0px;overflow:visible!important;">
  <div style="display:inline-block;position:relative;opacity:0.999;margin-top:100px;margin-left:166px;width:70px;"><img src="bball.png" width="100%"></div>
</div>

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

Sandwiching The Fixed Object

Interestingly here's where we run into browser quirks. Out of the box this technique works in Safari (and iOS). However in Chrome (and Android), the ball appears hidden by the background image. Here's where a trick comes handy to shift the context so the ball appears above the background. The technique involves creating a new "stacking context". You have probably used z-index to change the stacking order of absolutely positioned elements, however did you know there are ways that allow you to "bump up" elements to the top by creating a new stacking context? This article goes into the details.

As mentioned in the article we can create a new stacking context by using opacity and position. The reason for using two methods instead of one is that Gmail supports opacity but not position and Yahoo! Mail supports position (relative) but not opacity. Unfortunately, Outlook.com supports neither so we'll have to exclude that client.

Here's the code to implement the basketball example without fallbacks.


<!-- "absolute" position ball above scrolling container -->
<div style="height:0px;max-height:0px;overflow:visible!important;">
  <div style="display:inline-block;position:relative;opacity:0.999;margin-top:100px;margin-left:166px;width:70px;"><img src="bball.png" width="100%"></div>
</div>

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

View in CodePen


Supported Clients


Email client Support
Android 4.4 Native Client
Apple Mail  
Gmail App (Android & iOS)  
Gmail App (Pop/IMAP)
iOS Mail  
Outlook for Mac  
Outlook for Windows
Outlook.com
Samsung Native Client  
Yahoo! Mail Webmail  
Yahoo! Mail App



Fallback

As in most interactive email designs, we'll need a fallback for non supported clients. Our strategy is to show the fallback by default and then display the interactive content when we detect clients that support it.

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

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

The code to enable interactivity is slightly more complicated since there isn't a straightforward way to detect clients that support it.

Firstly, we enable interactivity only for clients that support media queries.

  @media screen {
    .interactive {
      display:block!important;
      max-height:none!important;
      overflow:visible!important;
    }
    .fallback{
      display:none;
    }
  }

Then we need to block the Android 4.4 client that does support media queries but not this type of interactivity. Because Android 4.4 also does not support the calc CSS function we can use the following code to hide interactivity from Android.

  @media (max-device-width:800px)   { 
    /* 
    Block for Android 4.4 using calc(vh)
    We don't filter by (min-resolution: .001dpcm) because 4.4 native doesn't respond to it
    */

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

And finally this does not work in the Android Outlook App. The Android Outlook app supports media queries but not attribute selectors, so we add the "summary=block-outlook-android" attribute selectors to the interactive and fallback sections and use that just to prevent interactivity in 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 {
      display:none!important;
    }
    .fallback{
      max-height:none!important;
    }
    /* Reenable on Samsung only: 
      Outlook on android does not support summary attribute */
    .interactive[summary="block-outlook-android"] {
      display:block!important;
    }
    .fallback[summary="block-outlook-android"] {
       max-height:calc(0vh - 1000px)!important;
    }
  }

View the complete code in CodePen

Halloween Design.

View the Halloween email here

Our Halloween design used the same principles described above. We had an avatar of a bearded man as the fixed object, an animated landscape with monsters as the background image and an image featuring tree branches and bats with a transparent background as the foreground image.

For the fallback, we displayed a static image and linked it to the web version where readers on unsupported clients can experience on a browser.



Many Possibilities

There's a lot of things that can be done with this design. Take a look at a Taco Bell sent a cool email with a scrolling design two years ago that used CSS fixed positioning that is no longer supported in the latest iOS Mail (iOS11) - however this can be implemented using the faux-fixed technique. You can also have a race car race down a track or a bird flying through clouds. If you implement something similar, please do post a comment here as I'd love to see it.

Don’t Guess, Test!

At Email on Acid, testing is at the core of our mission. After you’ve finished setting up the perfect design for your campaign, ensure the email looks fantastic in EVERY inbox. Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices.

Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!

About the Author

Justin Khoo

Justin Khoo

Justin Khoo (@freshinbox) is an email developer and writes about email techniques and new innovations. He has been involved in many aspects of email over the past decade, everything from building webmail clients and email campaign services to coding HTML emails.

Leave a Comment