@media - Beyond Ajax

@media has rolled around super-quick this year. It kicked off with Jesse James Garrett of Adaptive Path talking about the future of web beyond Ajax.

He started by asking us "what is the web good for (at)? It's still quite a young medium - as TV and Radio started out emulating theatre, before finding their own feet, a new medium needs about 10 years for us to find out what it's good for - so we should be getting some good clues very soon!

[Be careful not to get confused by the many faces of Ajax!]

Web apps such as Flickr are part of a much larger ecosystem, but benefit it by having an open API that other applications can hook into. The web is now moving away from static pages of documents towards applications and interaction. The kayak.co.uk interface (airline ticket price comparison) was cited as one where Ajax enables users to dynamically filter the search results almost instantaneously. And these products get better with use.

Value can come from the users themselves - YouTube's a good example. The OK GO Treadmill video was home made, posted on YouTube, has been watched more than 18.5million times, eventually got onto MTV and won a Grammy! Then Google buys YouTube for $1bn - it obviously recognises the value in the userbase.

Websites are now delivering a rich user experience via Ajax and other native browser technologies - ideal as no plugins are required. Bruce Sterling coined the phrase that Ajax is "roller skates for the web". It's like the way that gmail and google maps have revolutionised the way we think about interfaces, and now we want everything to be drag and drop.

What's the highest form of praise? Not "makes loads of money" or "never crashes" but "I can't live without it!". Making systems work is all about the balance between technology, features and the user experience. The Diamond Rio was the first ever mp3 player, but it pretty much bombed. Three years later, along comes the iPod - costs more, does less, but it's all about the way users buy into the experience.

Dealing with interactive products stimulates the same part of the brain as when we are dealing with other people. "People are products too". So, products who "know who they are" also seem to pique our attention and become successful. It's why we like things like the iGuy and TiVo logo:

[Anthropomorphic Personification aka "oh look, isn't that cuuuuuute!!!"]

[Developers look at technology but the users think it's all just magic underneath]

Successful web2.0 applications are designed from the "outside in" and focus on the user experience strategy. This was the way Google Calendar was built, and within 9 months it had overtaken the second most popular competitor on the market.

With photography, no-one owns the endo to end solution, but Flickr takes the same philosophy. The About Flickr page states the site's two main goals:

• We want to help people make their photos available to the people who matter to them.
• We want to enable new ways of organizing photos.

The longer explanation on the page sets out the goals, but puts no limits on the technology. "The experience is the product"

Playing Catchup

I seem to have got out of the blogging habit, so I'm hoping to catch up on a few posts now. I'll tweak the dates so they're relevent to the events roughly as they happened (chronology? what's that?!)

The first event I'd like to make a post about was the excellent -

Web Standards Group Meeting on Javascript

Some of us shy away from JavaScript (until recently, myself included) on the grounds that it's not accessible. But these days, if it's done right, it can be positively beneficial to accessibility.

Demystifying Screen Readers - Steve Faulkner
Steve is very knowledgable on screen readers and all their foibles, and is Director of the Web Accessibility Tools Consortium. This talk mainly centred around Jaws (65%) and Window Eyes (35%). The bracketed figures are from a US National Federation of the Blind market share survey - it's obvious these are the two big players.

The key issues revolve around:

• Dynamic updates - user initiated and independent
  Can the user access the updated content?
  Is the user aware that the content has been updated?
• Rich Internet Applications (RIA)
  Can the user understand the role of the control?
  Can the user successfully interact with the control?
  Is the user able to access information about the current state of the control?

He then explained the differences in screen reader modes:

• Browse Mode (virtual buffer) - the user can navigate page content via paragraphs, headings, links, lists etc. They can also activate links and some form controls. But text characters can't be input into form fields, or interact with select elements in this mode.
• Forms Mode (browse mode off) - the user may only navigate through a document to focusable elements via the TAB key. Text access is limited to "read all" functionality. Most of advanced content navigation is unavailable.

The crucial question we have to consider is, when and how does content become available to the user after it's been updated in the browser?

[Steve Faulkner and the Latency Issue]

Latency is a problem because the virtual buffer does not update and the user doesn't know anything has changed. However, JAWS v7.1 started "listening" for virtual buffer updates in response to things like:

• window.setInverval()
• object.innerText (for IE)
• object.textContent and object.appendChild (in Firefox)
• changes in form control values
• And other stuff like ALT or TITLE attribute value changes.
  

Jez Lemon has an excellent article on Improving Ajax Applications For JAWS Users on his webiste. Steve summed up with some recommendations:

