Applying design to Spry widgets

The beauty of Spry and Adobe Dreamweaver is that adding Spry widgets to your page takes only a few seconds. Once you add a widget, Dreamweaver adds the necessary JavaScript and CSS files to make the magic happen. Given access to these files, especially the CSS, you can then customize the design using nothing more than CSS and some graphics.

We at Codify Design Studio have put together some themes—based entirely on the Spry markup and CSS rules—that you can use as is, or modify in your web projects. We also provide the sliced Adobe Photoshop files, so you can update the designs in a snap.

Introducing Spry

Spry is an Ajax (Asynchronous XML and JavaScript) framework developed by Adobe. There are many other free, open source Ajax frameworks to choose from. However, one of the unique aspects of Spry is that it is specifically designed to use standard HTML markup to create richer, more responsive "Web 2.0" web pages. Spry is designed to work with standard HTML tags (elements) and change the display and user experience of the markup with the help of JavaScript and CSS. What makes this approach so powerful is that it is very easy to add, edit, and design Spry widgets—all you need to be familiar with is HTML and CSS.

Adding to the ease of use of Spry is the visual authoring option for Spry widgets (introduced in Dreamweaver CS3) which includes adding, modifying, and integrating the visual CSS panel to help you customize the visual appeal and behaviors of your widgets.

The Advantages of Spry

The Dreamweaver Insert panel features five widgets grouped together in the layout section of the Spry panel (from left to right): Menu Bar, Tabbed Panels, Accordion, Collapsible Panel, Spry Tooltip (see Figure 1).

Simply clicking a widget with an XHTML file open will prompt Dreamweaver to create a series of HTML tags within your web page that relates to that particular widget structure. When you save your document. Dreamweaver will create a directory named SpryAssets, and then copy the corresponding JavaScript (.js) and cascading style sheet (.css) documents within the newly created SpryAssets directory. When you preview your web page using the new Live View feature in Dreamweaver CS4, or within a web browser, the HTML markup will be evaluated by the JavaScript file and—in coordination with the CSS file—the user display and experience of the markup will be altered to behave like that of the Spry widget you have selected.

What is most powerful about the Spry widgets is what happens if they don't work. If for some reason a visitor to your website does not have JavaScript enabled, or there is a network hiccough, the Spry widget will render as the standard HTML markup it is built from. This concept is called graceful degradation. An even greater benefit from the approach is the fact that the HTML markup is read by search engines in the same fashion as the other HTML on your website, so the structure of your content is not compromised by using Spry to enhance the user experience of your site. Figure 2 illustrates the graceful degradation of a page with JavaScript and CSS disabled.

The anatomy of a Spry widget

As I mentioned earlier, the Dreamweaver user interface supports the five widgets on the Layout tab of the Insert panel, and seven more widgets and advanced examples are included in the Spry download assets located in the samples directory of the Spry framework download. Figure 3 provides an at-a-glance view of the five widgets on the Layout tab.

Accordion widget

The Accordion widget (see Figure 4) contains an outermost container with a default ID name Accordion1. Inside the main container is a series of DIVs classed with AccordionPanel. Inside each panel DIV are two additional DIV classes, AccordionPanelTab and AccordionPanelContent. The content inside the AccordionPanelTab is the clickable item, and the content inside the AccordionPanelContent is opened when you click its corresponding tab. Click the buttons at the bottom of Figure 3 to isolate the various relationships between the HTML markup and the fully enabled widget.

Collapsible Panels widget

The Collapsible Panels widget (see Figure 5) contains an outermost container with a default ID named CollapsiblePanel1. Inside the main container are two DIVs: one classed with CollapsiblePanelTab and the other with CollapsiblePanelContent. The CollapsiblePanelTab is the clickable item, and the content of the CollapsiblePanelContent is opened when you click the tab. Click the buttons at the bottom of Figure 5 to isolate the various relationships between the HTML markup and the fully enabled widget.

Menu Bar widget

The Menu Bar widget (see Figure 6) is based entirely on unordered lists. The outermost list has a default ID named MenuBar1. Each list item (li) has an anchor (a) element classed with MenuBarSubMenu. The first series of list items under the main unordered list (ul) acts as the row of visible menu items in your widget. Nested unordered lists act as the drop-down menus (triggered on mouseover) to the list item they are nested in. Though the Properties panel in Dreamweaver only supports three levels of nested items, the JavaScript and CSS support any number of nested menu items. Click the buttons at the bottom of Figure 6 to isolate the various relationships between the HTML markup and the fully enabled widget.

Tabbed Panels widget

The Tabbed Panels widget (see Figure 7) contains an outermost container with a default ID named TabbelPanels1. Inside the main container is an unordered list classed with TabbedPanelsTabGroup and a DIV classed with TabbedPanelsContentGroup. Each list item (li) inside the tab group is classed with TabbedPanelsTab. Each content DIV in the content group is classed with TabbedPanelsContent. Each TabbedPanelsTab in the tab group is a clickable item that displays its corresponding TabbedPanelsContent DIV in the TabbedPanelsContentGroup DIV. Click the buttons at the bottom of Figure 7 to isolate the various relationships between the HTML markup and the fully enabled widget.

Tool Tip widget

The Tool Tip widget (see Figure 8) contains text, or an image, wrapped in a container with an ID named sprytrigger1. Also on the page is a content DIV with an ID of sprytooltip1. By default, the tool tip trigger is contained within a span tag and the content of the tip is contained with a DIV. In actuality, the trigger and content can be in any kind of HTML tag. Click the buttons at the bottom of Figure 8 to isolate the various relationships between the HTML markup and the fully enabled widget.

Using the provided design templates

The Codify Design Studio team has created a series of widget designs that you can download and customize for your own web projects. The assets include modified HTML and CSS files that are specifically developed to work with the presliced Photoshop files.

For quick and easy customization, simply update the PSD files in either Photoshop or Fireworks, and export the slices to the CodifyAssets folder. If you're a more advanced user, feel free to modify the slice structure, HTML, and CSS files to achieve any design configuration your project requires.

Although it is fast and easy to add widgets in Dreamweaver using the Insert panel, some design techniques require some customization of the HTML and CSS files. In the following video, I walk you through the assets provided at the MAX 2009 conference session, as well as a brief description of the specific HTML and CSS elements that were modified in each Spry widget of the MAX theme:

Running time: 17:05

Preview and download the templates

Refer to the following figures for a summary of the key features of each template and to preview and download the templates.

Theme Set 1

Theme Set 2

Theme Set 3

Theme Set 4

Theme Set 5

Theme Set 6

Theme Set 7 (MAX 2009)