Organizing content in Spry

Saturday, May 24, 2008

Organizing the Content
The AJAX (Adobe Spry framework) can dramatically condense the number of pages of the website, by organizing the content in two levels: 1) dyanimc data and 2) mulitpane widget.

Example

For example, contents of podcasts can be held in data source, episode by episode. So the viewers can click and select the desired episode and to view and listen from the ready-made Spry widget, such as accordian.

To ease of our discussion here, we are assuming the podcast episode contains relative large content, like http://20somethingmarketing.com/, not the short summary style like http://www.manager-tools.com/.

The multipane widget can hold the content in multiple panes and showing only one at a time. The content is rganized into multiple pane. For example, each podcast episode may contain: a) player and caption, b) article, c) illustrative images, d) reference material. Each block of content can be kept in a pane. This allows the visitor stays in the page while viewing large amount of content.

Applying SPRY Widgets

There are many ways to organize the information. The objective here is not to re-invent the wheel and get a free ride from Adobe SPRY framework. Let us use an example, the existing Promotion Oracle website, to demonstrate one of the possible way to organize the content using SPRY Widget. First, we divide up the content as the diagram below. There are different design views to the site layout. Some people like to fit all content on one page and eliminate the navigation buttons entirely; but others would prefer to display to a the screen size and avoid the need to scroll up and down on a long page.






Most of the web 2.0 sites that I have seen, keeps the simple navigation but avoid the scroll bar.

Apply the Technique
Follow the Chapter 5 Building AJAX Pages with the Spry Framework of the Dreamweaver CS3 Beyond from Lynda.com. This chapter of tutorial covers how to create the data source and to present the data source through spry widget.

Although there are ways to create sites to display the content dynamically - like different newspaper that you receive everyday. We are not going to cover that, just plain static content for now.

Migration Plan
To revamp or create an interactive web design, one must be able to:

1. to create a site from template - (openwebdesign.com, and .dwt)
2. to create XML DS, enter contents;
3. to create SPRY Widget and link to the DS;
4. to revamp all our own biz sites to deduce an optimized SOP;
5. to offer an interactive biz sites service, using this SOP.