Ajax Blog

Scott Boyce wrote in with an interesting story about deckmyplace.com.

The site was originally designed as a Flash site, but when the mandate came from the top to use HTML instead of Flash, he had to see just how much of the original comps he could implement. And it turns out, pretty much everything.

We asked Scott to share some details on his experiences building the site:

When the mandate to drop Flash came, there wasn’t time to redesign. My goal was to make it indistinguishable from Flash visually, but do so while employing valid markup, progressive enhancement, and Section 508 accessibility.

MooTools

I had previously used Mootools (and moo.fx prior to that) to add subtle animation to interface elements, but I had not built a site entirely around it (or any other JS library). I had also not created a site with such explicit positioning throughout, so there were CSS challenges as well.

I used a lot of Mootools’ built-in assets: AJAX, tool tips, sliders.

Fancy Page Transitions

The page transitions are done with a combination of effects. Basically, there’s three layers: the frame, the content, and the (ususally hidden) background. When the user navigates to a new page, the following occurs:

1. The background is switched to a blurred screenshot of the current page (instant; the image has been pre-loaded).
2. The opacity of the content area is reduced, revealing the blurred background image (300 ms).
3. New content is loaded via AJAX (each content page is about 1 KB; the lounge is about 4 KB).
4. The opacity of the content area is scaled back to 100% (300 ms).

The Development Process

The content was first laid out with HTML, using PHP includes to eliminate the need for any duplicate content. (Incidentally, the entry form and validation were also written in PHP.) The CSS was created alongside this framework, which resulted in the JS-disabled version of the site. Once we were satisfied there were no issues with the display or functionality in a few target browsers (Firefox, IE6, Safari, Opera, Lynx, IE6 + JAWS), I started writing event listeners.

Once the JavaScript was written, we tested again. In the end, I think the only thing we had to drop were the background music and some of the secondary animation (spinning knobs). Still, most people just assume it’s Flash.

Firebug, YSlow, and the Web Developer toolbar for Firefox were invaluable tools during development

Stats

* Total JavaScript is 59 KB (51 KB for Mootools + 8 KB for the library)
* 30.9 KB of CSS (including 4.7 KB of CSS for MSIE loaded via conditional comments)
* 2.59 MB for the whole site (2.11 MB of images)

I love the legal disclaimer at the bottom:

The thought of a corporation owning a trademark on a given name… fascinating. I can only imagine the future litigation between the Dave Thomas’ of the world.

Source: Ajaxian
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/315376650/frank-sinatra-flash-and-ajax-deckmyplacecom