Thursday, June 19th, 2008

Frank Sinatra, Flash, and Ajax: Deckmyplace.com

Category: Examples, MooTools

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.

Posted by Ben Galbraith at 7:00 am
11 Comments

++++-
4 rating from 28 votes

11 Comments »

Comments feed TrackBack URI

Hey, looks great! But the pages never unblur for me — using firefox 3.

Comment by mdmadph — June 19, 2008

Cool! Just goes to show obsolete Flash is. Everyone should use JS+HTML and put all the RIA developers out of work. Open standards FTW!

Comment by abi — June 19, 2008

This goes to show the rate at which javascript frameworks have developed over the years. The fact that DHTML is a viable alternative to Flash is exciting, glad to see people moving towards open standards.

Comment by tj111 — June 19, 2008

While the effect is very nice, I managed to get it stuck between pages once, and when clicking a link it took a while before anything happened. So sure, JS can do nice things, but Flash still kinda has an edge when you want to do anything more fancy.

Comment by Jani — June 19, 2008

Pretty well-done, particularly transitioning from a Flash experience. There seems to be a slight pause between animations (after the fade, before the new image), but it’s still pretty tight. Nice to see.

Comment by Schill — June 19, 2008

AdBlocked google tracking prevents the pages from changing due to exception… Pretty schweet otherwise..

Comment by vsviridov — June 19, 2008

tj111 said, “The fact that DHTML is a viable alternative to Flash is exciting”

Yes, very cool! I’m a Flash developer, but I know there are times when HTML/JS is a better tool for the job. I’m glad that some of the effects Flash can provide are becoming easier to create with JavaScript.

abi said, “Just goes to show obsolete Flash is. ”

Not really. While I know I can build a site like this in HTML/JS, the fact is, it’s often easier to do it with Flash. When the tools and APIs get better, I might agree with you, but I’d rather work in ActionScript with a powerful display list and graphics API, along with better visual and development tools available for Flash.

abi also said, “Everyone should use JS+HTML and put all the RIA developers out of work.”

Ummm, RIA doesn’t mean plugin technologies like Flash. JS+HTML can build RIAs too. The term Rich Internet Application is technology agnostic.

Comment by joshtynjala — June 19, 2008

If all JavaScript implementations were 100% complete and the browser DOM were all compatible, we sould see the end of Flash applications. The advantages for using Flash (or other technologies, Silverlight, Java) is the fact that you write your code once, compile it, and it “just works” (as long as that plugin is installed).

Comment by matanlurey — June 19, 2008

While this is cool, I wonder how much time was put into browser testing/tweaking? It’s a little sluggish in FF3 (of course, probably not optimal running conditions on my work PC, but I digress).

I like this trend towards more JS frameworks emulating flash – but the real “victory” is if it’s accessible and SEO friendly to boot (yes, I know flash can be – but I don’t think I’ve EVER seen a flash site that went that extra mile). And I like the IE6 work around for PNGs…

Comment by keif — June 24, 2008

Oi, I actually re-read the article and it makes sense! Ignore my question about testing.

Comment by keif — June 24, 2008

The sweepstakes ended, but the site can still be viewed here:
http://deckmyplace.draftfcb.net/

Comment by minkeytorture — July 30, 2009

Leave a comment

You must be logged in to post a comment.