Enhancing Drupal Interfaces with Javascript & Flash

At DrupalCamp Colorado, Scott and I presented Enhancing Drupal Interfaces with Javascript & Flash. We covered why you should use Javascript or Flash, how best to use these technologies, and some examples from recent projects where we've improved the user experience.

Best practices for using Javascript and Flash are constantly evolving. As web browsers improve, the less we have to rely on proprietary technologies to enhance website interfaces. We recommend a Progressive Enhancement approach that builds from default functionality and adds more elegant or interactive elements on top of an already working interface. That way, users will still be able to use the website even if they don't have Flash or Javascript.

You can download the slides in PDF format here:
Enhancing Interfaces with Javascript and Flash (13MB PDF)

We talked a lot about different libraries or modules we've used. Here are links to those resources:

jQuery Cycle
: A Javascript library for cycling images. Drupal module: Views Cycle Module.

: Another Javascipt library for cycling images. Drupal module: jCarousel Module.

: A Javascript library for customizing form elements. Drupal module: Uniform Module.

jQuery Tools
: A Javascript library that provides a number of different UI enhancements like tabs, tooltips, overlays and a new HTML5 forms library.

Flag Module
: A Drupal module for flagging items. We've used this to add items to a personal playlist, a schedule, or to vote for presentations.

: A Flash-based, skin-able video player with a Javascript API that makes it easy to build on.

: Another Javascript library that provides a number of different interface enhancements.

This is by no means a comprehensive list of resources. The technology is changing so fast that there are probably better alternatives to some of these tools already. The important thing here is that it can be simple to incorporate more advanced interactions into your website and that using the right tools can make that happen in a way that will work for all users.

Design Usability

Read This Next