Fluid Project Highlights

Project Highlights to Date

  • Established a strong community of expertise and interest in usability and accessibility in the open/community source environment
  • Significant education and outreach activities: four U-Camps to date, as well as presentations and evangelism
  • Created a Design Handbook to help open source communities improve user experience:
    • UX Walkthroughs, to help assess usability and accessibility
    • UI design patterns: advice and guidance on building effective user interfaces
    • User testing techniques and advice
  • Worked with many communities to help with usability, accessibility, and JavaScript development requirements
  • Pioneered new interactions for accessible drag and drop
  • Created the Lightbox and Layout Customizer components and integrated them into several applications
  • Established several primary strategies for the Fluid framework, including:
    • Unobtrusive, markup-driven components
    • Portal-safe markup binding
    • Keyboard navigation plugins
    • Support for multiple versions
  • Released Fluid 0.1, including a diverse package of components, sample code, and documentation

Milestones and Deliverables


  • Established all of the communication infrastructure required by a health open source community:
    • Wiki
    • Issue tracker
    • Source code repository
    • Mailing lists
    • Continuous integration
    • Videoconferencing
      • Defined a comprehensive project roadmap, release plan, and component design strategy
      • Defined and implemented community procedures:
      • Security process
      • Commit access and voting
      • Licensing and contributor agreements

Design Handbook and Design

  • User Experience Walkthroughs
    • Comprehensive protocols, checklist, and advice on how to do a UX Walkthrough
    • Substantial walkthroughs of Sakai, uPortal, and Moodle, including accessibility evaluations
    • Mentored the communities in doing their own UX Walkthroughs
  • Contributed to the W3C's DHTML Style Guide working group, to help establish conventions for keyboard accessibility
  • User interface design patterns
    • Created three new UI design patterns related to drag and drop
    • Established plan for the Open Source Design Patterns Library, the first truly open and collaborative repository for UI design patterns
    • Collaborated with other communities and industry partners on design pattern best practices
  • Defined user testing and contextual inquiry procedures


  • Designed and developed the first Fluid component, the Lightbox
    • Integrated into the Sakai Image Gallery tool and the ATutor gallery module
  • Designed and implemented the Sakai "My Active Sites" tab-based interface. This will serve as the basis for an upcoming reusable Fluid component.
    • Integrated into Sakai 2.5
  • Designed and implemented the Layout Customizer, designed to provide customizable module layouts
    • Will be integrated into the post-3.0 release of uPortal
  • Designed wireframes and spects for initial versions of new File Upload and Tagging components.
    • Will be implemented and released in Fluid 0.3 and 0.4.

Fluid DHTML Framework

  • Built the first Fluid framework service, the Reorderer
    • Accessible, unobtrusive, highly reusable drag and drop
    • The backbone of the Lightbox and other Fluid components
    • Available within Sakai, and ATutor; will be integrated into uPortal's next release post-3.0
  • Evaluated several JavaScript toolkits and widget sets for the following criteria, ultimately settling on jQuery
    • Unobtrusiveness and support for graceful degradation
    • Accessibility, UX design
    • Clarity and simplicity
  • Developed a keyboard accessibility plugin for the jQuery JavaScript toolkit, making it significantly easier to add accessibility to DHTML interfaces
  • Established an approach for allowing multiple versions of the Fluid framework to coexist on a single page. Essential for portal safety.


  • Fluid 0.1 was release on November 30, 2007. The release contains:
    • Lightbox component
    • Reorderer framework service for accessible drag and drop
    • 3 UI design patterns offering advice about how to design for drag and drop
    • Protocols and guidance on how to do your own UX Walkthrough
    • Tons of sample code and documentation