Olympus - Product Details

June 2009

Client

Olympus Consumer Product Group

Audience

Olympus Consumers

Goals

Olympus hadn't updated their product page view for a few years, and needed a refresh. We were asked to combine all of the different feature views into one area—the header—which meant using jQuery for some fancy UX.

Consumer group also needed each of the feature areas to be directly accessible and trackable, which again meant turning to jQuery.

How it was Done

IE6 being the bastard child of internet browsers, I had to write a special ASP script to isolate content to show in IE6 only, allowing all of the other browsers in the world to see our fancy jQuery interface.

<% if InStr(1, Request.ServerVariables("HTTP_USER_AGENT"), "Firefox/2") then %>
IE6 only code
<% end if %>

This checks a user agent for specific phrasing, then shows the IE only content.

For all other browsers, I programmed a content include that, depending on what URL the user was currently at, displayed product specific content using an ID. This content file had a div for each of the product feature areas: sample photos, sample videos, product videos, sample audio, and product views.

When a user clicks one of these feature areas, the content file is ajaxed in, thrown into a div, and fades into view.

To fulfill the requirement of directly-accessible feature areas, I used jQuery Address a sweet plugin which allows a developer to not only change the URL depending on what "tab" a user clicks, but also can be used to link to a page and preselect this tab. Check it out by looking at the sample HD video for the Olympus EP-1.

This was definitely the most advanced project I have ever worked on. The amount of jQuery and ASP I learned during this project added up to more than everything else I learned at Olympus. Product launch had us up until 5 AM. Good times

Launch