Part of Volkswagen’ s global 21st Century Beetle campaign, this site will be the landing page for all communications during the next few years of international product rollout and the digital platform for the VW Beetle brand.

Set on a HTML5 framework, and including a WebSocket connection and a multiple device responsive design that includes the sales platform, the entire site is based on a scrolling concept that offers direct access to content, orients users and offers up a narrative for moving through the content vertically and horizontally.

• Users can connect an iPhone and scroll through the Beetle story in lean back couch mode.

• Since the site is a responsive scrolling environment and loads a huge amount of animated objects, positioned relatively and semi-relatively inside the viewport, with dimensions that vary between devices and user controls that change the speed and direction of animations, the development team created the “pin factor” concept to keeps the code object oriented and flexible. It defines the distance of an object entering and leaving the viewport with three states: entering, pinned and exiting.

• After trying smart lazy loading mechanisms to load content when scrolled to a certain proximity, and always ending up creating a nearly uncontrollable half-loaded user experience, the team decided to load all image assets upfront so the scenery always appears as intended. To minimize requests and load times, an initial preloader grabs only the assets necessary to guarantee a liquid UX at the beginning; afterward each module loads only on demand and is unloaded as soon as it’s out of the viewport.

• Response to the site from the social web was overwhelming. Without any media attention the site leaked on Twitter and got almost the same traffic in the first week that was achieved with the first banner flight two weeks later.

Communication Arts

// From our friends at Communication Arts

Leave a comment