12May

RE: On Attention To Details (was Re: Props to the Digg developers)

Posted by Elf Sternberg as Uncategorized

I was going to respond to this on genehack, but recovering my password proved to be onerous, and besides, the issue is an important one worth discussing.  John SJ Anderson wrote:

Elf digs into some Javascript on a particular high-traffic site. In the same way that some people love reading about high-performance cars or bikes they’re never going to own or even use, I love reading about deconstruction of these optimizations that are only worth doing on a tiny, tiny fraction of ultra-high traffic sites.

The Digg trick has nothing to do with high-traffic.  It’s about user experience and page size.   Even the smallest website can have large individual web pages. As HTML5, CSS3 and Javascript become the backbone of user experience, it becomes necessary to replace default behaviors with explicit ones, and adapt the style of elements programmatically.

The early way to do that was to just throw javascript at the problem an pray the DOM was available when the script ran.  The next-wave solution was to put javascript at the bottom of the page so that DOM elements to be manipulated by javascript were guaranteed to be available.  Current wisdom is to put the Javascript back in the header, but use $(document).ready() (or its equivalent in other libraries) to hook up all behaviors, timers, and event managers to the appropriate DOM object.

The current wisdom has a flaw: pages take time to download and parse.  While the page is in transition javascript-dependent display elements look ugly and javascript-dependent event managers drop down to their default behaviors– often no behavior at all, or worse, undesired anchor behavior.

The Digg technique ensures that when elements are rendered the correct programmatic styles and behaviors are simultaneously set.  Instead of waiting for the complete DOM to load, the Digg technique runs element-specific javascript when the associated DOM object is ready.   Anxious users quick on the mouseclick will get to where they want to go, even if the page isn’t done loading.  Persnickety types won’t see the designer’s elegantly designed carousel momentarily displayed as an ordinary, prestyled linked list.

Although I’m mostly a developer, I care about design.  A lot.  The Digg technique solves a serious problem in web design– making buttons do what we say they’ll do, making pages look the way we say they’ll look, and keeping backstage what belongs backstage.  Any website can use this technique, and any website with customers should.

2 Responses to RE: On Attention To Details (was Re: Props to the Digg developers)

genehack

May 13th, 2010 at 2:10 am

I threw a pointer to this article in my original post. I think the combination of Digg as the example and your last sentence (“If you need this kind of set up and performance”) led me down the wrong trail; thanks for pointing out that I missed your point.

Elf Sternberg

May 13th, 2010 at 9:53 am

Thanks much!

Comment Form

Subscribe to Feed

Categories

Calendar

May 2010
M T W T F S S
« Apr   Jun »
 12
3456789
10111213141516
17181920212223
24252627282930
31