Case Study: Apple’s “Exploring New Depths”

Today we’ll be doing a bit of a web design and development “case study”, something i’ll be exploring more regularly in the future on this site.

For each case study we’ll take a look a specific web page, deconstruct parts of the code to show how various effects are achieved, as well as take a look at the design and other relevant aspects.
For our first article. we’ll be be kicking things off with a more notable example: Apple’s “Exploring New Depths” iPad promotional page.

---

A Bit of Background

Since the release of iOS 7, Apple has progressively updated their site design to reflect their new “flat aesthetic” design language. Earlier this year, the Apple Store was also given a face lift to a more modern, interactive and visually stimulating look.
Apple’s had a relatively busy year thus far in 2014 (in terms of web design) with a number of featurettes including the 30 Year Mac Anniversary, CarPlay, their “1.24.14” video and iPad promotional campaigns.
In terms of promotion on the web, 2014 is all about storytelling – whether that be visually or text-based. Brands big and small are tapping into the trend through featurette pages, sponsored blogs and art-directed articles.
To promote the iPad, Apple has progressively been creating “stories” on the web, showcasing the device’s various practical uses and versatility. Essentially, these are just giant ads aimed at one thing – promotion. However, they’re done in style and are a great example of some fantastic web design.

---

The Marketing

Before we worry about code specifics like JavaScript, CSS, parallax and animations, let’s take a brief look at the advertising side of things.
Like any advertising campaign, there are a number of processes that need to be followed both creative and strategic. This will typically include things like research, target audience, creative and art direction, copy-writing and a whole lot more behind the scenes work that might go unnoticed to the average web designer.
At first, you might think of Apple’s target audience (TA) as a relatively generic demographic. However it’s important to understand that different campaigns will target very different TA’s. For example, a classic Apple TV campaign that reaches millions and millions of people worldwide on both television and the web (YouTube) targets a much wider TA than a web promotion. A web promotional page targets a much more refined (and smaller) TA including segments like tech enthusiasts and white collar workers.
As fantastic as Apple are, I very much doubt that this kind of thing is handled entirely internally. While some bits and pieces may be done in-house (like general briefs and some management), they’ve traditionally commissioned TBWA\CHIAT\DAY for the vast majority of their creative advertising. Presumably this includes their online and digital promotional work as well. Typically, this would include creative concepts and art direction which would then get commissioned out to web design and development agencies f0r implementation.

---

Site Overview

At first glance, the page looks relatively straight-forward in both design and development. However as with most things Apple, great design is achieved through simplicity, subtlety and brutal attention to detail. The page is no different. The copy, the visuals, the scrolling effects and general art direction are all clinically executed making way for a really great experience. The only criticism I would have is that some of the scrolling is a little laggy on retina due to the heavy load on browser-engine animations (a little ironic isn’t it?).



If we take a bit more of an in-depth look at the various page elements, you’ll notice some more subtle effects. In addition to the more obvious “hero” effects like the water depth indicator and animating iPad, there’s a number of more subtle effects that really tie the page together. There’s a slight “parallax” effect between the various text elements and the page background – they actually move at (ever so slightly) different speeds when scrolling. There’s also some super cool particle dust floating throughout the water. You’ll also notice some subtle lighting or rays of light animating within the water.

---

Size And Optimisation

The page itself is massive, intact it’s over 11mb on a retina display, making an astonishing 264 requests. Most of the heavy assets are images (which is something we’ll talk about), the largest being the 3.5mb image of the diver. On my internet connection (which isn’t all that fast) the page loads in almost 7 seconds! An incredibly long wait for a simple promotional page.



It does beg the question though, how can you justify an 11mb page load for a simple promotional piece? Well it’s Apple, and fortunately they have a number of factors in their favour that help justify this kind of thing, a luxury most of us won’t ever experience.
Firstly, the majority of TA for the page will most likely be on high-speed broadband connections, predominantly in more tech-developed countries. Secondly, even if they do experience slightly longer load times (like I did), they may not actually care all that much.
Having considered this, it seems clear that Apple (as with most things) aren’t taking any shortcuts when it comes to quality and premium experiences. Apple itself is marketed as a premium brand with most of their products are aimed at the highest tier of market segments. The site is no different, massive assets, complicated backend and lots and lots of images.
Interestingly, Apple is employing a combination of post-loading JavaScript for all hi-res images and CSS PNG background properties. This ensures the page loads most of the DOM stuff first while chronologically deferring heavy image loading.

---

Rethinking Best Practices

A lot of the things we think of as “best practice” in web development is from a perspective of quality vs quantity (size) vs semantics. Apple seems to take a different approach to this and basically puts quality and consistency above everything else.



A good example of this are the large headings on the page. They’re actually all images. Why? Because it ensures consistency across the massive spectrum of viewing environments like devices and browsers. The idea is that by using an image of text instead of HTML, every user sees the exact same thing (rather than varied browser-rendered text) This is a technique used throughout Apple’s website across almost all their pages. An alternative would be to use SVG text, however even with SVG there are still minor differences in visual output as well as legacy issues and fallback requirements.



On the subject of SVG, the text for the animating counter is an interesting technique. It’s actually a div with its background image set to an SVG of the text. When the animation plays, the background is transformed vertically, giving the impression of counting up. It’s actually quite a clever technique when you think about it. You’ll also notice there’s a PNG fallback for no-SVG/animation browsers.

---

Some Specifics

The Counter

