Lani & Jeff

An experiment in Adobe® Flash® and HTML interaction.

Lani & Jeff - Wedding site welcome page.
Animated landing page on laniandjeff.com

Visit this site.

Normally, we would be hesitant to include a small wedding website for a friend in a professional portfolio.  However, the site that Jeff Wu (the groom) commissioned me to design for his wedding is a notable exception.  Jeff Wu is an exceptionally good Web developer, with whom we have worked many times, so the project rapidly progressed from a pretty design to delight the bride, to a testing and proving ground for us to experiment with novel forms of design and development interaction.

Jeff came to me to design the site because he wanted it to look and feel beautiful, and (unusually for a Web developer) was completely on board with a pure Adobe® Flash® solution to achieve the desired effect.  We wanted a system dynamic enough to allow him to make edits and changes himself, without the need to use Flash. 

The usual solution, to have the Flash content pulled from an XML schema, seemed inadequate.  We also wanted to capitalize on systems we had used previously to make sure that the browser’s regular Next/Back button and bookmarking functionality would be retained in the site, features usually lost when electing to use Flash over HTML.  We also wanted to explore new ideas in making a dynamic Flash website fully accessible to search engine spiders, as well as fully compatible with search engine optimization (SEO) strategies. 

Lani & Jeff animated floral background
Animated floral patterns blanket the site background. The animation, in flash, slides in behind the html text page, blurring the line between flash and html.

The project became an incubator for ideas that budgets and timelines had never before permitted, allowing us total freedom to create, test, discard and create again.  Our solution was a unique combination of Flash, XML and HTML, a site simultaneously both a full Flash experience and a pure HTML site. 

On the website, the Flash and HTML portions are not placed next to each other on the page, nor is one embedded in the other; but rather the two are layered on top of each other, both active and both drawing from the same SEO-accessible XML schema.  The result was not two different versions of the site (Flash and HTML), but a single site with a structure having HTML content, which the Flash interface could read directly to dynamically generate the appropriate navigation and create a site index with which to communicate with the HTML page.  Consequently, navigation was fluid and consistent, whether it was initiated by the Flash navigation, the browser or the HTML link. 

Lani & Jeff - weding photos page
The photo page is an html component, but accessing it dose not leave the flash interface or decorative elements. No page refresh interrupts the experience.

In addition, this structure provided a huge efficiency in website development, since once the framework of this structure was put in place, Flash graphic development, content entry and individual page development could be done independently and simultaneously.

The simple and lightweight nature of the finished product belies the innovation and complexity under the hood.  The end result may have been overkill on such a small site, but the processes developed opened new possibilities that were later used in creating the Evergreen Aviation & Space Museum website. (FIM also used an extension of this same technology in creating the current FIM website.)