A good definition of Spry can be found in the Adobe Labs web pages: “The Spry framework for Ajax is a JavaScript library that provides easy-to-use yet powerful Ajax functionality that allows designers to build pages that provide a richer experience for their users. It is designed to take the complexity out of Ajax and allow designers to easily create Web 2.0 pages. “
Since I upgraded my Dreamweaver from Dreamweaver 8 to Dreamweaver CS3, I’ve been waiting for a chance to use more of its Spry widgets. I recently had a chance to use the Accordion Spry widget and here is a summary of my experience.
The Problem: A local club has over than 100 reciprocal clubs nation-wide. Members need to find a list of reciprocal clubs in a particular State and contact clubs of interest. The local club likes to provide this information to its members on its web site to make it more accessible to members.
Solution Options: There are many different ways to tackle this problem. Here are a couple of these options:
1. List Solution: My first attempt at presenting this information is to use an unordered list with the States names and link them to the information for each State on the same page, click here to see how this solution looks like.
2. Spry Accordion Solution: My second option was to use a Spry Accordion widget with the States Names as labels and the corresponding club list as the content, click here to see how this solution looks like.
Here are my top 5 reasons for choosing the Spry Accordion solution :
- Very elegant option for presenting a large list of information. As you can see from the example above, the same information can be presented much more efficiently on a web page using a Spry Accordion widget.
- Very easy to use and customize. As with most other Dreamweaver tasks, adding a Spry widget can be done with a few clicks (I didn’t need to use any tutorials to figure out how to do it). Customizing the widget is best done using CSS and a quick link to a support manual page gives good guidelines and tips. Also, adding labels and content to the widget can be done in Design view; however, it’s easy to understand the Code view of the widget and make changes to the code.
- Search engine friendly. As with other Spry widgets, the Accordion widget is a page element that combines HTML, CSS and JavaScript code. When adding text to an Accordion widget, it is mainly wrapped with “div” tags making it easily accessible by Search Engines.
- Good looking and User friendly. From the user end, an Accordion widget is intuitive and easy to use. Just click on a tab title and you can see its content.
- Make Dreamweaver CS3 worth the investment. Adobe Creative Suite 3 Web Premium has a high price ticket ($1,599 full/ $499 upgrade) yet with all its new features, CSS support and Spry widgets I think it’s well worth the investment.