Creating interactive sections on your website is a great way to engage, inform and ‘WOW’ your audience. There are many technologies that can achieve this, but using JavaScript (JS) Libraries is a great way to accomplish that goal. JQuery, Prototype, and MooTools are JavaScript Libraries which extend the capabilities of your browser, allowing them to manipulate objects, data and animation. Just to name a few features, the libraries allow us to create smooth animations which transition through projects, and to update sections of a page with new content without reloading. Another nice aspect of javascript libraries is that they are supported on iPhones.

The Irrational Games website, for example uses JQuery to drive the animation and interaction of their homepage features area. Using the ‘NEXT’ and ‘PREVIOUS’ buttons, you can smoothly move through the features in the sequence. If you pay close attention, you’ll notice the easing or ‘bounciness’ when a feature comes to a stop. Once you reach the end, in either direction, the sequence flows back to the start or end point. When this happens, you get a glimpse of all the features as they fly through.

Walbridge, a construction company that offers design, management, and general contracting needed a way to showcase their portfolio which allowed users to see all they have to offer. However, they also need something that allowed users to customize how and what they saw in quick and easy way. Using the JavaScript Libraries, we were able to realize their vision. The accordion design allows you to quickly filter projects by what markets, types, services and regions they are related to. Each accordion row has a list of options where, when checked or unchecked, cause the project display area to repopulate in a matter of seconds; often less! Viewing each project’s details is as snappy as sorting and searching. When the user clicks on project, that project’s content dynamically loads, replacing the project list and allowing you to quickly read the project details. Hitting the ‘back to results’ button or making a new selection from the type, market, services and region quickly sends you back to the project list view. The result is a great combination of design, content and technology.