The counter is the first “animated” example on the page as you scroll down. As we discussed above, Apple pulls the effect off by scrolling an SVG background image. But how exactly does it work? Let’s take a look.
The circle around the counter is just a div styled with a CSS border-radius property. The lighter white coloured overlay which animates with the counter uses the same technique, but is split into three quarter circles that transform with CSS – giving the impression of progressively animating.
The circle and counter are styled using CSS transforms and opacity so that by default they’re not visible:

CSS

.ac-ambient-canplay .count-up { background-position: 0 140px;opacity: 0; }

.ac-ambient-canplay .circle-reveal .section {
width: 0.5em;
height: 0.5em;
transform: rotate(90deg);
}

Then styles are set for their animated state via a parent class that isn’t present in the DOM by default. The counter uses CSS @keyframes, while the circle uses transforms. When the element is scrolled into view, a class is added to the parent triggering the animation classes for the child elements.

CSS

.ac-ambient-play .count-up {
background-position: 0 -1680px;
animation: count-up-animation 0.8s 1 steps(13);
}

.ac-ambient-play .circle-reveal .section {
transform: rotate(0deg);
}

Here’s an example I’ve made based on Apple’s code. Feel free to inspect it over on CodePen for more specifics.

See the Pen Abjif by Abhishek (@abhibagul) on CodePen.

---

The iPad

As you scroll down further, you’ll see the animating underwater iPad which opens out of the case when it comes into-view. The effect is created using a similar technique as the counter.  There are 3 images: the iPad, the top case and the bottom case.

HTML

<img src="http://images.apple.com/your-verse/new-depths/images/depth4_case_bottom_2x.png" width="569" height="364" alt="">

<img src="http://images.apple.com/your-verse/new-depths/images/depth4_case_ipad_2x.png" width="569" height="300" alt="">

<img src="http://images.apple.com/your-verse/new-depths/images/depth4_case_top_2x.png" width="569" height="318" alt="">

Each image is then positioned absolutely inside a relative positioned container element.

HTML

<figure class="case bottom">
<img src="http://images.apple.com/your-verse/new-depths/images/depth4_case_bottom_2x.png" width="569" height="364" alt="">
</figure>

As you scroll down and it comes into view, a class is added to the parent container, triggering the CSS transform classes for the iPad.
Here’s another example of that on CodePen:

See the Pen cGAJs by Abhishek (@abhibagul) on CodePen.

---

The Dust

If you look closely, you’ll notice tiny specs of dust moving vertically in the water. Again, this is done through image transformations. There are two divs with their background-image property set to a PNG of the “particles”.

CSS

.dust-small {
background-image: url(http://images.apple.com/v/your-verse/new-depths/a/images/dust-small.png);
-webkit-animation: dustSmallAnim 25s linear infinite;
}

Using CSS @keyframe animations, the div is infinitely transformed along its x-axis, while being slightly scaled and fading in/out.

CSS

@keyframes dustSmallAnim {
0% { opacity:0; transform:translate3d(-2%,0,0) scale(1.025); }
12.5% { opacity:0.4; transform:translate3d(-1.5%,0,0) scale(1.025); }
25% { opacity:0.75; transform:translate3d(-1%,0,0) scale(1.05); }
37.5% { opacity:0.4; transform:translate3d(-.5%,0,0) scale(1.075); }
50% { opacity:0.2; transform:translate3d(0,0,0) scale(1.1); }
62.5% { opacity:0.4; transform:translate3d(.5%,0,0) scale(1.125); }
75% { opacity:0.75; transform:translate3d(1%,0,0) scale(1.15); }
87.5% { opacity:0.4; transform:translate3d(1.5%,0,0) scale(1.175); }
100% { opacity:0; transform:translate3d(2%,0,0) scale(1.2); }
}

By scaling the image back and forth, while at the same time transforming, it gives the impression of the dust animation looking more natural. The reason two images are used is to give the effect a sense of randomness. If it was just a single image, you might notice some animation looping. Again, the use of images ensures viewer consistency here. Here’s a CodePen for it:
Note: You might need to view it in full screen to see the dust.

See the Pen CFHtu by Abhishek (@abhibagul) on CodePen.

---

The Light Rays

The light uses pretty much the same technique as the dust animation. Actually the same @keyframe animations have been applied to 2 div’s with a background-image of the light rays.
The basic setup works like this:

HTML

<div id="rays" class="rays-container" style="display: block; opacity: 0.75;-webkit-transform: perspective(800) rotateX(53.234826096840195deg) translateY(-100px);">
<div class="rays rays-1"></div>
<div class="rays rays-2"></div>
</div>

With the CSS:

CSS

.rays {
background:url(http://images.apple.com/v/your-verse/new-depths/a/images/rays.png) repeat-x 50% 100%; background-size:1500px 100%;
}

.rays-1 {
animation:dustSmallAnim 8s linear infinite alternate;
}

Here’s a working demo:
Note: You might need to view it in full screen to see the animation more clearly.

See the Pen wibtk by Abhishek (@abhibagul) on CodePen.

---

Conclusion

Apple is clearly making no compromise when it comes to viewing consistency and asset quality. While some of their decisions seem a little compromising in terms of performance, many are made based on brand values and perceived needs and wants of the target audience. While it’s always good to use “best practice” implementation, sometimes you can afford to break the rules a little in an attempt to create something inspiring.
Having said that, I do feel the page is a little image-heavy which has some detrimental results for performance, particularly given the heavy load the page puts on browser-engine animations.