Advertisement
  1. Web Design
  2. Case Study
Webdesign

How They Did It: Inception Explained and Mailchimp's 2012 Year in Review

by
Length:MediumLanguages:

One-off marketing pages and sites are increasingly popular; in particular, these "focused interaction experiences" have grown around the entertainment industry, reporting, and product pitches. Today, we will be focusing on the nuts and bolts that went into building inception-explained.com and Mailchimp's 2012 Year in Review.

inception-screen
mailchimp-screen

Both of these sites have some similarities in terms of technical implementation, and stark differences in other ways. We've picked these two sites because they represent a large trend in web interaction design: modifying the default behavior of scrolling interaction by creating custom animations and/or content transformations that are triggered in some way by the scroll position. So let's dive in!


General Overview: The High Level Technical Explanation

For both of these sites, the most obvious feature is the manipulation of scrolling interaction. Both sites have manipulated the scroll event with JavaScript to behave differently than a default static document.

Mailchimp's manipulation of the scroll event is relatively subtle; While scrolling triggers background changes and some content crossfades, some default scrolling behavior exists; the right content section scrolls as normal, offering an accessible interface to consume the data-driven report. The report is easily traversible in a secondary way via links on the left, which trigger a scroll animation. The report relies heavily on jQuery Waypoints, a jQuery plugin that watches the scroll event to see when a certain "waypoint" has been reached via scroll. In particular, some pseudo-code may explain how this would be used for the MailChimp implementation.

The above code is an example of what MailChimp might have done to achieve some of these effects. jQuery Waypoints would also be a suitable way to create "sticky" nav elements, with something like this:

Inception Explained has a much more involved manipulation of scroll behavior.

inception-how

Built by Matt Dempsey, the interactive infographic relies heavily on CSS3 animations and JavaScript-based animations powered by John Polacek's Scrollorama, a jQuery plugin built basically to do exactly the kinds of manipulations Matt has done.


General Overview: The Top Level Content Explanation

Let's talk about content.

For both of these sites, the content is one of the keys to understanding the design decisions that were made (as is true for any well thought out design). Explaining the high-level plot overview of Inception is a very different task than publicly reviewing the last year's accomplishments and failures of an email marketing service business.

Inception Explained, Explained

For Inception Explained, the content author has taken a relatively complex narrative and extracted the primary plot points into a new medium.

inception-story

This narrative has a "sibling" artifact (the movie Inception) which the viewer must have seen previously to adequately identify with the design decisions. The site does not function well as a form of entertainment summary vehicle (in which someone who hasn't seen the film can get an informative and still entertaining "gist" of the story). Instead, it serves to help clear the cobwebs of confusion by breaking down the primary turning points and showing indicators that explain those turning points.

If you have seen Inception, you understand that the primary build of the plot is broken down into "levels", which are representative of "dreams within dreams." Inception Explained takes you through these levels one at a time, utilizing a few constant visual factors to help reduce complexity. In particular, the seven main characters and their states are represented visually by circles throughout the narrative towards the bottom of the page.

inception-bg

Beyond this, a background signifier of the venue of the current level is also an indicator; An airplane is shown for the "reality" level, Yusuf's van for Level One, Arthur's dream in a hotel in Level Two, mountains signifying the snowy scene in Level three, and finally somewhat vague bars that likely signify the city buildings in the "Limbo" level. All of this imagery, as anyone who has seen the movie would understand, are iconic of the different levels represented in the movie.

An animating clock is shown at the top right, which shows the relationship of time to reality in each level; as the characters goes deeper into each level, the time slows down (so that minutes eventually seem like decades).

inception-clock

The plot is explained, and icons paired with simple animations represent turning points in the plot. Explanatory paragraphs are the primary vehicle for users to understand the context of the animations and state changes.

MailChimp: The Honest Voice of a Chimpanzee Named Freddie

MailChimp's content strategy for "A Look Back" is very different, of course, than Inception Explained. "A Look Back" is MailChimp's annual report, summarizing both qualitative and quantitative aspects of their performance in 2012.

mailchimp-2012

The content strategy here follows less of a narrative, and instead is segmented into a semblance of "sub-narratives", driven by marketing, quantitative messaging, and a strong brand voice. These different sub-narratives are clearly segmented: "The App", "Support", "Operations", "Social", "Geography", and "Good Ideas" are the sections outlined in the nav, directly correlating to visual shifts in the design and content segmentation. These sections are bookended by MailChimp's admirable spokesman chimp (Freddie) looking out over the city of Atlanta at the beginning, and then turning to wave to the audience at the end.

mailchimp-bye

MailChimp tackles a lot of ground in terms of content strategy in this report; in particular, the scale of impact and growth MailChimp has realized in the last year is the primary message. A major metric of proof is the first thing in the first sub-narrative - "Emails sent: 34,796,235,769". That's a large number of anything, and that's what serves as proof that MailChimp does email best.

mailchimp-sent

This is a "best-foot-forward" strategy. However, it doesn't end there; MailChimp has made it a clear point to retain a friendly voice that matches the whimsy of the Chimp mascot Freddie. In the same section, we see a "Party-Poopers" signifier (with 1.9% of MailChimp's userbase falling into this category).

