Nate Koechley's Blog

DOM Scripting Task Force - WaSP

Once again the fine folks at the Web Standards Project are helping us all move the industry forward, this time with the launch of their DOM Scripting Task Force as announced in their buzz archive today.

"The skillset of a front end programmer is a three-legged stool: structure (XHTML) is the first leg, presentation (CSS) the second, and behavior (DOM Scripting) the third," said Peter-Paul Koch, a prominent scripting expert and one of the founders of the task force. "These three legs should be equal, but at the moment the behavior leg is the shortest, least-valued and least-understood of the three, even though the DOM has been a W3C specification for seven years and enjoys relatively solid browser support."

They have a press release, a manifesto, and of course a website.

These topics aren't anything new necessarily, but it's good to see more and more developers picking up the torch. For more reading on this/these topics, check out these other posts from my blog: The Behavior Layer, Unobtrusively, and Semantic Markup - Create, Support and Extract.

If you eat and breath these topics, please send me your resume.

Yahoo isn't just back in the game - it's winning.

Ben Hammersley writes an interesting piece in the Guardian today titled Second Sight. It's well worth reading, and looks at recent developments from Yahoo and Google, and reports that "Google, it seems, has jumped the shark." His conclusion is that it's "Three-nil to Yahoo." Give it a read, I think you'll be impressed, and probably find out some things about each company that go against the prevailing PR winds.

Yahoo is the new Google. Google is the new Yahoo. Up is down, and black is white. This spring has been very strange. Google, it seems, has jumped the shark. It has been overtaken, left standing, and not by some new startup of ultra smart MIT alumni or by the gazillions in the Microsoft development budget, but by the deeply unhip and previously discounted Yahoo.

The article provides a good overview of recent Yahoo activity, including the Yahoo Search API, research.yahoo.com (and next.yahoo.com), live traffic conditions on Yahoo! Maps, a gig of storage on Yahoo! Mail, Yahoo! 360, Flickr, and even the quietly released Creative Commons search on Yahoo!: http://search.yahoo.com/cc

Update: Danny Sullivan, Editor of the premier search industry publication, released their 5th Annual Search Engine Watch Awards today, and for the first time Yahoo! Search takes first place, bumping Google to second.Remember what I said about prevailing winds, and hold onto your hat.

Carpool Conversations Vol. 2

In the second installment of Carpool Conversations, we talked about the dynamics of communication and collaboration. This image is a visualization of our thoughts.

Another thought we had, that's not represented in the chart, is that "silence is a powerful tool". It seems that speaking less sometimes gets better results, and that moments of silence are important. For one, it's important to listen and it's important to think, both of which are markedly more difficult to do while you're talking. Secondly, repeating a point has the generally-unintended consequence of reducing the potency of the idea. If you keep talking after you've made your point, you have a tendency to stray from the initial message, thereby watering it down. At the same time, your listener doesn't have a chance to absorb the idea. Know your message, deliver it as clearly, accurately and succinctly as possible, then allow it to stand on it's own and flourish.

We didn't get to talk too much today (no pun intended), because for some reason the traffic was sparse and we make good time north.

Stay tuned for Carpool Conversations Vol. 3.

Today’s Wrong Solution is Tomorrow’s Constraint

Layered Semantic Markup (LSM) is not a technology, but a framework comprised of HTML, XHTML, Cascading Style Sheets (CSS), Javascript, DOM and other Web technologies. LSM allows for appropriately implemented principles and standards.

LSM is a development framework for creating Web documents and experiences. LSM builds for the least capable devices first, then enhances those documents with separate logic for presentation, in ways that do not place an undue burden on baseline devices but which allow a richer experience for those users with modern graphical browser software. LSM supports all user agents, and is inclusive by design. (Progressive Enhancement - Unobtrusive Javascript)

LSM has structural semantic markup at its core, which provides lean, meaningful, accessible pages. This well-built core and the clear separation of structural, presentational and behavioral layers make this development philosophy superior to many short-sighted approaches.

Today’s wrong solution is tomorrow’s constraint. A holistic vision - an underlying philosophy - must guide technical decisions. LSM provides the strategy for a sound and future-ready approach.

LSM embraces Graded Browser Support by using one markup document, subsequently layered with stylesheets and scripts that provide a gradually enhanced experience across a wide variety of browsers and devices.

