Archived entries for Front End Engineering

The YUI Team, December 20, 2007

Yesterday during our weekly YUI team staff meeting we headed outside to snap a year-end picture of the team. Here it is!

From Left: Satyen Desai, Georgiann Puckett, Nate Koechley, Lucas Pettinati, Adam Moore, Douglas Crockford, Thomas Sha (behind the sign), Luke Smith, Matt Sweeney, Jenny Donnelly, and Dav Glass. Not Pictured: Todd Kloots and Eric Miraglia.

From Left: Satyen Desai, Georgiann Puckett, Nate Koechley, Lucas Pettinati, Adam Moore, Douglas Crockford, Thomas Sha (behind the sign), Luke Smith, Matt Sweeney, Jenny Donnelly, and Dav Glass. Not Pictured: Todd Kloots and Eric Miraglia.

(Photo credit: Eric Miraglia. The YUI Team, December 20, 2007
Originally uploaded by superfluity.
)

Crockford on Fixing HTML

Douglas Crockford has a plan for Fixing HTML. I think it makes sense. His proposal is a static document, but comments are collected on his related blog post.

In the comments you’ll see a few issues pop up (empties, quotes, get-bys), but after further reflection I think they are without merit.

"Control" or "Why is interactive design different from print design?" (Khoi Vinh presentation)

The Web is not Print. I’ve said it a million times.

But it took the master, Khoi Vinh, to express why. He doesn’t have all the answers yet, but he states the problem space more clearly than I’ve heard elsewhere. And that’s half the battle.

Here is his presentation posted on Slideshare. If you’re involved in web design or web development, do yourself a favor and click through it. It’s called "Control".

He is, of course, a great storyteller, so while I’ll post a few quotes here you’re much better off reading his slides directly.

If narrative is the guiding principle of traditional design, then control is its most important tool. But the guiding principle of interactive media is not narrative — it’s behavior. Designing for behavior means transferring some measure of control from author to user.

What are we designing? Digital media is as different from print as a speech is different from a conversation. They’re both exchanges of information between people. But one is a controlled environment and the other is uncontrolled. In fact, what we’re talking about here is the difference between documents and conversations. Digital media looks like writing, but it’s actually conversation. This push and pull is essential to media evolution. Documents and conversations are not mutually exclusive. They are inherently dependent upon one another.

Web Visions 2008 Conference

I just received word that one of the better conferences around is back for another year. Web Visions, the annual event in Portland, Oregon, will be May 22-23 (Thurs-Fri).

Join the rockstars of design, user experience and business strategy for two days of mind-melding on what’s new in the digital world. Get a glimpse into the future, along with practical information that you can apply to your Web site, company and career.

Session proposals are being accepted under the end of 2007.

It’s really a lovely conference, and I recommend that you check it out if you’re in the area (note that it’s light on dev and high on design topics). I love that it’s smaller and more personable. Plus, the friendly, thoughtful vibe that is Portland carries into the conference itself. It attracts more passionate folks instead of 9-5ers, and that’s a good thing. Plus, it’s especially affordable. Registration isn’t online yet, but sign up on their site to be notified.

Perhaps I’m partial because the first conference talk of my career (First Things First: IA and CSS) was at WebVisions 2004 (thanks for Christina Wodtke)

More Info

Less Than Perfect

I spend a lot of time thinking about what it means (and takes) to build a high-quality, professional web site or application. I consider the whole spectrum, from macro concepts like Graded Browser Support, Separation of Concerns, and Progressive Enhancement to micro rules like never employ href="#" and always use the label element to bind text to form controls.

It’s difficult to compose a prescriptive list of all the issues a "perfect site" must satisfy. So, lately I’ve been think from a different perspective. Instead of "what it takes to be great," I’ve been asking myself "what does a great site NOT do? More specifically, I’ve been assuming a perfect site gets 100 points initially and then loses points for shortcomings.

Here are a few examples that I could use to measure a site:

  • -1 point for each instance of href="#", (max of -5).
  • -5 points for redirecting old browsers to a "you must upgrade" page instead of letting them see the plain linear content at least.
  • -2 points for design degradation at +/-1 font-zoom level; -1 for degradation at +/-2 zooms.
  • -1 for each form element missing an associated label element.
  • -2 for a missing (or malformed) doctype

It’s too early to debate the mechanics (should it be -1 or -2 points), but I like the approach in general and am going to keep playing with it this week. One good way I’ve found to discover the list of things is to find a nice modern page, hit view-source, and start giving it a code review. Each thing that catches my eye probably belongs on the list, somewhere at least.

I’m quickly building a longish list — and will publish it before too long — but right now I want to ask: What would you put on the list?

No, Mr. O’Reilly, it’s not all back-end

Tim O’Reilly, in a nice rebuttal to the flame up of silly "Web 3.0" noise over the last few days, gets much right. I agree with everything up until he writes:

Google is the pre-eminent Web 2.0 success story, and it’s all back-end! Every major web 2.0 play is a back-end story. It’s all about building applications that harness network effects to get better the more people use them–and you can only do that with a richer back end.

Um, no. I agree with his reminder that Web 2.0 does not equal some specific technology (ahem, DHTML/Ajax), but to say that front-end magic has nothing to do with the Web’s 2.0 resurgence, or, more specifically, that front-end technology has nothing to do with Google’s darling status just doesn’t cut it for me.

[Oddpost and] Gmail reminded most of us that you shouldn’t need a page refresh to read your web mail, and that the improved efficiently is good, welcome, and here to stay. Sure, it’s cool their back-end provides unlimited storage and great spam filtering, but it’s the great interface that gets people’s hearts beating and them coming back for more. [G]Maps noted that in the real world you can slide the map left and right in front of your eyes, and that offering the same direct-manipulation interface online is better than the one-tile-at-a-time approach. Sure, Satellite and Hybrid views are cool, but without drag and drop the game hasn’t changed. (TerraServer and others offered Satellite view since the last 90’s at least, but it wasn’t a gamechanger.) Tags are cool, and he’s correct that Flickr is largely a network-effect play — but Flickr also showed that reducing the cost of adding tags (by not requiring a refresh) made for more tagging, and therefore more network effect. Google Docs (previously Writely) is all about complex front-end engineering.

I grant that these services are made possible by increasingly sophisticated back-end systems, and that other Web 2.0 systems such as Last.fm or Ad Sense are fundamentally back-end systems. But to say that the world’s Web 2.0 fascination is related exclusively to clever back-end shenanigans misses the mark. My point is that you wouldn’t recognize Web 2.0 without the glamour and power of today’s front-end interfaces and techniques..

It’s never been a better time to be doing front-end engineering. DHTML/Ajax is not Web 2.0, but it’s hard for me to imagine the recent resurgence without it.



San Francisco, California | Creative Commons By-2.5 License | Contact

RSS Feed. This blog is proudly powered by Wordpress and uses Modern Clix, a theme by Rodrigo Galindez.