mailchimp-poop

This accomplishes a sense of transparency while retaining the overall positive and playful tone MailChimp has pre-established. It directly addresses the bad, framing the metric as an enjoyable and entertaining experience for the reader. We can see similar notes throughout the content strategy for MailChimp.

mailchimp-supoenas

Now we will shift to talk about the technological implementation details.


Performance

There is a stark difference in performance of these two sites, primarily due to one major factor: the scroll-watching libraries operate on two very different paradigms for scroll event triggering.

scrollarama

In Scrollorama, animation code is executed on every scroll; this animation code animates all "animate-able" objects, causing a large amount of calculation and browser repaint to occur. However, for Inception explained, this is the most desired effect, as each pixel is relevant to the designed animations. This kind of intensive scroll-watching and subsequent animation function can cause a browser repaint on every scroll event. Unfortunately, for a site like Inception Explained, this scroll watching technique is necessary to accurately retain an animation state for each individual scroll position.

On the other hand, jQuery Waypoints allows the throttling of scroll events by setting a timeout and a "didScroll" variable.

waypoints

Beyond this, the onScroll function has a reduced set of functionality; in particular, it checks to see if a particular waypoint has been reached (hence the name), and fires user-defined functions when those waypoints are reached. This allows for much less DOM repainting, but also requires a sacrifice of flexibility, and may not work as well for more complex animations based on keyframes derived from the scroll position.


The Nitty Gritty: What did the Code Look Like?

While both projects have compressed their code, we can take a look at some of the core functions the two sites used.

Mailchimp

We'll look at Mailchimp's Waypoints implementation first. (Note: this code has been modified slightly from the original minifed version for readability.)

So let's step through this code to see what's going on.

First, we see a function that essentially receives an index of the section to make active. It does some things for special sections (like Freddie's pictures) and navs as well.

The Waypoint call and callback fire the set_active_section, and check for which direction the target was reached from. Mailchimp set the scroll throttling to 0, as well.

Mailchimp is also using Google Analytics to see what sections people are looking at, and checking how long it took them to look at those sections presumably to see how much time/engagement people are investing in each of the sections. Having this information will allow MailChimp to see the most common user "path" - whether people jumped around on the page, moved directly to one section or another, or went through the page sequentially, spending the same average amount of time per section.

A quick note: the && operator acts as a "if this then that" - something && somethingelse is somewhat equivalent to if(something){ somethingelse; } as && checks for the left side to be true before moving onto the right side.

Inception Explained Example Snippet

Inception Explained uses a very simple set of repeated functions based on Scrollorama.

This code is taken directly from the start of the Inception Explained script; here, we see an example of straightforward usage of Scrollorama's animate function (which is different from jQuery's animate function). These calls essentially are registering keyframes for elements for Scrollorama to watch and perform; for instance, the first animate call has a 300 pixel delay, a duration of 35e3 (or 35k), a start value of 100, and an end value of 1100.

This essentially means the following:

  • as the user scrolls,
  • once the user hits the delay value of 300 pixels (from the top of the site),
  • Scrollorama will animate the chosen element's specified property ( the "left" property of #reality .bg)
  • from 100px (the start value)
  • to 1100px (the end value)
  • over the course of 35k more pixels of scrolling.

Inception Explained has 300 different .animate() calls similar to this one.


Conclusion

We can see from both of these sites a similar interaction manipulation, with very different goals and significantly divergent effects.

MailChimp and Inception Explained have shown us the importance of content strategy and choosing the right tool for the job; furthermore, we can expect to see scrolling interaction develop even further, as touch devices continue to capture market share and swiping/scrolling gestures are even further developed as a standard interaction pattern.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.