This approach has profound advantages over other browser support approaches such as graceful degradation. Graded Browser Support recognizes that advanced technology support is not a guarantee of the future, and that legacy software as well as alternative devices (mobile) must always be considered. Graded Browser Support defines support in terms of current capabilities, not in terms of legacy or obsolete software; it embraces accessibility, universality, and peaceful coexistence with more feature-rich browsers/devices; and it allows for adoption of new technology and strategies without leaving any browser/device behind.

Credits

This work is heavily influenced and contains directly passages from Debra Chamra's "Progressive Enhancement: Paving the Way for Future Web Design", Steven Champeon and Nick Finck's presentation "Inclusive Web Design For the Future with Progressive Enhancement", and Steven Champeon's "Progressive Enhancement and the Future of Web Design", all of which may be found here.

Thanks also to the great people who have endlessly debated and developed these topics with me: James Berry, Sean Imler, Todd Kloots, Jon Koshi, Mike Lee, Thomas Sha, Matt Sweeney, Chanel Wheeler, and Christina Wodtke; and everybody else; and to everybody who puts their ideas online so that others may be inspired. Thanks.

How Big Is Your Footprint?

"Ever wondered how much "nature" your lifestyle requires? You're about to find out."

IF EVERYONE LIVED LIKE YOU, WE WOULD NEED 4.3 PLANETS.

What's your footprint?

Beautiful API

This page is beautiful: http://www.flickr.com/services/api/. Every service-based web site should have a page like this.

This is a great way to understand and communicate your functionality. If you can't describe your site in these terms, well, start trying because you should be able to. (You don't have to make it public.)

I'm not here to talk about the benefits of web services and open APIs -- but at least internally, if you can think about your offerings in these clean and explicit terms you'll be much more successful.

We've moved beyond the "If you build it, they will come" days. We're now in the "If you offer it, they will build it" days. This cool map-based Flickr interface was built because the API existed.

Newsmap

For all the news junkies out there, and for those of you interested in visualizations, check out newsmap if you haven't seen it before.

• Notice the legend in the lower right corner. Color = age.
• The size of the area represents the number of sources.
• Layout controls are in the lower right corner too. I think I prefer "standard" over "square".
• You can select countries across the top. Each country will get a proportional section of the page. Turn on US, NZ and Canada, and notice how different stories are variously prominent.
• Archive controls are in the lower left. You can examine news from earlier in the day, or earlier in the week.

Personal Music Services; The Long Tail

