I’ve been meaning to mention this for a while, but was waiting on a couple post-launch releases that added some “extras” that I liked.

NikonUSA.com was re-designed and re-built by my company, Molecular. We launched in late February and this was a total overhaul: new CMS (Interwoven LiveSite/TeamSite), new design, and plenty of custom code. I built the entire front-end here, from the overall architecture to writing XSL to build HTML to build pages.

There’s lots and lots of custom stuff I wrote from “Quick View” overlays to DOM stylesheet manipulations, and plenty of YUI, awesomebox, and yCarousel to go around, too.

Cool stuff to look for:

• “Product Detail” page— This one mashes up YUI’s tab component, custom flyout code that I wrote, ycarousel, awesomebox for lightboxing images/swfs/video, and all kinds of loading magic. The D300 serves as a nice example. Take a look at that “Media Bar” right there! Plenty of jazzy stuff.
• Pages I designed: the low-bandwidth homepage and search results page.
• JavaScript-to-XML-to-Flash (built by Alisdair Mills) on the homepage.
• Product views, sample photography, and other images being cranked out by ImageMagick scripts that I wrote (ah, Perl!).
• Liberal uses of iepngfix for good old IE6.
• Plenty of tricks (view source) to add in browser-specific stylesheets and extra print media targeting.
• The CSS-only top nav. Tried and true but always nice to show as cross-browser.

I’m most proud of being able to wrangle some nice, semantic HTML in there. The “AJAX” features feel natural, too, something I always like to do in an app: the lightboxes and carousel presentation makes sense and feels right in context; it doesn’t feel “bolted on”, like these flashy bits sometimes do. I can also now give dissertations on Flash/DHTML layering, ImageMagick, and many other cool things.

I may add a few posts describing bits and pieces of functionality in the future; the front-end here was huge, and I built a lot of stuff (and trained users, and designed pages…). But, it’s still a launch!

Tags: nikon, nikonusa, design, build, launch, javascript, html, flash

I’ve spent the bulk of the day getting CakePHP up and running on the www-side of the amodernfable.com domain. Why? Because I wanted to use a framework to handle things like integrating a database-driven portfolio with some static content and learn more PHP (and the Cake framework, which I’ve heard nothing but great things about) in the process.

The CakePHP installation here on Dreamhost was a snap. No real configuration necessary other than setting up my database config file to point to the right spot. I was expecting worse (I know I’ve seen some nasty stuff happen when I tried to get Ruby on Rails up and running before, but this was simple and easy).

Overall thoughts on the framework (from a couple hours’ use): if you’re used to Rails, you’ll know how things work or where they go right off the bat (there are some differences that will catch you, such as default layouts being enforced right off the bat, and I like the RoR approach better that way). Setting up routing was a bit easier than my last Rails attempt. Documentation is easy to find with the right Google search. My object oriented PHP is a bit on the slim side, but, when you’ve programmed enough, PHP is a quick learn; hopefully, the controllers and models will give me more experience there.

It’s nice to have a framework in place to speed things up. Also, I’ve built in Cushy CMS support right into my views, which should make it a snap to update things. I really dig Cushy for doing one thing (managing small blocks of content) very well. Let’s see how well it plays with Cake. (And, there’s two plugs in a single post!)

an online interface that allows the browsing & skimming of magazines by a Google maps like interface. pictures, articles & spreads are charted as maps, with the well-known navigation controls on the left top hand side.

reading magazines as Google maps - data visualization & visual design - information aesthetics

The crazy thing is, it feels like a natural way to "read" on the web. It’s kind of like PDF, but the zooming + tiling makes it feel better.

Tags: google, zkimmer

Wow. Must-pass-along. Probably the most creative/artistic/pure awesome piece of art I’ve seen in a long, long time. Brian Dettmer’s insanely creative Book Autopsies via 37signals.

Tags: art

The hack Skip Intro was the perfect commentary on Flash madness. Set to an oh-so-current musical score and using all the best of Flash’s moving and shaking features, Skip Intro danced itself into user experience fame by throwing back the curtain on the true perceptions of the Flash site intro.

adaptive path » blog » Kate Rutter » Happy birthday, Skip Intro

Well, at least "skip intro" is now firmly ingrained in web culture. Unfortunately, so are the "do-nothing" puff pieces.

Tags: flash, design

Google’s updated Google maps street view with a bit of St. Patrick’s day magic. These little “easter eggs” just help add a smile to Google’s user experience.

With maps, Google already built a delightful experience. Tack these little "extras" on here and there, and you continue to identify "fun, novel experience" with the Google brand.

On Super Tuesday, I forwent attending the usual Seattle Ruby Brigade meeting and stayed at home glued to the radio and TV keeping up on the primary and caucus results across the nation. I love the Public Radio/TV talking heads, but I was really lacking the overall picture. So I warmed up the Internet tubes and started searching for some helpful at-a-glance snapshot of the state of Super Tuesday.Here then, is an amateur’s critique of the various infographics I tripped across.

this is totally gonna work… » Blog Archive » A Survey of Super Tuesday Infographics

How do you design for this kind of information? Scanability vs. multiple audiences vs. a cramming a ton of information in a small visual space.

Tags: design, info graphics

CSS+Javascript power. Fancy menu. Really nice Flash look-and-feel in JavaScript, which means “I have something that looks cool that will degrade gracefully.” Very bouncy and round. I was right when I thought it used the famous Sliding Doors technique for its stretchiness, which means I follow A List Apart too closely. (via Molecular colleague Paul Irish.

technorati tags:mootools, menu, stolenlink

For all you obsessive designers that feel the need to style every possible form input (thus making the web browser look and feel exactly like the Mac’s Aqua interface).

File inputs (
) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.

Styling File Inputs with CSS and the DOM // ShaunInman.com

I’m all for making things pretty. However, users have been trained for a long, long time to expect things like file inputs to look and feel a certain way. Are our designs worth retraining users or bending users’ expectations for how these things should behave?

(via Ajaxian).(Also, the top Flash thing on that site with the trick makes me sea-sick, in a “wow, that’s cool” way. :-)).

technorati tags:design, forminput, css, javascript

Protoscript is a simplified scripting language for creating Ajax style prototypes for the Web. With Protoscript it’s easy to bring interface elements to life. Simply connect them to behaviors and events to create complex interactions.

Protoscript - Home

Wow, this is awesome. I like how it sits on top of both jQuery (for the quick and dirty syntax) and YUI (for the heavy lifting).

technorati tags:prototscript, javascript, prototyping