January 26, 2014

Unboxing the Wagon – peeking at code

A media buy on the Weather Channel website caught my eye. I want to see what makes http://www.thewagonunboxed.com/ tick.

Meta Tags

Nice to see Open Graph tags. I’m curious about how the html tag’s data attributes are used. Also good to see most of the JS isn’t loaded up here.

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>THE WAGON. ÜNBOXED.</title>
  <meta
    name="description"
    content="Move in a new direction. See the All-New 2015 Volvo V60 Sportswagon. The perfect combination of power, performance and profile."
  />
  <meta property="og:title" content="THE WAGON. ÜNBOXED." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="http://www.thewagonunboxed.com/index.php" />
  <meta property="og:site_name" content="THE WAGON. ÜNBOXED." />
  <meta
    property="og:description"
    content="Move in a new direction. See the All-New 2015 Volvo V60 Sportswagon. The perfect combination of power, performance and profile."
  />
  <meta
    property="og:image"
    content="http://www.thewagonunboxed.com/img/common/volvo-logo-en-300.jpg"
  />
  <meta name="viewport" content="width=device-width" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <link rel="shortcut icon" href="/favicon.ico" />
  <link rel="stylesheet" type="text/css" href="http://volvo.cachefly.net/css/main.min.css" />

  <link
    rel="stylesheet"
    type="text/css"
    href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"
  />
</head>

Old browser support? Nope!

Good call! Send users with weak browsers to another site. Beats building a fallback that barely delivers a good experience.

if (!Modernizr.canvas || !Modernizr.backgroundsize) {
  capable = false;
  window.location.replace("http://www.volvocars.com/en-ca/Pages/default.aspx");
}

Google Analytics Data attributes?

I did not know this was a thing. Cool jquery plugin @ https://github.com/JimBobSquarePants/jQuery-Google-Analytics

<a
  href="https://www.facebook.com/volvocarsofcanada/app_242992689206644"
  class="pill-button broken_link"
  hittype="event"
  category="outgoing links"
  action="click"
  label="facebook contest"
  >Enter Now</a
>

Pixi.js

Here’s another library I didn’t know about. It is for making fast 2D WebGL things with JS. Nice demos! https://github.com/GoodBoyDigital/pixi.js/

The Meat

Good on the team for minifying their JS in http://volvo.cachefly.net/js/v60.min.js. Running it through JS Beautify reveals about 1000 lines of JS which follows some good practices like not putting everything into the global scope and using requestFrame for animation.

File Sizes

Chrome’s Network inspector tells me the site downloads about 8.9mb when viewed in desktop sizes window, and 5.1mb when viewed in a phone-sized window. Most of that is images. Lots of transparent .pngs.

Here’s an interesting sprite sheet for vehicle colors: http://www.thewagonunboxed.com/img/vignette/chalet/car-colours.png

Car rotation images are biiiig: http://volvo.cachefly.net/img/features/exterior/red/1920/26.png