app development

Why not follow me on twitter? @xinsight

Mobile Site Breakdown - audileds.com

20 Feb 2012

There were many well-deserved kudos for the recently launched Audi Leds microsite. The animations and interactions were so smooth, it had the feel of a native app. So, how did they do it?

The source HTML is HTML5 and quite clean and minimal, but nothing interesting going on there.

Chrome inspector reveals two scripts: redirect.js and app.js

They have been minimized/obfuscated, so the first step is to download and de-uglify (beautify) the javascript.

curl http://m.audileds.com/javascripts/redirect.js > redirect.js
uglifyjs -b redirect.js > redirect-beautified.js
curl http://m.audileds.com/javascripts/app.js > app.js
uglifyjs -b app.js > app-beautified.js

The redirect script performs some simple pattern matching on the browser user agents to classify a browser as: mobile, tablet or desktop. It doesn’t depend on any external libraries and since and is referenced after the title tag, it is intended to be the first script to be downloaded and executed. The purpose of the script is simply to ensure that people are accessing the correct site for their device. (Mobile users go to m.audileds.com, iPad and Desktop users go to www.audileds.com)

The interesting guts of the application is in app.js.

This 365 K file contains several libraries. Once de-uglified you can jump to the start of each library by searching for a line starting with ‘}’, but still it took a bit of googling of less common keywords to identify all the libraries used. Here is their order of appearance:

jQuery 1.7.1

transit 0.1.1 - handles CSS3 transitions and transformations

jQuery UI - Seems to include everything in the UI Core, Interactions, Widgets and Effects.

touch pinch - Maps touch events (iPad, iPhone) to mouse events

underscore

iScroll 4 - allows scrolling inside a fixed width/height element

Touch Carousel - a commercial jQuery plugin ($10)

Way down at line 9450 we see “AKQA” mentioned.

(b = window.AKQA) == null && (window.AKQA = {}), window.AKQA.Chapter = a = function() {
        function a() {
            console.log("new chapter()");
        }

A quick search for “AKQA” reveals that they are an international interactive marketing agency. And one of their clients is Audi. So, this is clearly where the application begins.

The application is called: DefeatDarkness and there are five different chapters. (Intro, Design, Daylight, etc.) There is some image preloading, google analytics tracking, code to create the top menu, but most of the custom code is simply passing arguments to other libraries.

For example, here’s how the scrubbing effect to compare the LED vs traditional lights is achieved: Two images are overlaid and the container of the image on top is resized as the scrubber is moved.

$("#scrubber-wrapper").draggable({
      containment: "#scrubContainer",
      axis: "x",
      drag: function(a, c) {
          $("#scrubImage").width("" + c.position.left + "px");
      }
  });

That’s it! (You can try it out here.)

The horizontal scrolling of the various cars in the Design chapter is essentially just a div with floating span elements:

<div style="position: absolute; top: 220px; width: 320px; height: 378px;" id="design_carousel">
  <div class="touchcarousel-container">
    <span class="touchcarousel-item"><!-- img 1 --></span>
    <span class="touchcarousel-item"><!-- img 2 --></span>
    ...
  </div>
</div>

And the code to enable the horizontal scrolling is just:

$("#design_carousel").touchCarousel({
                pagingNav: !1,
                scrollbar: !1,
                directionNavAutoHide: !1,
                itemsPerMove: 1,
                loopItems: !1,
                directionNav: !0,
                autoplay: !1,
                autoplayDelay: 2000,
                useWebkit3d: !0,
                transitionSpeed: 400,
            });

A fade-in transition is simply:

$("#design_carousel").css("opacity", 0).transition({
  opacity: 1,
  duration: 4000,
  delay: 1000
});

The animations in the Performance chapter are simply a series of delayed transitions:

$("#ledScenario .driver").find(".cta").transition({
    opacity: 1,
    duration: 1250
});
$("#ledScenario .braker").transition({
    x: 0,
    duration: 1750,
    delay: 350,
    opacity: 1
});
$("#replay").transition({
    opacity: 1,
    duration: 1000,
    delay: 2250
});

A lot of time was clearly spent crafting this microsite. The message is clear, the graphics are gorgeous, and it works beautifully on tablets, phones and desktop browsers. But this wasn’t a huge effort in terms of software development. It manages to raise the bar for what a mobile site could be, yet at the same time mostly makes use of freely available, off-the-shelf components.

Permanent link to this post: http://xinsight.ca/blog/mobile-site-breakdown-audileds/

Older: Alternate App Store promo code download link

Newer: In-App Purchase content downloads in iOS6

View Comments

Related Posts

Recent Posts