Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

How They Did It: Apple’s “Elevating the Expedition”

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

We're tackling a big one today: Apple’s "Elevating the expedition" iPad marketing page.

Arguably it's an impressive site in itself, showing off some powerful JavaScript and CSS. Apple has also taken the concept of target audience very seriously in their decisions with this site. Let's dive in!

A First Glance: Fundamental Elements

This site comes as an addition to a long list of sites which utilize scrolling to enhance content presentation and trigger designed animations. As you scroll the site, you can see content populating as you scroll, including an elevation count on the right side that increases as you scroll down; this is an indicator that follows along with the narrative of the climber's story of ascent. 

We also see some subtle parallax animations (the clouds, for instance), a few illustration triggers that occur when they come into view, and some infinite animations that don't rely on any interaction whatsoever.

Very large images are used throughout the site (more on this in the next section), both as background images and as inline-content images.

Decisions: Why Best Practices Are Sometimes Relative

Apple made some interesting decisions with this marketing page. Perhaps the most glaring decision is the size of the assets on the page. Below, you can see a screenshot from Chrome's inspector. On a fast internet connection, the site takes well over 2s just to load the assets on the page. The total download size for the site exceeds 12.5Mb. Apple has, of course, optimized quite a few things (which we'll cover), but the question remains - how could anyone justify a 4Mb PNG for what's technically an "extra" cloud animation?

The answer, quite likely, is that Apple's target for this page will never experience any lag issues downloading the ginormous assets, and if they do, they may not care. The target audience is most likely on a Mac or another modern device screen, and they likely are on a fast network. Therefore, Apple has made the decision to support a particularly compelling experience, and allow for a lesser experience for those who likely aren't in their target market.

It should also be considered that this page is a marketing campaign that exists outside of Apple's sales flow, which means no one is barred from buying an iPad from their dial-up Dell on a SD CRT monitor, if they so choose.

Another interesting decision Apple has made (both here and in many other web projects) is the use of images for text headlines. 

This is a png

Most people know that Apple has, for many years, prided themselves on consistent, clear typography; the late Steve Jobs even took a calligraphy class at Reed college, which he says inspired him to bring articulated font control to the Mac operating system. With this priority in mind, Apple regularly chooses to render images of text instead of fonts for most of their headlines, presumably so that they have control over what everyone sees. While there is some expense to this decision, Apple trades that expense for the consistent quality and full control over the final product.

Interestingly, they've even gone so far as to do this with the number indicator on the oxygen chart. 

See for yourself, here's the SVG sprite

Progressive Enhancement

Apple employed a few simple progressive enhancement techniques in this site; namely, the design remains intact in all browsers, while the interactions may vary based on the browser's abilities. Apple uses css transform; and most of the progressive enhancements revolve around that aspect. Other elements, such as the slider input in the second section, are shown only in supporting browsers. Apple uses hacks like the following, which is used to hide elements in IE 7-9, but show in all other browsers. This is useful in rendering static elements for IE, such as the summit altitude graph.

.chart .oxygen-slider {
    position:absolute;
    top:246px;
    left:45px;
    display:none\9;
}
.ie-graph {
    display:none;
    display:block\9;
    position:relative;
    top:0;
}

The line display:none\9; and display:block\9; lines are only valid in IE 7-9; this small trick avoids using IE-specific stylesheets.

The slider and animation on this chart do not show up in IE.

Apple also employs JavaScript to do simple things like replacing images with their hi-res versions as necessary. While Chromium has officially implemented responsive images, it is still a long way from full adoption, so doing this through JavaScript is currently one of the only options available.

Massive Files: How They Get Away With It

How do you load massive files and get away with it? Let's take a few lessons from this site.

1. Optimize Where Possible

It's incredibly important to optimize, when possible. In this case, Apple has optimized some images a great deal. For instance, the 1024 × 1766 header image is 341 KB, and the pack items sprite is 49.9 KB. While no byte should be considered dispensable, these sizes are relatively quickly downloaded at most modern connection speeds, including many mobile carrier speeds.

2. Don't Block the Page

Images and scripts can significantly slow down the rendering speed of a page. When possible, use something like lazy-loading (loading with JavaScript once the page has already loaded in) to load large images, or include them in your CSS as background images if they are not a part of the semantic content flow. Apple is employing a post-loading JavaScript technique with all hi-res images, as previously discussed, and is also using CSS to set the large cloud PNG background images.

3. Placement is Key

Want your page to feel fast? focus on making the top 2000px as fast as possible. Regardless of what is below those 2000px, if you load in two window-heights' worth of content, it is much more likely that the content beyond 2000px is going to load by the time the user scrolls to it. Apple has made this a priority by pushing the large PNGs down to about 4400px from the top of the page, and has placed fast loading images towards the top.

How They Did It: Some Specifics

Slider Element

