Email Development August 30, 2016 • Kyle Lapaglia

Tutorial: CSS Fixed Positioning in Interactive Email

In his previous article, What You Need to Know about CSS Fixed Positioning in Email, Justin covered how fixed position can be used in emails and what some of their quirks are, particularly in the iOS email client. This article shows off a fun example that we created and will show how you can create your own interactive email that takes advantage of fixed positioning.

Dunk the Ball

Taking inspiration from the Taco Bell email in his previous article, Justin came up with an email that leverages fixed positioning to help even email geeks dunk like Michael Jordan. By scrolling the email, the recipient makes a basketball fall through clouds, through a hoop and into a trash can. Naturally this example only works in clients that support fixed positioning - iOS and the Samsung Android client. Dunk the Ball

Send yourself the example here. The example also has an added surprise in that the cheers Swoosh! and Yeah! appear just as the ball goes through the hoop. Like the Taco Bell example, the basic design starts with 3 layers. A background layer, a middle layer with the basketball and a foreground layer with the clouds and the basketball net. The background and foreground layer is “absolute positioned” (in quotes because we don’t use position: absolute) whereas the basketball layer is fixed positioned so the ball stays at a fixed position on the screen while the scene scrolls by when the user scrolls the email.

Absolute Positioning Using Margins

The Taco Bell email used position:absolute, which is supported by iOS and most webkit clients. However, inexplicably it is not supported by the Samsung android email client. So we resort to a neat trick created by our friend Mark Robbins that uses margins to absolutely position elements. Head over to the Rebelmail blog if you’d like to read the nitty gritty of it. Needless to say we apply that technique to the bottom and top layer and so that the top layer is positioned over the bottom one.

<style>
#background,#foreground{
  position:relative;
  top:0px;
  max-height:0px;
  overflow:visible;
  display:inline-block;
}
</style>
<div style="position:relative;height:1212px;width:550px;">
  <div id="background" style="z-index:200;">
    <img src="https://.../bball-background.png" style="display:block;">
  </div>
  <div id="fixedlayer" style="z-index:300;position:fixed;top:200px;">
    <img src="https://.../bball-tall.png">
  </div>
  <div id="foreground" style="z-index:400;">
     <img src="https://.../bball-foreground.png" style="display:block;">
  </div>
</div>

Reveal on Scroll Effect

Revealing the cheers when the ball enters the hoop requires the addition of two more layers beneath the initial 3 layers. One layer absolutely positioned with the Swoosh and Yeah! cheers positioned next to the hoop and another layer between the cheers and the background that contains a blocking layer with transparent squares. The blocking layer is fixed positioned (so it stays in the same position), just like the basketball. The squares are positioned so that they appear on both sides of the basketball. In the image below, the blocker layer is darkened to show blocking effect. When the basketball passes through the hoop, the transparent squares pass over the swoosh word and the word appears! Using this same technique you can create "treasure hunt" emails where special codes can be made to appear once the recipient scrolls the email to a specific position.

Fallbacks and Handling Quirks

Since the only clients that support fixed positioning are ones that support media queries, we initially hide the entire container and show fallback content. Then in a max-device-width media query, we hide the fallback content and show the interactive content. This works for iOS Mail and some versions of Android.

<style>
  @media (max-device-width: 1024px) {
    .kinetic{
      display:block!important;
      max-height:none!important;
    }
    .fallback{
      display:none!important;
    }
  }
</style>
<div class="fallback">If you were on a cooler email client you'd be able to… Dunk the Ball!</div>
<div class="kinetic" style="display:none;max-height:0;overflow:hidden;">
   … interactive content ...
</div>

As covered in our previous article on fixed positioning, iOS has multiple quirks when it comes to fixed positioning that we need to take into account. Be sure to familiarize yourself with those quirks if you decide to experiment with fixed positioning in email. Here are a couple more we found with this email.

Quirk: Disappearing Basketball

For some reason, after the tracking pixel added by our ESP finishes loading (30-60 seconds) the basketball will disappear! We weren't able to find a way around this bug, and we can't remove the tracking pixel. Still, 30 seconds is about as long as most emails are viewed for. If we find a fix for this, we'll let you know!

Quirk: iOS Mail Cache

If the recipient's iOS Mail app has been open for a long time, the email may not load correctly. Usually this causes the basketball to appear too high in the email, and to hide behind the top text block instead of remaining fixed in the center of the screen. This can be fixed by killing the app (double tap the home button, drag Mail app off the screen) and then reopening the email. This is another one we're looking for a fix for, and we'll let you know if we figure it out.