Our site for Sony PIIQ features a slew of delightful, interactive elements to support this fun, young and innovative brand of headphones. Creating these features in reusable ways that could easily be applied using only flags in the HTML (and without having to edit any JavaScript or CSS) proved to be just the sort of exercise we love. Below, we'll walk you through the process of building these interactive pieces and we'll share the thinking behind some of our decisions along the way.

Box Modules

The site is peppered with box modules whose brightly-colored borders expand inward on rollover - while its triangle-shaped corner notch color-shifts to match. Because this module is so common and variable, it became a prime candidate for re-usability thinking.

Though initially it seems as though a simple animation of the module's CSS border-width would be an easy way to implement this, the CSS box-model would require either a recalculation of the box’s padding, or another DOM element layered on top. This seemed inelegant, and didn’t really address how to deal with the unique design of the triangle-shaped corner notch.

As an alternative, we turned to Raphael.js, a cross-browser SVG-and-VML JavaScript library, to help us create and animate the shapes we needed. When the document loads, we initialize Raphael.js objects for each of the specified DOM elements, and use those objects to draw a rectangle the width and height of the module, as well as the appropriately-size triangle for the corner notch. On hover, the square’s stroke is animated to the desired width, and it’s color (along with the fill color of the notch triangle) is transitioned to a hex value defined by an HTML5 ‘data’ attribute set on the DOM element itself.

This approach allowed for an easily re-usable (but still very configurable) way to apply this common visual behavior without excess markup mucking up the underlying page - and without requiring images for all of the different permutations of triangle size and color.

Colorway Buttons

Once we decided on including Raphael.js, it opened up a ton of interesting possibilities for shapes and animation. A favorite example are the colorway buttons that accompany some of the larger product modules and the large ‘hero’ sections on product detail pages.

These buttons are created by supplying DOM elements with two comma-separated color hex values in an HTML5 ‘data’ attribute, which are then interpreted by javascript to build the corresponding buttons (which are SVG path objects, hand-coded from Adobe Illustrator exports) based on those color values. Shadow elements (also SVG paths) are calculated and added at the same time. The buttons are shape-animated on hover and click to simulate being physically pushed-in. An event is fired on click that allows the buttons to control corresponding elements in the page via JavaScript.

Menus

The exuberant PIIQ product line and the team of product-endorsing athletes and musicians are the twin foci of the site, and as such, we needed to make access to the many colorways and team members quick and fun. The solution was to build a large dropdown navigation that enables users to access the various colorways while still providing usefully-sized product images.

We developed the navigation by creating a cycling product image list that is triggered on extended hover with Raphael-generated circle indicators that can also be clicked to trigger the cycling. In addition, the first image in each product list is dynamically desaturated using a mix of canvas (for browsers that support it) and Microsoft filters (for IE), which we fade into full color on hover. This solution gives site admin fewer assets to manage since they do do not have to provide black-and-white product shots in addition to the rest of the colorways.

PIIQ is a good example of how a few bits of enticing interaction can push a fairly straight-forward experience towards something memorable and unique. Finding appropriate places to inject those bits, and efficient, thoughtful and re-usable ways to build them is what really makes that experience shine.

Let us know what you think.