The music service Personal Activaire will be more interesting when it podcasts. I don't feel like putting my mp3 player in a FedEx box. Make it a podcast, and now we're talking. (By the way, I only want the good songs, not the whole album. Haven't you read The Long Tail?.)

Today's Quote

I was catching up on reading Jeremy Keith's Adactio blog. The entry is primarily about the beautiful "typeface that London Transport use on all the tube stations and bus stops in London". Frank Pick commissioned the typeface in 1916, the work of Edward Johnston. Jeremy says "Frank Pick's philosophy is clear from this quote:"

The test of the goodness of a thing is its fitness for use. If it fails on this first test, no amount of ornamentation or finish will make it better; it will only become more expensive and more foolish.

I enjoy quotes in general, and I like this one in particular.

Digital Web Magazine: a Fast Company's 2005 Fast 50 Nominee

If you don't read Digital Web Magazine, you should. If you do, you should leave a testimonial over at the Fast Company's 2005 Fast 50 - their 4th annual - where Nick Finch, DWM's publisher and driving force is nominated this year.

New Hillman Curtis documentary video

My friend Hillman points us to his latest documentary, of designer Paula Scher for AdobeStudio. You can find it in the Showcase at AdobeStudio.

If you missed the first one - on Stefan Sagmeister - it archived on Hillman's site.

I like seeing video online. Our culture is largely video based, yet it hasn't really blossomed online yet. As long as Hillman has a camera, I know we're in good hands. Keep watching.

Douglas Bowman's presentation from Web Essentials 2004 in Sydney

Doug Bowman, of Stopdesign and adaptive path, famous for the Blogger and Wired News redesigns, posts his great presentation Pushing Your Limits (And Other Secrets of Designing with CSS) from the Web Essentials 2004 conference in Sydney.

It's a great presentation, and beautiful too. Whether you know your CSS or not, it's well worth a click-through.

The Behavior Layer - Unobtrusively

I've been working on a framework called Layered Semantic Markup for I guess a few years now. While I spend most of my time considering the Structural Layer (Content, aka HTML) and the Presentation Layer (CSS), there is a third layer: Behavior Layer (scripts and the DOM). Having stable and appropriate Content and Presentation layers are helpful before one can appropriately address the Beharior Layer, which is why I've spent my time as I have.

A foundational idea of Layered Semantic Markup is Accessibility (and not just in the Section 508 of Accessibility for indivisuals with disabilities). Content should be accessible to ALL. Content should be available without Presentation. Presentation should be available without Behavior. In other words, each can only reach their potential (and some would argue bare minimum) if they are isolated and independent.

I don't want my snazzy Javascript DHTML behaviors (which makes my navigation more efficient to desktop computer users) to make my navigation unusable to cell phone browsers. With a nod to "One man's treasure is another man's trash", what's good for one user may be detrimental to another.

With this in mind, take a look at this great tutorial on how to write an Unobstrsive Behavior Layer, or as the author brands it, "Unobtrusive Javascript .

Javascript is a wonderful tool to enhance the usability of web sites. It is the extra layer above the mark-up 'what is this text' and the CSS 'how should it be displayed'. Javascript adds a new dimension, the 'how should this element behave'.

On the following pages we will discuss and see how we can use Javascript, but still maintain accessibility. The technique to completely separate Javascript from the other two layers of web development has become commonly named 'unobtrusive Javascript', as 'accessible Javascript' does not quite cut it. You can have a perfectly separated Javascript and still be totally inaccessible.

Hat tip to little. yellow. different's mini-blog.

An Introduction to Using Patterns in Web Design

Being a designer is being a professional problem solver. One of the joys of web design and development is that are always multiple solutions -- always another way to do the same thing. This variety keeps me on my toes. It requires that problems are clearly defined, that users are considered, that edge cases are accounted for, and the rationales are justified and reasonable.

But this variety is a challenge. Drawing each project from a teaming pool of options requires considerable, well, consideration. Starting from scratch tastes good, but it's tons of work, and usually just too much work.

To the rescue come patterns. Similar problems have similar solutions. Solutions are not only defined by their specifics but by their generalities. There are broad patterns. Since first reading A Pattern Language (Christopher Alexander, Oxford University Press, 1977) in 2000, I've seen an obvious connection between that school of thought and the "Towns, Buildings [and] Construction" of the web.

I must give credit to my Dad, who has recommended this book to his friends since probably the early-1980's (in an architecture context), and encouraged me to read it. In fact, his first-printing copy sits in prominence on my office desk.

I've been working on web patterns extensively at my day job, and will write more about that here soon. In the meantime, let me point you to this An Introduction to Using Patterns in Web Design that's been getting passed around the web since Ryan Singer posted it on October 5th, 2004.

It's not exactly what I'd write about patterns, but it's worth a read.

Paper vs. Pixels - Part 3

It's fun being a Web Developer because we're right in the thick of it all. I once defined a Web Developer as the team member with the most software. Webdev's are in the middle of a triangle between (1) Project Management/Business, (2) Design and (3) Engineering. Therefore, we use all their software, and often act as liaison between the groups. I often use:

• Photoshop and Illustrator, tools of the Visual Designers trade
• InDesign and Viseo, tools of the Interaction Designers trade
• MS Project, Excel, PowerPoint - tools of the Project Manager
• Apache, PHP, MySQL, vi, SecureCRT - tools of the Engineer
• Homesite, about 30 browsers, validators, and various small tools like sruler, Iconico...

Anyways, one of the more common questions a Webdev gets asked relates to the different between designing and building for The Web versus the controlled and familiar world of Print.

I've been reading Web Page Design for Designers for years now, and in this months issue Joe talks about just that in part 3 of Paper vs. Pixels. It's worth a read, as he covers key points including:

Apart from providing an index or glossary, navigation is not usually an issue in print. ...

Unless you produce comics that require special 3D glasses, print never requires on the reader having a 'plug-in'.

Once the artwork has left your studio, duly checked for correctness and signed-off, what you get depends on the printer. There are lots of variables but you will have certain expectations and decent printers will do their best to meet them. If they don't, you will have good cause to complain and if they don't satisfy you, stand a good chance of losing future business.

The equivalent of a printer on the Web is the browser, the piece of software that interprets your instructions and displays it as a page on a computer screen. Just in the same way that you wouldn't expect different printers to produce identical results from the same artwork, browsers won't either. Sadly, there will probably be a much greater divergence in browser results than you would expect from printers.

This installment, the third, covers Navigation, Plug-ins, Browsers, and Multimedia. For the full story, be sure to read the earlier Part 1 (The ever-changing screen, Statistics, and Judging a design on your own screen) and Part 2 (Font sizes, Colours change, and Resolution).

Layered Semantic Markup hits the big-time at Yahoo!

I'll post some more details when I get a second, but I wanted to quickly point out that the new launches of http://www.yahoo.com/beta and my.yahoo.com are among the most visible examples of Layered Semantic Markup on the Yahoo! Network.

Isn't the markup beautiful! Isn't the CSS wonderful?

Congrats, one and all!

75% of web design is normative, the rest is merely color and pictures.

An interesting survey, These web sites are identical...or are they? suggests that "75% of web design is normative, the rest is merely color and pictures.".

I found this link over at blogdex.net

This survey compares 10 web sites through elements of their layout: styles, page construction and elements... The survey seeks similarities and differences between those well known web sites... What can be observed is that those web sites agree on implicit, internalized layout and design norms (Consensus rate), and that deviance from these rules (Dissidence rate) is uncommon.

The survey made the following conclusions, which I'll directly quote here. Before I do, let me urge you to take a look at the data and analysis they present, it's enjoyable.

• Similar layouts

  Even though thousands of different layouts can be achieved using (X)HTML, web designers tend to stick, explicitly or not, to a set of layout elements. Links must be underlined, even when hovered, and the user must be able to tell which links he has already visited. web designers do not like sidebars very much when placed on the left, right sidebars are much more widespread. Every page should include a header logo and a footer; moreover, a white background is preferred. The main text font should be serif. Last, a header graphic is recommended.

• Identical contents

  Some elements of content are recurrent in web design: search boxes are quite common, copyright sentences including the designer's full name are prevalent; 404 pages are quite used too. The habit of dividing web sites into sections is extremely common; such sectioning rarely goes over six sections.

• Coding the same way

  Although many techniques often exist for the same effect in XHTML or CSS coding, web designers favor some coding techniques, elements, or norms. XHTML is acknowledged as the markup language to use by a majority. When designers decide not to use some code, they massively reject it: access keys, XML prologs. Many cleavages still remain: UTF-8 vs ISO encoding, Strict vs Transitional, use of print style sheets...

• Inheritance from print design

  web designers share a common print design background and import some of its elements to their Internet creations: a comprehensive use of sidebars and their positioning, footers, graphic headers, typographical knowledge.

Web Visions Presentation

First Things First: IA and CSS

With apologies for the delay, here are links to the presentation Christina Wodtke and I delivered at the webvisions 2004 conference this past Friday in Portland, Oregon.

Hillman on Canal Street - A Certain Type of Penetration

I was in NYC over the Fourth of July weekend. Hopping off the from-Brooklyn subway, I popped onto Canal Street looking for some mix tapes. They have all the bootleg software booths too, and as I paused to look at one at one of the displays, I saw my coworkers face staring back at me for a book cover.

I guess that when your book makes it to the carts on Canal Street you've penetrated pop culture to a special degree.

As previously noted, I'm working on a project with Hillman Curtis, who's book it is.

Web Apps are Hot

Dave Shea over at Mezzoblue has posted An ongoing conversation about web applications is highlighting key points about the future of computing, the web, and the industry.

Definitely read it through, and follow any of the links that you haven't previously read. By the end, you'll likely agree that

It’s a lot to digest and that’s only scratching the surface. The obvious trend is the key to understanding the future of computing: the web is it. Servers are becoming more important than clients. While raw processor power will remain useful for applications that need it, simple and general purpose data management — including email, scheduling and time management, office applications, and all other text and information manipulation tools — will increasingly move to a globally shared environment that makes it easier to collaborate and easier to access. The recession is over, the slump is ended. Web development is in demand, and the demand is only going to increase.

Theories About Designing Experiences

Jodi Forlizzi hosts a helpful and insightful overview titled Towards a Framework of Interaction and Experience As It Relates to Product Design -
Theories to Talk About.

In it, the work of Alben, Battarbee, Cain, Dewey, Forlizzi, Hudspith, Jaasko and Mattelmaki, Makela and Fulton Suri, Margolin, Pine & Gilmore, Rhea are summarized and contrasted. Diagrams of relevant models accompany easy review.

The 2200 words make it a longer-than-average page; any shorter, and the 11 Theories wouldn’t get there due.

Cheers to http://superfluousbanter.org/