Never has a YouTube brand channel looked as smooth as Nissan Canada's mobile channel. Then again, it's among the first of its kind. YouTube offered early access to their platform for mobile and tablet devices and we pushed beyond expectations.

The experience is like most contemporary mobile applications even though delivered in a browser. More importantly, this experience is actually delivered inside a cross-domain iframe wrapped by YouTube itself. Achieving this came with technical challenges:

Assets in Available Resources

How to fit 3000 image frames onto a device that doesn't have the memory, CPU and storage space to handle 1/10th?

a) 10 vehicles X 8 colors X 36 frames = 2880 images

b) Compressed and optimized images using every available technique, placed into 4 sprite images per colour, 9 images per sprite asset before rendering side-by-side simulating a single sprite of 36 images/frames.

c) Created unique method to actively monitor images dropping out of cache and re-cache them.

d) Images larger than device screen on iOS broken up, sized dynamically.

Transitions, Scrolling and Gestures

How to create native application-like feel for content delivered inside someone else's iframe in a mobile browser?

a) CSS Hardware Accelerated transitions used throughout to tap into hardware rendering power of the device. Results in smoother effect with significantly less DOM manipulation.

b) HTTP requests and server-side assets dramatically reduced using CSS to create many UI elements.

Determined how to allow scrolling and touch gestures target iframed content as if it was the parent. That is, scrolls affected the iframe contents and not the parent.

a) Bloated plugins and libraries eschewed in favor of lightweight custom methods to handle touch events and to listen for specific gestures.

b) Used hardware accelerated CSS 3d transforms with values calculated on the fly to smooth scrolling.

c) Replaced native window scroll functionality with custom functions since iOS pauses all running intervals and thus any animation in progress and also created functionality to enable the app to sync up elements and animations with the user's gesture.

d) Used custom methods to allow gestures to simulate scrolling/dragging of content with CSS transitions described above to finish animations. This enabled control of page elements and gestures 100% of the time without UI freezes.

Results

Since adding the mobile channel to the existing desktop we have seen increases due to tech solutions:

Videos viewed +733%

Videos shared +153%

Pages viewed +320%

The design was created entirely for 3D viewing. From purpose-built 3D vehicles to two high definition projectors and dual mylar screens, these created the added 3D Depth. Each vehicle appeared to be perched on a red 3D geometric. The user experience was also streamlined using Xbox Kinect interface - so that young and old could operate with the swipe of a hand.

Nissan recorded the highest foot traffic to their booth. The 3D hologram increased the average stay at the booth to over five minutes. They also had the highest requests for test drives in their history with the auto show.