CMS-driven hybrid Adobe Flash/HTML site

Shepherd Interactive

View in project portfolio

The Evergreen Aviation & Space Museum website has many interesting aspects to showcase; however, where it truly stands out is its technical innovations, which allow for a rich Adobe Flash-based experience without suffering from any of the compromises usually associated with Flash-based sites.

From the very beginning of the project, when the work was won using a dynamic and fluidly-animated Flash design comp, it was clear that the client was very attached to the interactive motion provided by the demonstration Flash interface &emdash and would be very disappointed if this were not carried over into the final product. At the same time, the 160-page site could never work as a standard Flash site. The loss of a browser's Next/Back button functionality, as well as the lost ability to bookmark and link to individual pages, would be crippling. In addition, search engine optimization (SEO) was critical, and everything needed to be editable from an open source content management system (CMS).

Flash/HTML fusion

To address these problems, FIM and the back-end developer, Jeff Wuworked out a system that capitalized on our previous experimentations with Flash/HTML fusion sites. For this system, the site was built to run from WordPress® (an open source CMS), and a custom theme was developed to set the look and feel of the website.

On export, this custom theme encapsulated the entire site and generated an XML schema that both the HTML and Flash could read to generate a site structure with all the graphics, links and template styles that would be needed on all 160 pages of the website. The Flash file then built the appropriate navigation structure, incorporating imagery, links and page styles, and resulting in rich and fluid navigation of a stylish site with a uniform, custom theme.

The dynamically-generated HTML site was not only always present, but was active on the same page. It was layered on top of the Flash interface, with its navigation structure visible only to search engine spiders. On any navigation (initiated by the Flash interface, a browser link or a Next/Back button click), the Flash file would signal to hide the HTML overlay, transition fluidly to the next page style, and signal the HTML page to become visible again &emdash in the correct position, and with the correct column width for the new page layout.

An indexing system based on the XML structure was used both by Flash and JavaScript to communicate between the page and the Flash interface, keeping them synchronized. As a user navigated through the site, the page URL was constantly updated and new HTML pages were constantly served up; but the page never refreshed, and all the transitions were seamless. Since it is a native HTML structure, when the site was accessed through a mobile device not supporting Flash, the site merely allowed the HTML navigation to be visible, and the site became totally accessible.

Variable-interface speed

Almost unnoticeable to the user (and designed as such), this option had a great impact on the overall user experience. One criticism with Flash sites (and with rich sites in general) is that utility is sacrificed for aesthetic, that the interface animations/transitions "get in the way" of content or easy usage. We found while working on the Evergreen website that this has less to do with "too much" animation or interface, and more with novelty and usage.

First exposure to the fluid animated transitions between sections is interesting, gives a sense of style, character and atmosphere, and evokes an all-around positive reaction. Soon, however, the novelty wears off: after a few clicks, the four seconds of transition time seems a little slow; a dozen clicks later, it is just tedious; after 30 clicks, the user is tearing their hair out and has lost all semblance of a positive association with the site.

To maintain the appeal a user experienced on first contact with the site and eliminate frustration after regular use, the Evergreen site's page transition times were variable. All animations were locked to a global transition rate: when the user first visits, transitions and animations are slow and easy, but after a few clicks, the pace is gradually accelerated. After a dozen clicks, transition times are halved, and eventually they are down to quarter time. The average user does not notice this at all! Simply put, as animations and transitions become less interesting through use, they become less evident.

A/B testing

from the CMS

The advantage of this was not that the client could fiddle with the website (generally not a great move), but that if there were genuine uncertainty with aspects of a design, they could be made dynamic, and an automated system set up to randomly serve the variations to visitors, tracking the results with a free Web analytics program, such as Google Analytics. The client could directly view which design variants perform the best with users and then make an educated selection.

This sort of A/B testing is usually prohibitively expensive and not feasible to implement on a richly-designed Flash site. The CMS system on Evergreen's site made A/B testing not only possible, but cost-effective.