The slider element offers the user their first interaction on the page (other than scrolling). Apple has used a range input, and some CSS magic, to pull this off. As previously mentioned, the number to the right of the chart is done with images, but we'll use regular typography to stick to the point. (If you're interested in learning this technique, start by learning about CSS sprites.)

You can see this slider in action on CodePen

There are a few things to note in this example. First, There is quite a bit of CSS dedicated to making the slider input look proper. Most of the rest of the CSS is geared towards positioning and after/before tricks.

Another interesting aspect of this demo is the indicator element. Let's look at the JavaScript for a moment.

var slider = $(".bgslider");
var max = slider.attr("max");
var min = slider.attr("min");
var colBg = $(".fg");
var indic = $(".indicator");
slider.on("change", function(){
  var val = slider.val() / max * 100;
  colBg.css("height", val + "%");
  indic.css("top", val*.7 + "%")[0].innerHTML = Math.round(val);
});

We immediately see that the slider is where all interaction is centered. But looking at the indicator, we see this line:

indic.css("top", val*.7 + "%")[0].innerHTML = Math.round(val);

What is this line doing? First, it's setting the top value of the indicator to be the percentage value of the slider, multiplied by .7 - this gives us an indicator that doesn't go to the bottom of the element. In the example given by Apple, the indicator follows the image; in this example, our indicator moves at a different speed from our image. This gives us more control over the animation itself.

Next, we see the animation JavaScript.

$("input").animate({"value" : 20000 },
     {
     step: function () {
       slider.val(this.value);
       slider.trigger("change");
     },
    complete: function() {
      slider.val(max).trigger("change");
    },
    duration: 3000
});

Because jQuery's animate function supports animating CSS properties by default, we write our own step and complete functions. This allows us to utilize jQuery's built in queue and easing functions, and avoid writing customized setInterval or recursive setTimeout calls.

We intentionally haven't done this exactly the way Apple achieved this effect, so that we can show you how you might approach the same problem with a different solution.

Pack Gear Animation

Next, let's look at the pack gear animation.

We can see that the different gear items are, in a sense, laid out in your browser as you scroll. This effect is achieved using the JavaScript scroll event, CSS transforms, and CSS sprites. Apple has placed fifty different items using :nth-child and sprites, which looks like this:

.pack-item:nth-child(49) {
  top:52.5px;
  left:199px;
  width:82px;
  height:69.5px;
  background-position:-199px -52.5px;
}

The most interesting part of this technique, though, is the scroll animation JavaScript. The original JavaScript was minified, but the basic setup loops through all of the pack items and collects their position in relation to the center of the pack items, and move them further in that direction. We won't cover all of the math in this article; instead, we'll focus on a way to explore the subject.

http://codepen.io/jcutrell/full/krIAp

This CodePen shows a crude approximation of the technique used by Apple. Tweaking different parts of this JavaScript will give you differing results, and will help you explore the technique more thoroughly.

Here's a challenge for you: fade the item blocks, as in Apple's technique.

Clouds

The cloud animations are using a simple parallax scroll technique, as well as an infinite CSS animation. We won't cover the parallax technique (you can see a lot of parallax techniques covered here on Tuts+), but let's look at the infinite animation those clouds are utilizing.

Directly from Apple's CSS:

.clouds {
    position: absolute;
    left: 0;
    background: 0 0 repeat-x;
    background-size: 100% 100%;
}
.basecamp-clouds,
.ascent-clouds {
    z-index: 2;
    left: -788px;
}
.basecamp-clouds {
    top: -500px;
    width: 2600px;
    height: 2413px;
    background-image: url(http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_basecamp_01.png);
}
/* max visible screen * 2 = 5200,
not to be confused with @2x asset. */
.ascent-clouds-1 .tile { top:50px; width:5200px; height:2000px; background-image:url(http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_ascent_01.png); }
.ascent-clouds-2 { top:600px; width:2600px; height:1846px; bottom:0; background-image:url(http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_ascent_02.png); }

@keyframes cloudAnim {
    from { transform: translateX() translateZ() }
    to { transform: translateX(-50%) translateZ() }
}
.ascent-clouds-1.visible .tile {
    -webkit-animation: cloudAnim 80s linear infinite;
    -moz-animation: cloudAnim 80s linear infinite;
    animation: cloudAnim 80s linear infinite;
}

We can immediately see that the cloud animation is straight-forward - using transform: translateX. What makes this technique so powerful, though, is the length and clarity of the PNG used. The large cloud PNG loops infinitely for eighty seconds, which is long enough for the PNG's repeating pattern to be forgotten. While it isn't too difficult to achieve, it is certainly an effective use of CSS animations.

Conclusion

Apple may be edging on controversial territory with web development's core "best practice" preachers, but everyone in the profession of web design has to make decisions. You should always consider the values of a tradeoff; whether or not you should implement a given feature shouldn't be dictated purely by best practices, nor by technological constraints alone, but rather by the needs and wants of those who will be viewing the thing you create. Don't allow the rules to stand in the way of making something amazing, but make sure you consider the tradeoffs.

Advertisement