• Do not code to accommodate the poor support shown by JAWS and Window Eyes.
• Use unobtrusive methods where available and appropriate, to help screen readers along.
• Don't use the excuse that JavaScript / Ajax is not accessible for screen readers to not bother to design for accessibility.
• Start developing interface elements that use WAI-ARIA specs, which will provide some benefits now and many more in the future.

Steve's thought-provoking presentation was followed by a turn from Christian Heilmann entitled Seven Reasons For Code Bloat

[Christain's been on the beanz again]

His notes are available for download from his blog, so I won't repeat them verbatim. Needless to say, it was a fun presentation and contained the obligatory photo of a kitten ;-). Meanwhile, he's thinking of this as the title of his next book:

[Christian's Next Book?]

PubStandards XVIII
Of course, the next item on the social agenda was the PubStandards gathering. Lots of fun and revelry as usual, here's one photo, but you can see more on Flickr.

[Patrick & Ashe go head-to-head, while Ross butts in the middle]

Playpen #1 - Google Maps

Inspired by Jeremy Keith's piece at d.Construct the other week, I've finally dipped my toe in the water of fiddling with APIs - and like many, I decided to go for a Google Map.

It helped that there was a tutorial about that very subject in .Net magazine (issue #153), but when I tried it out, it wasn't working properly. I checked my typing repeatedly for spelling errors, but couldn't find why the map was rendering OK but the overlay bubble was not. Firefox's JavaScript debugger kept coming up with some weird error message about XML mismatches on a line which didn't even exist in the file!

So I turned to my newly acquired tome by Chris Heilemann (see, Chris, after your earlier teasing, I did go out and buy it!): Beginning JavaScript with DOM Scripting and AJAX. Sure enough, in the AJAX-based chapter at the end, I found Chris' take on Google Maps.

Between that, and the Google Maps documentation, I finally figured out how to make a map, add custom marker, and have the info bubble pop up when the marker is clicked. You can see my bit of fun on the Playpen #1 page

Further Reading

There was a dangerously-tempting bookstall at d.Construct the other week, and I found myself buying two books which have been on my To Be Read list for a while:

Beginning JavaScript with DOM Scripting and AJAX - Christian Heilmann, Apress
I think it will be an excellent companion for the DOM Scripting book I've already read by Jeremy Keith. Will do a proper review when I've read this in more depth.

Blog Design Solutions - Andy Budd et al, Friends of ED
Great advice for customising your blog. Not just in terms of look and feel, but also advice on hosting your own blog, setting up testing environments, databases etc. I hope to give this blog a "lick of paint" in the near future!

I've also recently finished Dan Cederholm's excellent book:
Bulletproof Web Design - Dan Cederholm, New Riders
This one is a must-read for anybody seriously contemplating standards-based web design. Dan takes common table-based solutions (which can still be seen in the wild), explains why they are not bulletproof, and then reworks the solution in a standards-based way. I was very impressed with the session he did for @media in June, and this takes things even further. A great reference for bulletproof techniques.

@media, Hot Topics Panel

Closing panel for the conference. Just a mixture of random thoughts and questions.

• CSS is still an undiscovered country - progressive CSS should come. IE7 is playing catchup with a lot of the other browsers.
• Evangelising on the use of CSS is done - it should be a given (ha ha ha in some places)
• We're now waiting for the next leap forward in what we can depend on as far as browser support for the standards.
• Tantek demonstrated cutting edge css in Safari - a honeycomb pattern (yes, hexagons!) with rollover change of state - done entirely with CSS and not a graphic in sight. Blimey! That man has an enormous brain...
• Wireframing applications with XHTML/CSS is the only way to test fluid and changable size of text etc.
• What's missing from WebUI - Tantek would like an "undo" analagous function - plus CTL-S to save text in a form as you're going along (how many times have forms bombed on send, much to our cussing?) Or even better, persist it in the browser so its still there when you come back next time.
• Yahoo Libraries - no idea why I wrote this down, will have to Google for enlightenment ;-)
• Can Ajax be made accessible? Questioner wondered whether inaccessibility was a fundamental problem of Ajax, or just how it is implemented on any given site. User Agents are not really fully Ajax capable. Refs, Derek Featherstone/Joe Clarke basecamphq.com
• According to technorati.com 's user stats, 15% of users have Javascript turned OFF!
• It's best to specialise, but be aware of the designer/developer "trench" :-)

What's Coming Up?

• We need real, practical solutions for web designers
• Best practices
• Microformats, iCal
• OpenData - µ-formats, mashing, GoogleMaps release API, giving us frappr.com
  
• hCards hCalendars and RSS
  

There should be podcasts of the seminars out in due course, available from the @media website.