Archive: April, 2008

111

sparkline
                    5th                     10th                     15th                     20th                     25th                     30th
12am              
4am
8am                              
12pm                      
4pm                          
8pm                                  

Wednesday, April 30th, 2008

Facebook In Real Life is Today's BIG Thing - APR 30, 2008

This isn't just funny, it also encapsulates a lot of the ridiculousness of Facebook interactions.

Update on WebKit accessibility support (Re: WebKit release cycle and dep

The last piece is falling into place. IE8 has ARIA support, Mozilla has ARIA support ...and now WebKit is getting there. Excellent!

Pownce can haz a LOL API

The Pownce API, like Flickr, can now return response in LOLspeak should you so wish.

font is dead, vive le style - W3C Q&A Weblog

About freakin' time! The FONT element, whose presence until now in HTML5 was an utter embarrassment to all concerned, is finally gone. Thanks, Hixie.

Tuesday, April 29th, 2008

Open Audio

I’ve made a recording of the Open Data keynote I delivered at the Accessibility 2.0 conference last month. You can download the MP3 directly from the Internet Archive. Or you can subscribe to the articles RSS feed as a podcast.

The talk (text, audio, whatever) is licenced under a Creative Commons attribution licence. Feel free to spread it ‘round, cut it up or mix it in with other stuff. One of the attendees at the Accessibility 2.0 conference floated the idea of creating slides retrospectively to go with the talk; he’s a keen photographer. If you’d like to translate the talk into other languages, go for it. It would be really great if you know , or some other sign language and you fancy recording a video to match the audio track.

If you’d like some more context for the talk, there are a few MP3s from the Long Now Foundation that are thematically linked:

I’ve been thinking about maybe putting together a podcast — just an RSS feed — that points to interesting inspirational talks, sort of like Jon’s Found Sounds podcasts but for spoken word instead of music.

Rethinking the blog comment policy | Eloquation

Weighing up the pros and cons of allowing comments on blog posts.

Designing for the Social Web: the Book - Bokardo

Joshua has just finished writing his book. Mazel tov! It's bound to be a good one.

Science Fiction Citations for OED

Put all those years of reading science fiction to use. Help track down first usage of sci-fi terms.

Nina Katchadourian

The Sorted Books project: using book titles to create short narrative pieces.

twistori

Realtime visualisation of feelings on Twitter. I can't help but think that present continuous emotions would have yielded better results; loving, hating, thinking...

Monday, April 28th, 2008

Gin, Television, and Social Surplus - Here Comes Everybody

Clay Shirky's talk at the Web 2.0 Expo — how contributing to the Web allows to use our intelligence far better than watching TV.

The Sea Forts - a set on Flickr

A collection of photographs of the otherworldly sea forts that were built in the Thames Estuary during World War Two and later used by pirate radio stations.

Red Sands

Loosely joined

The mighty Zeldman has written a thought-provoking piece called The Vanishing Personal Site which chronicles the changing nature of personal publishing. Where once we had a central URL that defined our online presence, people are increasingly publishing in fragments distributed across services like Twitter, Pownce, Flickr and Magnolia. It was this fragmentation that spurred my first dabblings with APIs to produce Adactio Elsewhere which I did three years ago to the day.

Jeff takes a different approach by incorporating all of those other publishing points directly back into his site rather than a separate aggregation area. This approach seems to be gaining ground.

One of the comments to Jeffrey’s post points to the newly launched website of the architect Denna Jones built in part by Jon Tan who describes the thinking behind it. The site is driven entirely by third-party services like Tumblr, Del.icio.us and Flickr. Jon, by contrast, has his third-party publishing aggregated on a page called Asides, similar to Adactio Elsewhere.

I think most people, even if they are micro-publishing in many places, still have one URL that they consider as their online representation. It might be a blog, it might be a Flickr profile, or for many people, it might be a Facebook account.

It will be interesting to watch these trends develop. Something else I’m going to watch is Jon Tan’s website. It’s dripping with gorgeous typography wrapped in an elastic layout. How is that I haven’t come across this site before? Why wasn’t I informed?

Sunday, April 27th, 2008

Stop using Ajax! - Opera Developer Community

Ignore the attention-grabbing headline. Brothercake is something more nuanced here (and he's backing it up with examples).

Saturday, April 26th, 2008

Speechification

A blog of all the best bits of Radio 4.

Open Data and Accessibility

During last year’s post-@media drinks, Kath Moonan took me aside and asked me if I would be willing to talk at an accessibility conference she was planning to put together in London. Sure! I said. Well, it turned out that Kath didn’t just want me to talk at the conference, she wanted me to give the opening keynote! That’s an order of magnitude more pressure.

When I heard that the conference was called Accessibility 2.0: A Million Flowers Bloom I thought, “hmmm… I reckon I could do a really pretentious talk for this one.” I decided to repeat my strategy from Reboot 8.0 and write my presentation out in its entirety to be read using my JavaScript teleprompter.

I spent the last week trying to get a jumble of disparate thoughts out of my head and into writing for the keynote. It was quite a struggle but after beta-testing the finished talk on my workmates and my wife, I was pretty happy with the result.

On the day, the keynote seemed to go down pretty well. I had fun delivering it and I enjoyed answering related questions afterwards.

The talk is called Open Data, a long-zoom view of accessibility based on this stated premise:

It is my contention that what is good for digital preservation is good for accessibility.

I’ve published the text in the articles section. I’ll also record a soundfile and post that there too.

I took notes during the rest of the conference but the WiFi situation was a little odd so I didn’t have the chance to properly liveblog. I’ve since posted all my notes so I’ve got a written record of the day:

  1. Open Data by Jeremy Keith.
  2. Making Twitter Tweet by Steve Faulkner.
  3. Fencing in the Habitat by Christian Heilmann.
  4. Rich Media and Web applications for people with learning disabilities by Antonia Hyde.
  5. User-generated Content by Jonathan Hassell.
  6. A case study: Building a social network for disabled users by Stephen Eisden.
  7. Tools and Technologies to Watch and Avoid by Ian Forrester.
  8. Panel discussion with Mike Davies, Kath Moonan, Bim Egan, Jonathan Hassell, Antonia Hyde and Panayiotis Zaphiris, moderated by Julie Howell.

All in all, it was a great day of talks with some recurring points:

  • Accessibility is really a user-experience issue.
  • Guidelines for authoring tools are now more relevant than guidelines for content.
  • Forget about blindly following rules: nothing beats real testing with real users.

Friday, April 25th, 2008

Accessibility 2.0

Julie Howell will be moderating this panel discussion. Before that she has a few words to say. She sees Web 2.0 as an opportunity. Everyone is saying that social network sites are going to get more “vertical” and be based around niche interests — well, the accessibility community has been dealing with niche interest groups for years.

Here’s a big news announcement: PAS 78 is being turned into a British Standard. Consultation on the draft will take place around September.

Julie once again reiterates that Web content guidelines are becoming less important and authoring tool guidelines are more relevant.

Most of all, accessibility is not an old-school attitude. We should be providing rich user experiences to everyone.

Now to introduce the panelists: Mike Davies, Kath Moonan, Bim Egan, Jonathan Hassell, Antonia Hyde and Panayiotis Zaphiris.

Julie starts by asking Bim if Web accesibility is getting better or worse. Better! Bim is quite adamant. If you take a step backward, you’ll see that we’ve come on in leaps and beyonds. In fact, sometimes it goes too far: square wheel building. That’s when developers get over-zealous about accessibility and add “features” that do more harm than good.

Julie asks Mike why someone from Yahoo is at this conference. Mike says that it’s because they listen to their users although the reason why he’s here is probably because of his work at Legal and General where he demonstrated the business benefits of accessibility. Yahoo put together a kick-ass team, thanks to Murray. That’s why Mike is at Yahoo. Mike says the accessibility success stories are down to one person with power taking a stand rather than evangelists in the trenches.

Julie asks Antonia how we get people to think more about learning disabilities. Antonia says it’s about getting everyone together to collaborate and learn.

Staying on the subject of learning disabilities, Julie asks Jonathan about the reluctance of people to participate for fear of being seen as different. That can be a real problem online with its anonymous culture of flaming. The viewpoint of disabled people needs to be represented more.

Julie talks about Second Life. On the internet, we can theoretically transcend disabilities from meatspace. Jonathan says that escapism has its place but he wouldn’t want anybody to lose their appreciation of their identity. In a room of deaf people, not being able to communicate in BSL is a disability.

Julie wants to know what Kath thinks of PAS 78. Before getting on to that though, Kath would like to slam Yahoo for having inaccessible gateways into various services. Sorry Mike, sorry Christian, but Kath is handing you a plate with your ass on it. Kath then goes into a long rant and ends by pointing out that when she is testing accessibility she finds that what she’s really doing is testing usability. So to answer the question, it’s a lovely document. Seriously though, she says we need to be more agile with accessibility and PAS78 looks like it will be a standard before WCAG 2.0 is out. That’s a good pace.

Panayiotis is asked about the future and how the elderly population will cross over with disabled users. Before answering that question, he’d like to take up Kath’s point about being more agile: it’s important that we keep up. Back to the question. What design issues crop up for elderly users? Eye-tracking shows a lot of crossover with how dyslexic users scan pages. A more important question is how we get older users to engage with new technologies like social networking sites.

Julie points out that there is a wide range of cognitive disabilities; tiredness, short-term memory. Panayiotis says that navigation is a key problem. Presenting a user with a list of choices can be disorienting. We need to understand how cognition works to make navigation usable.

Julie quotes Joe: We live in a post-guideline era. We’ve heard that message again and again today.

Time for questions. First question: JAWS is ruddy expensive; are there any alternatives or ways of getting around the cost issue?

Kath responds that running a website through a screen reader like any other browser is not really testing it. You don’t get the user experience that a real user brings.

The guy who asked the question isn’t really getting that point. He wants JAWS to be free “like any other browser.”

Jonathan gives Thunder, the new free screen reader, a plug but warns that it’s not great with JavaScript. As for a free version of JAWS from Freedom Scientific, don’t hold your breath.

Bim agrees that JAWS is expensive but points out that you can get a free version that will work in perpetuity for 40 minutes at a time.

Mike jumps in to emphasize the point: web developers should not use screen readers. You will just get distracted. Instead, stop and think about how people use the Web. Once you understand the barriers they might hit, you can start coming up with solutions. Nothing will help you test your website like having real users test it.

Kath tells a story from Legal and General where sIFR was used and tested with a screen reader by a developer. It worked well enough for the developer but actual screen reader users were being put off by finding these Flash movies in the page.

Another member of the audience echoes the advice: don’t test with a screen reader; get a screen reader user to test. He goes on to say that accessibility is a quality control issue. He reiterates the point that was made many times today: accessibility is a user experience issue and user testing is accessibility testing.

Next question. On the subject of square wheels, there are techniques and tips that are supposed to be helpful but actually are harmful. He mentions the abbr pattern and talks about what he “learned” from Steve Faulkner today… in other words, he’s swallowing the FUD. So where do we go to know what is and isn’t best practice?

Mike gives his site a plug. Mostly though, he says that it’s important to read stuff and think about it instead of just taking solutions at face value. Mike claims that the microformats community did things without thinking them through. What bollocks! He’s claiming that people should test things but he’s just repeating the FUD about the abbr pattern which isn’t based on real-world testing…

Ian jumps in to defend microformats because of the data portability they allow. He mentions hCard. Mike rebuffs him.

Right, that’s it… I can’t take any more. Give me that mic please, Julie. I repeat my points about:

  1. Be specific! You have an issue with the abbr pattern not with microformats in general, and certainly not with hCard!
  2. Do some real-world testing with real screen reader users. Practice what you preach. The BBC did this by getting Robin in (and he found no accessibility problems with hCalendar).
  3. Who are you to decide what is and isn’t human-readable? I find 2001-02-03 to be more understable and internationalised than 01/02/03 or 02/01/03 or 01/03/02 and I’m a human, not a machine.

Phew! I manage to get the last word in before the man from Mozilla gives a little spiel about Firefox.

Now everyone is being thanked for participating. I’m given a bottle of something lovely and bubbly as a token of appreciation. Awww!

Thanks to Robin, Kath, Gwen and everyone who put the day together.

Update Mike has responded on his blog about the abbr pattern discussion. There are a few errors in there:

  1. The title of Mike’s blog post refers to a non-existent datetime microformat. Fixed. The hCalendar microformat uses a combination of two design patterns: the abbr pattern and the datetime pattern.
  2. Mike says that I fail to realise is that Steve Faulkner has a long track-record of basing his findings on thorough screen reader testing. This is not true. I am well aware of the sterling work done by Steve Faulkner and Gez Lemon. I would describe Steve as rel="muse".
  3. MIke incorrectly states the microformats community accepted the justification ‘Most screen reader users do not change their default settings for abbreviations and by default, abbreviations are not expanded’. The microformats community has done no such thing. The community is working towards alternatives for the abbr design pattern which has acknowledged problems… but those problems are founded in the semantics of the pattern, not the accessibility of it.
  4. Mike claims that I am unaware of the screen reader testing he has done on the abbr pattern. That isn’t true. I am not only aware of the testing, I am very grateful for it. My point was that throughout the day, we heard again and again that nothing beats testing real sites with real people. As much as I appreciate the great work of people like Stev, Gez and Mike, there needs to be some acknowledgement that there’s between testing a test case and testing a real document.
  5. For the record, when I pointed out that most screen reader users don’t change their default settings, I wasn’t suggesting that therefore the accessibility concerns are unfounded… but I do think that they are often exaggerated.

Just in case this hasn’t been made clear enough, let me reiterate:

  • The microformats community is very grateful for the continued collaboration of accessibility experts like Mike and Steve. What got me upset — and this is the kind of Redectio ad Absurdum that I was railing against in my keynote — was hearing how concerns about one part of one microformat so quickly got turned into microformats are inaccessible. We’ve spent years fighting blanket statements like JavaScript is inaccessible or Flash is inaccessible.
  • The microformats community is actively working towards alternatives to the abbr design pattern for including datetime information. I know that it might not seem that way from the outside—we need to do better at communicating activity and progress.

Tools and Technologies to Watch and Avoid

Ian is here to praise and to shame Web technologies. He begins with Ashley Highfield: definitely to be shamed, not praised. He just didn’t get the participation culture.

We need to stop talking about just providing content. Accessibility is not a one-way street. Content will get re-used and remixed. Those possibilities should be there for everyone.

Question for the audience: who considers themselves to be not disabled? Hands go up. Ian asks one of those people to read what’s written on a bottle on the stage. The person can’t read it. We all have differing levels of ability.

We can’t design for everyone—just live with it. The unpredictability of the Web is there by design.

Another show of hands: who knows Quechup? I put my hand up. They are infamous for pulling a Plaxo: spamming your address book.

Ooh, I think Ian is leading up to password anti-pattern. He’s talking about phishing. We can judge the trustworthiness of a site partly on how dodgy or professional it looks. How does a screen reader user judge whether or not they might be being phished. OpenID is great but the redirection is a problem for assistive technology and for most phones.

Back to the friends list importing issues. Ian is showing the Dopplr example. Moving on from social network portability, what about data portability? Some photo sites make it hard to get your data out, some make it very easy.

Licenses are a stumbling block. They are rarely written in plain English. How many people know that Facebook owns everything you post there? In contrast, Creative Commons provide short, long and machine-readable versions of their licenses. Also, the iconography of the symbols helps (semiotics again).

Flash video is problematic for editing. Some sites allow you to caption Flash video but the captions only exist within the Flash silo (sounds like a specific implementation rather than a fundamental problem with the technology to me).

Now Ian is showing Natalie’s geek venues site to demonstrate how Google Maps allows you to export location data.

Adobe AIR. It’s 1997 all over again. Right now there isn’t much accessibility in there. Yes, it’s in beta but accessibility should not be an afterthought.

Joost, by contrast, uses SVG, JavaScript and XUL to make something that most people assume is Flash at first glance. It works like Flash but the data is more accessible and exportable.

Ian has a lot more to show us (he has 80 slides in total!) but his time is up so he’s being kicked off stage to make way for the closing panel. But there’s time for one quick question. Christian asks what would be the open-source equivalent of AIR? XUL says Ian. Christian says that AIR is built on HTML, CSS and JavaScript so once the player gets keyboard access it will be quite accessible. Ian responds that he looked on the Adobe site for accessibility info on AIR and the fact that he found nothing scared him. Niqui says that Silverlight — Microsoft’s non-competitor to Flash that looks a lot like it’s competing with Flash — is the same: it’s at version 1.0 and accessibility is still not on the table.

A case study: Building a social network for disabled users

Stephen Eisden is going to give us a case study by showing us what went into building a social network aimed specifically at disabled users, the Disability Information Portal. The idea was to create a one-stop-shop for anyone with an interest in accessibility. The aim was to combine accessible design with Web 2.0 functionality.

They didn’t want to get locked into one vendor like Microsoft but they also didn’t want to get locked into one API provider either. They settled on Wordpress for the underlying technology.

The accessibility of the site must extend beyond simply visual impairment. It had to work for people with learning disabilities too. They also needed to balance creativity with control to create a site design that was flexible and customisable. Simple consistent iconography was also important. (This is something that Antonia mentioned as well. Semiotics is clearly an important topic.)

The site uses tag clouds. It was a challenge to make them accessible. They included the usage number with the tag. To avoid jargon, it isn’t called a tag cloud. The site uses ratings too: a combination of stars used as labels for radio buttons.

Before starting, they looked at what was already out there and identified a gap in the market. They used focus groups. People wanted access to information about accessibility facilities, particularly at a local level. And where facilities didn’t exist, people wanted to know what they could do about it.

They had an accessibility audit and they also did user testing. Right now the project is in a pilot stage (a nicer way of saying beta) and they’re doing more accessibility testing. They’ve learned that testing needs to be an ongoing process. Also, testing isn’t something to be afraid of: it often highlights opportunities for improvement.

They also learned that you need to have a flexible approach to design rather than a rigid, fixed attitude. Also, simplicity is key. Focus is important; do less but do it well rather than trying to do everything. Finally, they learned that accessibility makes the site more usable and removes barriers for everybody.

The next step will be the public launch of the site. www.dip-online.org

User-generated Content

Jonathan Hassell is going to talk about user-generated content. He’s from the BBC. Aren’t we all, dear, aren’t we all? Specifically he’s with the User Experience and Design department.

Here’s a stroll down memory lane with a brief history of accessibility at the Beeb. They spent a lot of time making television and radio accessible as well as creating content for specific audiences. Online, they had Betsy. It’s almost ten years old now. In 2002 they really started getting into web accessibility. My Web, My Way is their effort to improve the Web, not just their own site. Now they’ve just had the homepage relaunch which uses JavaScript best practices.

Now onto user-generated content. He reiterates what I was saying about the importance of open content. Content must be accessible even before you put an interface on it. All the interface layers need to work together; web page, web browser and operating system. But we’re here to talk about content, not interface.

Blogs, Bebo and YouTube contain user-generated content but even basic accessibility hooks like alt text is missing. Whose job is it? There are two things: the tools and the site. Again, he reiterates a point from my keynote: ATAG is more relevant than WCAG. Yes, it is up to the site owners to provide the ability to make accessible content. But is it their responsibility to actually add the accessibility hooks to the user’s content? The DDA is very unclear on this point. It’s like the argument about whether ISPs are responsible for customers accessing illegal content.

Jonathan is posing a lot of questions here today. He wants to know if disabled users will be left behind by Web 2.0. Talking about people with literacy difficulties, he points to the lack of spell-checking in textareas on social networking sites like Facebook (hmmm… I think this an OS issue myself).

Here’s an interesting twist: BSL users are putting videos on YouTube. Who provides the text transcription or voiceover?

Jonathan thinks that the Assistive Technology chain has broken down. Modern AT can’t handle non-text content like video and games well.

But it isn’t all bad news. Remember, the opportunities offered by rich media like video is a boon to people with learning disabilities. And video offers BSL users the opportunity to get their language out there on the Web for the first time.

Let’s ditch the phrase “it isn’t accessible.” Nothing is accessible to everyone. Instead, let’s say “it isn’t usable by someone with this particular disability.”

It’s hard enough for organisations to provide transcripts and captioning; what about when it’s user-generated content? You can engage the community but even then, it will always be behind the original rich media.

Now Jonathan steps beyond inclusion and looks to the future. He shows some games that have been created for deaf children. He demos a game that is accessible to children learning BSL. You construct sentences with nouns, verbs and tenses; then click a button to see that sentence signed by a cartoon character. (This is pretty cool. Frankly, I could imagine using this myself just for the fun of it.)

One last demo. It’s a science game for blind children who have never used a computer. The game must explain the grammar of 30 years of computer games while explaining scientific concepts like force and inertia. The visual elements exist purely for anyone accompanying the blind user. This is a fully-fledged game with mechanics, physics and feedback… all using stereo sound. Tones, words and direction are used to create an interactive environment. Done well, sound can be layered to provide a lot of information. Just imagine how this could be applied to virtual worlds like Second Life.

That was an inspiring way to end!

Rich Media and Web applications for people with learning disabilities

Antonia Hyde is going to offer a high-risk presentation—it will contain a lot of rich media.

Here’s a sound clip. “There’s a lot of information there… that’s a lot of information.” David, 26, Man United supporter.

Much of this presentation will be obvious: that’s the point.

Stats: 1.5 million people in the UK with learning disabilities. 1 in 3 say they have no contact with friends. They are ghettoised. United Response support 1500 people, people who don’t necessarily communicate verbally. Antonia works on the Web side of things.

Here’s a video of Micheal using a Dynavox, a speech synthesizer, to communicate. Rich media like video can be a great help in “getting” something. Here’s a video of Mandy who loves using the internet. She watches videos on YouTube to learn about off-roading with Land Rovers; she loves Land Rovers. The videos help her calm down. When asked if she’d like to meet other people who like using Land Rovers on the internet, she says she very much would.

People with learning disabilities are contributing content online but they tend to be niche websites rather than the mainstream. The videos being shown today are of people with mild learning disabilities.

Here’s a video of David using a site (we don’t see which site). A video starting unexpectedly gives him an unpleasant surprise. He would rather decide when a video starts and stops. He’d also like better information management; less cramming. He would like options to change how the page looks. Only with guidance does he find a colour-changing widget. Unexpected pop-up (or faux pop-up) boxes confuse David.

Antonia is having some technical issues getting back from the video to her slides. Yes, it is a Windows machine actually.

Back to the lessons we’ve learned from watching David. Rich media sites could really help people with learning disabilities. They should be able to use social networking sites and contribute content instead of just receiving it.

Intersting factoid: Comic Sans is well regarded by people with learning disabilities.

Embedded rich media players in web pages aren’t standardised enough yet. Controls need to be in a logical order. Buttons need to be big enough.

Ordering information well around the embedded media is important. Nice big graphics also help. Use them as part of a visual vocabulary. Audio is currently the poor relative of video.

Use terminology that explains the functionality rather then the technology.

Here’s David using Last.fm. He searches for his favourite rock group, 30 Seconds to Mars. He clicks on the music. He thinks that the user avatars on the right-hand side are advertising or cartoons. When prompted, he clicks on an avater and is taken to that user’s page. Now he starts to recognize that the avatars are users of the site but he doesn’t realize that the label “friends” means “friends of the user whose page you are viewing.” He wants to know who these people are: he doesn’t realise that the usernames are people’s names. But he likes Last.fm: it looks like a great way to make friends with people who like the same music.

That was quite a vivid example of the connective power of the Web.

Fencing in the Habitat

Christian is up now with a talk called Fencing in the Habitat — How to do the right thing and get it wrong. He reckons that some of the things he has to say will annoy some people here. He thinks that we are selling accessibility the wrong way. Christian is assuming that most people here want to make accessible products so he doesn’t have to convince anyone here of the benefits.

Genuinely usable and accessible sites and products are very rare says Christian. This is a problem because why should people care about making things accessible when most others (including the gig guns) don’t bother. People only grudgingly embrace the need for accessibility. For designers, this taps into a subconscious fear of losing the ability to see.

Then there’s the numbers game: when you are asked to supply numbers about how many disabled users are using your product. It misses the point; these are human beings. Anwyay, statistics lie.

Here’s a recurring problem. You have an old, broken, unloved product. Some third-party expert comes in and scatters magic accessibility pixie dust and everything is hunky-dory. It just doesn’t work that way. You might have to tell them what they don’t want to hear. You might have to tell them that starting from scratch is the best option. Also, there’s no point telling the people with the money about the technical things like links and forms.

Now Christian dives into a tangent about how people read on the Web. He’s over-generalising by saying that people don’t pay attention to tone and nuance on the Web.

Anyway, we’re the do-gooders, the hippies, the tree-huggers and we’ve got to sell accessibility to the suits. A lot of the time we wrongly characterize accessibility as making a habitat for disabled users. Instead of ghettoising disabled users, we should take them along with us. Accessibility is really little more than a good tough usability test.

Now there’s the issue of universality—providing access regardless of technical environment. That doesn’t mean every browser gets CSS and JavaScript. Graded browser support is the way to go.

Here’s a harsh truth: we will not be able to cater to everybody. Different disabilities have different needs and sometimes they clash.

A lot of the time we do little things supposedly for the sake of accessibility but they’re really there to salve our conscience. Font-resizing widgets (especially ones that have tiny low-contrast buttons) are a good case in point. Either use a readable font size from the start or explain to people how to resize text in their browser. Skip links are another example. These are genuinely useful and not just for screen readers; they’re handy for mobile too. But people go too far and put tons of skip links all over the place.

It’s not about gadgets. These things are mostly about making us feel good and they cost time that could be better spent. They are a quick fix that stagnate over time.

Here’s an example of a bad interface from the real world. Braille buttons in an elevator but the braile buttons don’t do anything; they are next to the real buttons. But if you think about it, the reasoning is that they don’t want people to accidently press the button when they’re just trying to read the button.

Another great example: a wheelchair-accessible toilet …where the toilet roll is five feet away.

A speaker, like the ones with your hi-fi, is a piece of assistive technology. It was created to help someone who was hard of hearing. Now it makes people hard of hearing.

The main problem with accessibility is that people don’t see the need. The driving force for things like semantic markup and progressive enhancement is (drumroll please) geeks that care. Hug your developers. They are the people who do the extra work that makes the Web better for all.

The best way to sell accessibility is to use the old search engine optimisation trick. Page titles, for example, are really important for both accessibility and search engine optimisation and yet people get it wrong so often. Titles show up everywhere: in the browser bar, in bookmarks, in seach results.

Stop saying “alt tag”. Yeah! It’s an attribute. More importantly, it’s alternative text.

The bogus accessibility software sellers are harmful. Bobby is dead, hurrah!

Sell accessibility by using technology hypes: mobile devices are a great convincer.

Simplifying the interface for users spells success. Just look at the games world. Microsoft and Sony battle it out with features, then the Wii comes along and blows them out of the water. That’s because it’s easy to use. This is how we should approach accessibility.

Is Web 2.0 bad for accessibility? Well, define Web 2.0. For Christian it’s a methodology, a read/write mindset. That’s a good thing. Web 2.0 can be great for accessibility because users can take up the challenge of annotating and transcribing content. Slideshare, for example, will take your slides and convert it to Flash but it will also convert it to HTML. They will provide an API so that you can create accessible versions of your content.

What about video? Viddler allows users to tag the actual videos, not just comment on them. The quality of the discourse is far better than a site like YouTube.

JavaScript and Flash used in the right manner can actually increase accessibility. He plugs . Yay!

Christian demos his YouTube captioner, a nice piece of work.

Here’s Twitter again. Christian has used Google’s translation API to take Twitter’s RSS and detect the language of the messages. Then he inserts the appropriate lang value. icanhaz.com/twitterwithlang (This is great: it ties in with what I was saying in my keynote about looking beyond the website and treating RSS and APIs as accessibility features. It also contrasts nicely with Steve’s talk. Instead of just pointing out the problems with the Twitter site, Christian built a working solution that lives at a different URL.)

Flickr gets a hard time for its inaccessible interactions. But the edit-in-place functionality allows far more people to edit titles and descriptions. So that’s an accessibility feature really.

To summarise: don’t fence in disabled users in a habitat. Instead let everybody benefit from a more usable product and a better experience.

Now it’s question time and someone is taking issue with Christian’s claim that text widgets are not a good solution. Christian responds: if you build a widget for every possible disability, you still don’t please everyone. Also, the widgets are a sign of a deeper problem. A lot of the time the deeper problem lies with the site but it can also be a problem with the browser or the operating system. Why should web developers be responsible for patching those flaws?

A comment from Kath: we shouldn’t be arguing about who’s responsible. It’s like when someone farts and everyone looks at the dog or at the other people in the room, wondering who is to blame when, really, we should be complaining about the smell.

Making Twitter Tweet

I’m at a cosy little conference in London with the grandious title of Accessibility 2.0: A Million Flowers Bloom. I’ve just finished delivering the opening keynote which I tried to make as pretentious as the conference title.

Now the mighty Steve Faulkner is up to deliver a talk called Making Twitter Tweet. He’s being introduced by Robin Christopherson and is getting a round of applause for being the guy who created the Web Accessibility Toolbar. Steve begins by clarifying that the Web Accessibility Toolbar was very much a team effort.

Steve will be talking about Ajax, using Twitter as a case study. But this is not an exercise in Twitter bashing. Also, remember that accessibility is not just about blind people even though that’s what Steve is focusing on today. By the way, he’s stevefaulkner on Twitter.

There are some issues with bad or no alt attributes but that’s not we’ll be looking at today. There’s already plenty of information about that kind of stuff out there. The more pressing issue is that sites like Twitter that use JavaScript and Ajax can be used by people with disabilities.

Ooh, he’s going to talk about the use of the abbr element in microformats. He’s talking FUD about human vs. machine readable data and I’m rolling my eyes. He’s showing suggested alternatives (which have equal misuse of the title attribute). Now he’s saying that the microformats community don’t seem to want to take them on board. He’s talking complete bollocks in other words. Firstly, he’s damning microformats when in fact he has an issue with one part of one microformat (the abbr pattern in hCalendar). Secondly, there is a heck of a lot of discussion and testing work going on in the mailing lists and on the wiki with WaSP collaboration. By the way, Robin — who is sitting two seats away from me — was recently brought in to test BBC listings which had been marked up with hCalendar. He described the feared accessibility problems as unfounded. Most screen reader users do not change their default settings for abbreviations and by default, abbreviations are not expanded. Besides, an internationalised way of writing a date is not just machine-readable data (I’m a human and I can read 2008-04-25 just fine). I’m not saying that the abbr pattern doesn’t have problems (it does but they are semantic in nature) but Steve is mischaracterising the current situation.

Anyway, back to Twitter. There are links (like the favouriting star) that should really be buttons. This is something I touched on briefly in my keynote: know when to use a link and when to use a form element. Steve suggests an input type="image". Really, it’s a button with two states but HTML doesn’t really provide an element for that says Steve.

On to Ajax. There are two issues:

  1. Users having access to changed content.
  2. Users knowing that content has changed.

First there’s an explanation of how the virtual buffer in Jaws work. Updates to the buffer occur approximately 600 milliseconds after a control is pressed. So screenreaders don’t react to changes in the content, they react to user interaction. With the Twitter favouriting functionality, the time between pushing the button and the content being changed is the problem. Fire up Firebug to see how long the Ajax request takes. It’s about a second. That’s less than 600 milliseconds. We have a problem.

So, to start with, the browser view and the screen reader view is synchronised; the pseudo-button is off. The user clicks. The browser view is updated to see the selected state. The screen reader view still sees the old view. This isn’t just an Ajax issue but Ajax magnifies the problem because of the round-trip to the server.

Good news! JAWS 7.1 has effectively solved this issue. It doesn’t listen for user actions, it responds to changes in the DOM. But Window Eyes still has this problem.

A solution is to inform the user that content has changed. ARIA live regions will have this but we don’t have that yet. In the meantime you can try some other tricks. You could provide text hidden off screen that tells the user that “content updates occur frequently—if things aren’t working as you would expect, try refreshing the page” (triggering a re-read).

The second issue is letting users know that some content on a page has changed. Twitter provides the character countdown but users have to exit out of forms mode to get it. There are three possible solutions:

  1. Use alert boxes.
  2. Use audio cues. At set intervals of the character limit (50,30,10 etc.), announce the number. This takes a lot of work. It uses a mixture of JavaScript of Flash.
  3. Use WAI-ARIA live regions but that’s not yet supported.

Let’s move beyond Twitter and look at WAI-ARIA: Web Accessibility Initiative — Accessible Rich Internet Applications. Basically it allows you to add information to elements to describe their roles and their states. Here’s the main point: It’s easy! You just add a few attributes to your existing markup. Steve gives us some example markup. It looks pretty straightforward.

Now it’s question time. I think I should resist the urge to call him on his dissing of the microformats community and let other people ask questions about genuine accessibility problems instead.

Open Data

This is the keynote presentation I gave at the Accessibility 2.0 conference held in London in April 2008.

OAuth support for Google Accounts and Contacts API - OAuth | Google Groups

As promised by Kevin Marks in the Q&A after my panel at South by Southwest, the Google Contacts API now supports OAuth. w00t!

Thursday, April 24th, 2008

Is Mike Arrington a Dick?

Best. Single-serving site. Ever!

Star Wars: Collecting | Noriyoshi Ohrai: Star Wars Illustrator

Strikingly different illustrations of the Star Wars pantheon from Japan.

Wednesday, April 23rd, 2008

Headshift :: Twitter scepticism: justified or not?

Lee is a Twitter sceptic. Shun the unbeliever, shhuuuunnnnn!

Seed Conference | Chicago | 6 June 2008

A version of the beautiful Seed Conference one-sheet Website that has been reworked to use ems instead of pixels.

Eight random things

Beth has tagged me as a participant in a so-called meme which, like so many things on the internet with this label, involves very little . This one is entitled “eight random things about me.” I’ve had a look about me and here are eight random things:

  1. A piece of lego.
  2. The ceiling.
  3. Richard.
  4. Sticky notes.
  5. A bookshelf.
  6. My keyboard.
  7. A pen.
  8. A nice cup of tea.

At this point I’m supposed to pass the baton. I hereby tag you.

Tuesday, April 22nd, 2008

Silvio Berlusconi: Did I say that? | Politics | The Observer

The collected wisdom of Silvio Berlusconi. I can't believe this prick is going to be the running Italy ...again.

Monday, April 21st, 2008

blog.plazes.com » Blog Archive » Plazes adds Fire Eagle Support

A match made in heaven: update your Fire Eagle location from Plazes.

The Acorn Electron Haven - Usborne Publishing Section

Prompted by my post on adventure games, Relly sent me this link to a wonderfully archaic series of books from 1983.

SimonSingh.net

Simon Singh's newest book is released today. Huzzah! It's called Trick or Treatment? and it's all about "alternative" medicine. Somewhere, Ben Goldacre is smiling.

Adventure

Andy has become the gaming world’s equivalent of uncovering the Tutankhamun’s tomb of a hard drive from Infocom containing details of the never-released sequel to The Hitchhiker’s Guide To The Galaxy game. In his post, he picks out the salient points from the Lost in La Mancha-like story. In the comments, much hand-wringing ensues about what is and isn’t journalism (answer: who cares?).

I missed the Hitchhiker’s game when I was growing up. I cut my teeth on 8-bit computers; first a and then an . While I didn’t have the chance to play Douglas Adams’ meisterwerk, there were plenty of other text-only adventure games that sucked me in. I recall some quality stuff coming from the studio.

I remember learning BASIC specifically so that I could try create my own adventure games complete with mapped-out locations and a simple verb/noun parser. Adventure games seemed like the natural extension to the but far more open to exploration (even if that openness was just a cleverly-crafted illusion). Hypertext—a term used these days almost exclusively to refer to Web-based documents—seems an entirely appropriate way to describe this kind of interactive fiction.

Later this year, I and my fellow adventure game geeks will be able to wallow in nostalgia when the documentary Get Lamp is released. The film will feature interviews with some of the Infocom movers and shakers featured in Andy’s archeological treasure trove.

Sunday, April 20th, 2008

BBC NEWS | Magazine | Innocent photographer or terrorist?

The police in the UK seem to have problems distinguishing between "tourists" and "terrorists". East mistake to make, I guess.

Camino. Releases. 1.6

Camino 1.6 is out. Get it while it's hot.

GameCamp | Technology | guardian.co.uk

Aleks and Bobbie are putting on GameCamp in London on May 2nd. Should be fun.

Get Out And Play

The loading screen is the first game. Then there's a stop-motion video with the second game in the middle. Both games are clever variations on Breakout. Fun!

Why I Let My 9-Year-Old Ride the Subway Alone | The New York Sun

The heartening story of a mother who allows her child some independence instead of living in fear of a Black Swan.

Friday, April 18th, 2008

Museum home

The Museum of Computing ("committed to the preservation and display of examples of early computers") needs a new home. Do you know of anywhere that might be a good fit?

Bulletproof Ajax by Jeremy Keith on Flickr - Photo Sharing!

I guess there's a Chinese version of Bulletproof Ajax (nicely spotted, Nate). I would have thought this is exactly the kind of thing my publisher would want to tell me about.

Bulletproof Ajax by Jeremy Keith

Wrapping up The Future of Web Design

The Future of Web Design is all over bar the workshops. All in all, it was a good day with a well-planned schedule (apart from the yucky product pitches).

I think I did a pretty good job of liveblogging. I neglected to blog two of the presentations; sorry chaps. To recap in chronological order:

  1. Finding Inspiration for Design by Patrick McNeil.
  2. User Experience vs. Brand Experience by Andy Clarke and Steve Pearce.
  3. The User Experience Curve by Andy Budd.
  4. Demo hell courtesy of Microsoft.
  5. Getting Your Designs Approved by Larissa Meek.
  6. Photoshop Battle pitting Jina Bolton and Hannah Donovan against Jon Hicks and Elliot Jay Stocks, umpired by Andy Clarke.
  7. Print is the New Web by Elliot Jay Stocks.
  8. From Design to Deployment by Jon Hicks.
  9. Slightly less hellish demo courtesy of Adobe.
  10. Unconventional Ways to Promote Your Site by Paul Farnell.
  11. Iteration and You by Daniel Burka.

When all the talks were done, a group of my fellow geeks gathered together for dinner. Over a bowl of noodles, I enjoyed a great chat about community management tactics with Denise, Hannah and Daniel. Now that would be a great talk for a conference.

Suitably nourished, we moved on to the official after-party. It was good while the free booze lasted. But the glamour wore off once we were paying £5 for a small bottle of beer and the music got incrementally louder, making it harder and harder to socialise.

Alun led the escape committee in charge of making a break for Pub Standards. Together with Paul, Larissa and Daniel, we hopped in a taxi and sought asylum at The Bricklayer’s Arms. We refugees were greeted with open arms by the geeks gathered there.

Why has it taken me this long to make it to a Pub Standards? It was entirely filled with WIN!

Oh wait. I remember. It’s because of the tortuous journey required to get back to Brighton. In this case it involved an unforeseen change of tube, a sprint through the train station to make it onto the last fast train to Brighton only to be kicked off at East Croyden (something about a “door failure”) where I had to wait for half an hour for the next train to Brighton; a slow one.

That was quite a day. Despite the protracted travel at the end of it, I thoroughly enjoyed myself.

Thursday, April 17th, 2008

Iteration and You

Daniel gets off to a great start by plugging my blog. Oh, yeah! The excellence continues with his first slide which features the looming head of Trammell.

Daniel asks for a show of hands. Who works on one website? Who works on many different client websites? A good mix, it seems.

We’ll be hearing lots from Stewart Brand’s book, How Buildings Learn. Buildings don’t change much (on the outside at least …but let’s not go into right now). That’s certainly true of High Road architecture. But there’s also Low Road architecture which is much more modular. A lot of websites are like that. Frameworks like Django help there, as do Web Standards. With Low Road architecture you can easily build a castle as someone has actually done with mobile homes. White trash nirvana!

Establish a visual vocabulary to avoid building a . That worked with Pownce. Notched rectangles are used throughout, right through to the branding. On Digg, a lot of the visual language stems from the Digg button. It was initially inspired by a design element by Dave, used on Mozilla and refined on Digg where it influenced the overall design. Facebook also has a visual vocabulary based around blue rectangles and single-pixel lines. App developers can take this visual language and work with it to ensure their products fit in with the Facebook look and feel.

Design paths. That’s paving the cowpaths to you and me. Launch your website with the base set of features; don’t try to anticipate everything everyone will want to do. Instead, watch what people do and build on that. That’s how images came to Digg—emergence through user behaviour. Threaded comments also emerged from watching how people used a basic single-thread comment.

Adapt to scale. It’s a great problem to have. The original Digg button couldn’t handle figures with more than three digits.

Subtraction is iteration too (so true! I witnessed a great example of this in action just the other day in the Clearleft office). Remove clutter. You can add functionality and reduce complexity at the same time.

Realign, don’t redesign. That’s a direct quote from Cameron. You don’t have to rip everything out and start from scratch. When the Martha Stewart site redesigned, it really confused long-time users (like Daniel’s sister and the girl who sat next to Daniel on the flight to the UK). Unless there’s a really good reason to raze something to the ground, try instead to adapt what’s already there.

Now for the Stewart Butterfield quote:

Every time I hear a designer say the word innovation, I reach for my revolver… I want to shoot them in the face.

It’s okay to reuse something if it’s what works.

Make time for iteration (oh man, I hear ya!) — don’t overbook yourself on the new stuff. Release early, release often. Get it out the door even if it’s not perfect. Daniel illustrates this point with one of my Flickr pics.

But at the same time, don’t panic! You’re going to get an avalanche of feedback. Stop. Listen. Learn. Don’t overreact.

So to sum up:

  • Low road design is easier to adapt.
  • Realign, don’t redesign.
  • Create a visual language.
  • Remove as much as you add.
  • Don’t be over reactive.
  • Make time for iteration.

That’s it. Great advice! Any questions?

  • How do you sell iteration time to clients? That’s always tough—the politics. Choose your clients well.
  • How about using A/B testing to test features? It’s a great idea but Daniel hasn’t had a chance to implement it himself. If you can do it, it’s awesome but it requires the right infrastructure.
  • As an in-house designer, how to you get your bosses and management to buy into iteration? Didn’t we already have this question?
  • On the point of visual language, how much do you use a style guide? Daniel’s never used an official style guide, it’s more of a de-facto thing. At Mozilla they had some dos and don’ts but nothing hardcore.
  • Last question: You know when talked about the visual language? At what point do you decide that it’s too much to deploy everywhere? You can shake it up a bit. If it doesn’t fit, don’t use it. Variations are fine.

Bravo, Daniel! And indeed, Delta Tango!

From Design to Deployment

Jon begins by apologising if what he is about to say is old hat to everyone. No, Jon, never apologise!

He moves on to a much better subject: cheese. He loves cheese (no! really?) but there are no good cheese sites out there on the Web. Jon has bought the domain Cheesophile.com — what a friend we have in cheeses! He makes an excellent dig at the crappy Silverlight demo: there is no giant interactive cheese for you to spin around. That gets a round of applause.

Jon bears his file system to us and shows how he sets up his folder. Then he sets up a local server on Apache using MAMP or Headdress.

Jon takes the design and the content and in Fireworks he overlays what elements are the best semantic fit. Which pieces of content are headers? What should be in a list? Now he begins to create the markup but he begins without structural divs: just paragraphs, list items, headings and meaty elements.

Starting at the top of the document, choose a DOCTYPE—whatever floats your boat. Then think about the content of your TITLE element. For navigation, do you need a “skip navigation” link?

Now let’s look at that document with the default browser styles.

Uh-oh. Here comes a flame war: fluid vs. fixed, ems vs. picels, HTML vs. Flash. It all depends on the content.

Now what browsers will you support? What would Yahoo do? Graded Browser Support FTW! But for a personal site like the Rissington Podcast, Jon didn’t think it was worth bending over for IE6.

For CSS, Jon begins with a basic file that tidies up fonts and spacing but doesn’t do any layout. Now he @imports a reset stylesheet and a typography stylesheet and a layout stylesheet. Using conditional comments, an IE-only stylesheet is called in for everyone’s favourite browser.

For the reset stylesheet, use what Eric has done.

For the typography stylesheet, stop and think about the typeface choice. Jon thinks we should scrap the idea of web-safe fonts in the same way we scrapped web-safe colours. It’s like specifying “Roquefort, Stilton, Cheddar, any generic cheese.” Instead we should specify “A very specific Roquefort, any Roquefort, Stilton, any blue cheese.” So substitute specific fonts but not generic fonts. Use the metadata in your font management software to figure out the right order. Jon recommends stealing sheep by using negative letter-spacing on headers.

On to backgrounds. Wooden backgrounds are passé. Cheese backgrounds are the next big thing. For a large background image, you can afford to bring down the quality. Fireworks kicks Photoshop’s ass when it comes to small file sizes when saving images.

Hide your skip navigation link but make it visible on :focus.

Have a cup of tea.

Time to figure out your grid (Jon is taking the easy way out and using a fixed width layout—he is forgiven because of the lovely liquidy goodness he has given us in the past). A JavaScript bookmarklet helps toggle a grid overlay on and off.

Frameworks. Do what you want but Jon prefers to use his own framework: tried and tested bits of CSS.

Once the grid sizes are set, you can start resizing images. Play around with sharpening in Photoshop after resizing.

Now the site is looking good. It’s bughunting time! Firebug is your friend. Then comes the horrible moment when we look at the site in IE6. It’s probably the fault of hasLayout. Father Ted explains it best. Sister Asumpta is the div. Father Dougal is IE6. How do we get Dougal to recognise Sister Asumpta? We use the “blue jumper” of hasLayout which can be zoom: 1. You might be tempted to apply this with the universal selector but it’s better to understand the problem and then fix it.

Finally, around midnight, the site gets deployed. Bravo! hicksdesign.co.uk/journal/design-to-deployment

Print is the New Web

Elliot Jay Stocks is going to tell us what Web design can learn from print design. Pshwaw! We don’t need that dirty dead tree stuff, do we?

He’s showing some very pretty pictures of book covers. A lot of them are from George Orwell books. Elliot confesses that he’s not a huge Orwell fan. For shame! George Orwell is my hero.

Down to brass tacks. Print design gives you a lot of freedom. There’s the freedom to use large areas of whitespace, unusual layouts, bold imagery and typography as well as breaking outside of the grid.

People talk about a long-established design for print while Web is all new. But Elliot thinks that isn’t the case. Web design is built on the same history as print design. To take that further, both are built upon the history of art.

It was Flash that first got Elliot interested in the Web. It was very visual. He quotes Jeff Croft from a comment on one of Khoi’s post when he said that the appeal of Flash is that has a similar interface and vocabulary to Photoshop and other design tools.

Here’s Conclave Obscurum. It’s a Flash site that has stood the test of time well. It’s got weird shaky text and other deliberate glitches but it’s engaging. But what purpose do these deliberate glitches serve? Well, they break the mold. They create a pleasant level of tension, like watching a whodunnit.

Coba Hair is non-Flash site that does some interesting stuff. Then there’s the Seed Conference site which almost like a step back to playbills. Revyver is brave in not slapping a logo in the big space at the top.

Now comes what Elliot calls the poncey bit: narrative in Web design. He begins by quoting Khoi.

No-one Belongs Here More Than You has a great narrative structure. Shaun builds narrative by using colour and more importantly, fading older content.

The poncey narrative theory begins with Freytag’s list:

  1. Exposition
  2. Rising action
  3. Climax (turning point)
  4. Falling action
  5. Denouement

How does this translate to Web design?

  1. Structure
  2. Tension
  3. Stand-out elements
  4. Balance
  5. The overall aesthetic

Let’s talk about business cards. Elliot loves them. He’s showing his favourites. But your home page is not your business card. Neither is your navigation or your contact page. Your design is your business card.

To summarise, there are two tangents in Web design: Flash and HTML/CSS. There should be more crossover between the two. We should be embracing the freedoms of print design. Narrative is lacking in a lot of (non-Flash) websites. Bur more than anything: you impress not just with good design but with brave design. Take things that you wouldn’t normally do (often from a different medium) and apply them to the Web.

Elliot finishes by asking us to join him for a drink tonight to help him celebrate leaving Carsonified. As he says, woo-hoo!

Photoshop Battle

It’s time for one of the more, um… “interesting” slots at The Future of Web Design conference. It’s a live battle of the sexes with Photoshop as the weapon of choice. Whatever you do, don’t call it layer tennis.

Andy Clarke is the compére. He gets the show on the road by introducing the contestants one by one:

With the introductions out of the way, the game kicks off. The boys win the toss and elect to let the ladies go first.

While Jina makes strange amalgamations of Malarkey and robots, Andy sits down for a chat with Elliot and Jon. Jon is sharing insights into life at Rissington. Apparently John has taught him to swear properly.

A Twitter from the audience: Mr. Hicks, you’re rocking the pipe and beer but where are the slippers and flat cap? Did I neglect to mention that they’re all drinking some very nice Belgian beer.

30 seconds for the first round. Meanwhile Elliot explains the challenges in going freelance like getting dressed in the morning. With that, the first five minutes are up.

Second round. The boys get Photoshopping and the girls sit down for a chat. While Hannah explains the revenue model for Last.fm, the lads pull up embarrassing pictures of Andy like the one where’s he drinking out of pineapple when we visited the Tonga Room.

Andy quizzes Jina on the differences between agency work and working for a large unnamed company.

Next round. Hannah has control of the decks. Andy says he’s trying to ignore what’s been constructed on screen. Inevitably, he quizes Jon on the Firefox logo. Jon tells the tale of receiving an enquiry from Burning Monkey Software, could we get a monkey on fire wrapped around a planet? Since doing the Silverback icon, he gets asked to do more primates.

30 seconds left on the clock for this round.

Time’s up. The ladies have created a lovely montage. Now it’s time for the last volley. The boys really need to pull out all the stops.

The conversation between Jina and Andy resumes. They’re talking about creativity and other such designery things.

At this point, the alarm on Jina’s iPhone (which has been deposited somewhere near me) starts to go off. I must spend five minutes trying desperately to find it and switch it off. Just as I manage that, the Photoshop battle ends. Who won?

Cheesophile : What a friend we have in Cheeses!

Jon's demo site for his talk at The Future of Web Design. It's all about cheese. I wish it were real.

Getting Your Designs Approved

Larissa Meek takes to the stage to talk about getting design sign-off. She’s got 12 simple rules but remember, every client is different so these kind of cover the best-case scenario.

In the ideal scenario, the client loves your first round of comps. In reality, you get comments like I don’t like blue, make the logo bigger or something is missing. That last one is particularly frustrating as a piece of feedback.

Remember, design is subjective—everyone has a different idea about what constitutes good design. Another problem is that comps aren’t interactive. Also, it can be hard for a client to grasp new, innovative ideas. The reason why everyone has an opinion on Web design is that everyone uses the Web.

  1. Make friends with your client. Your client is not your enemy. They get as frustrated as you. Try to see things from their point of view. A lot of them are overworked; this Web thing might not be the only project they are juggling.

  2. Ask lots of questions. What are the business objectives? What does the client want to get out of the site? This might differ from what the user might want from the site. Consider the hot dog. It’s basically a piece of meat on some bread. How would you ask questions about hot dogs… what are hot dogs? why are they called hot dogs? why are they kosher? what does kosher mean? why are hot dog buns longer than the hot dogs? what’s the best way to cook a hot dog? why are hot dogs associated with baseball? hot dogs? hot dogs? hot dogs? …the hot dog entertainment is interrupted as Larissa’s Windows laptop attempts an auto-update. Whoops.

  3. Ask more questions — who will be using the site? Sometimes the client hasn’t really considered this question. User profiles help. These are often overlooked but they help in those tough spots with the client when you need ammunition to justify a design decision. You can argue that you’re doing what’s best for a user rather than just defending your own opinion.

  4. Use wireframes but don’t be tied to them. Clients can’t always make the leap to visualise how wireframes will differ from the final product. But wireframes are a great conversation starter. Together you can answer a lot of questions before getting to the design stage. This gets them to think about functionality and see things from the user’s point of view. Walk your clients through wireframes. Try to use real copy instead of greeked text. Larissa also things that wireframes should be “to scale” but to me that sounds like she means layout. (Personally, I consider that to be a design decision. Hierarchy in wireframes, yes; layout, no. Larissa says that subtle changes are okay. I guess we just draw the line in a slightly different place.)

  5. Talk about design before you even open up Photoshop. Try to nail mood and colour before you start creating comps. The client’s input is important at this stage. If the client has a style guide, you must understand it. You can give the client site examples and colour palettes. Create a quick mood board.

  6. One design direction will do. Too many options are overwhelming. The client will probably like a little bit from each design and you end up with a piecemeal design cobbled together from various bits. Really, at this stage you should be focused on one design direction. Designing should not be like a take-out menu.

  7. Present in the browser. Don’t just email it. You can send additonal documentation but you really need to walk a client through a design in a browser. Your client might have to sell the design on to the next person in the chain so they need to know how to walk through the design.

  8. Prototype as needed. Not every site needs it but for Web apps, it’s very important. Prototypes help you figure out things from a user’s point of view. Fireworks is a good tool for this.

  9. Ask for consolidated feedback and limited rounds of revisions. Try to avoid committees. You don’t want to be getting contradictory feedback in bits and pieces. You’ll probably need to educate your client in how the feedback round should work. Too much haphazard feedback leads to scope creep. Control the feedback and you can keep your project on track. Too many cooks spoil the broth. Remember, everyone has a different opinion on what constitutes good design. Help your clients focus. Ask for specific feedback.

  10. Be confident in your work. This can be difficult for new designers and also for freelancers who don’t have the support of a team. You have to be confident so you don’t go to your client asking hey, is this right? Instead, you want to explaining the informed the design decisions you made.

  11. Time will tell. A lot of clients don’t realise what goes into a site. It takes time for them to learn. It’s easier with clients you’ve worked with before. Getting sign-off is easier once a relationship has been established.

  12. Make the most of a difficult situation. When life gives you lemons, make lemonade. It’s easy to get frustrated in a design project. You need to take a step back and rediscover what it is you love about the project. Try to focus on the positive and move forward in an optimistic way. Then you’ll feel like you’re working with the client instead of against them.

Those are the twelve points. As is this The Future of Web Design conference, let’s ask what’s the future of getting designs approved? What are the best practices? It’s hard to tell. Every project is different. Every designer is different. But there is a Society of Digital Agencies which is intended as a platform for designers to figure out the best processes and guidelines. It has 18 “leading” digital agencies apparently.

To wrap, remember that the 12 rules outlined here are a best-case scenario. Come to terms with the fact that no project goes exactly to plan. Larissa now reiterates the 12 points in case we missed them the first time ‘round.

Demo hell

The Future of Web Design just took a nose-dive. I’m having flashbacks to MIX08 as we are subjected to an interminable Silverlight demo.

Any conference that allows sponsors to buy speaking slots isn’t putting together a user-centred schedule. At best, these shill spots are tolerated. For most people, they engender downright hostility.

On the plus side, these pathetic little sales pitches are shorter than the real speaking slots. I can see Paul edging up on the side of the stage, ready to drag this guy off—he has definitely outstayed his welcome.

The User Experience Curve

My cohort from Clearleft, Andy Budd is up now. Let’s see how he does.

Without any faffing about, he kicks off with a story about checking into a hotel. This is better than bullet points any day. He maps this experience onto a graph. This is his user experience curve.

The start and the end of the experience are the most important so you should focus on those parts but the whole experience is important. Andy shows a different graph which maps the user experience curve of checking into a different hotel. This curve looks different because the experience was sub-par.

We need to look at examples from beyond the Web. Andy will go through seven touchpoints of user experience.

First Experience Counts

This sets the tone for the whole day. He quotes some dodgy statistics about how quick women make up their minds about blokes on that first meeting. Then there’s the doorman at a hotel. He’s your first experience of that hotel. Ostensibly he’s there to carry your bags but really he’s there to make sure you’re experience begins will. This doesn’t work in retail when those creepy people greet you as you enter a store.

People do judge books by their cover. Take those lovely Dorset Cereal boxes for example. The design helps sell the product. Apple have mastered the art of the first impression. Unboxing an iPod is like undressing your girlfriend for the first time —Andy’s words, not mine.

The games industry also craft the initial experience well. The first level of Call of Duty is a basic training level. This is a better experience than reading a manual. He shows some game footage, demonstrating how the game dripfeeds you instructions as you go along. Crucially, this happens in-game, not in some separate place.

Then of course, there’s the Web. People really do make snap decisions. 37 Signals do a really good job of introducing new features. Yahoo have also tried “in-game” walkthroughs with on-screen overlays.

Time for an example from Clearleft: Edenbee. On the “newbee” page, there are a bunch of overlays. Sidenote: they were a bitch to mark up and style, just so you know.

Attentive Service

An attentive waiter or waitress refill your glass without you noticing. That’s a nice experience. Then there’s the experience of queueing, not normally a nice experience. Whole Foods have been spending a lot of time studying this.

Again, Apple are a good example. Their retail stores are well-researched. They built an initial prototype based on the company’s business needs and when that clearly didn’t work, they redesigned it around the customer’s needs. Then they launched. Per square foot, Apple Stores are four times more profitable than Best Buy.

Personalisation and Customisation

Andy thinks that the key ingredient to the Wii’s success is not the wiimote but the wiimiis. In Starbucks, they ask for your name when they make your drink. The interaction is customised for you. And of course there’s the drinks customisation: mod your drinks.

The gaming world is also big into customisation. Take Josh’s WOW character that he’s invested a lot of time into. This customised avatar is also a status symbol.

On the Web we can do small things, like calling people by their name, that people really like. Then there’s customisation like on MySpace and to a lesser extent Twitter, that allows people to invest more into their pages (and they are therefore less likely to abandon that service).

Attention to Detail

Engineering problems are solvable. It’s the little design things that are hard.

In a hotel, putting a little chocalate on your pillow used to be a delighter. Now it’s passé. They have to do more now. One hotel puts a hand-written card in your room with the weather forecast for the next day. That has an emotional effect.

Car manufacturers spend a lot of time getting the sound of the car door slamming just right. A satisfying thunk is indicitive of the whole user experience.

Disney are the masters of this. Nothing in Disneyland or Disneyworld should break the Disney spell. So they have their own crafted bins. That’s consistency.

Here’s a fantastic little delighter from an Innocent Smoothie carton: the underside reads Stop looking at my bottom. That made Andy smile all day long. Bless.

Threadess are good at that. Moo, of course, are experts at this with the personalities of Little Moo and Big Moo. Denise is in the audience somewhere—she must be happy.

The parallax effect on the Silverback holding page is a also a delighter. Only a small percentage of people will see it but those people will be very pleased with that Easter egg.

Feedback

The gaming industry is all about feedback. Andy channels Dan Saffer as he talks about the feedback you get from a slot machine in Las Vegas.

Feedback prevents you wasting time. That little flag on American mailboxes is a handy feedback mechanism.

Feedback helps manage expectations. When you’re on hold with BT, they don’t tell you how long you’ll have to wait. The systems that tell you you are fifth in the queue are more useful and help you manage expectations.

Ultimately, feedback helps people solve their problems. Apple asked people where they had their best experiences. People said it was concierges in hotels. That’s where the idea of the Genius Bar came from: a concierge for your Mac.

On the Web, Linked In provide feedback on how much of your profile you have filled out so far. If you know you’ve only got 10% to go, you’re more likely to see it through.

Ajax is handy in adding meaningful feedback to forms. Kayak is a good example of constantly updated feedback.

Google Maps is all about feedback. You can drag, drop buttons, play around. Whatever you do, you get a reaction. Google Maps is fun.

When things go wrong, that’s an opportunity to interact with your customers. Error points are the areas where you can excell. Andy sent a snotty email to Tripit—within half an hour he got an apologetic email that turned him around from angry to happy. Error pages, of course, are the perfect place for good feedback.

Make It Fun

People like games. People like collecting. Collecting social objects brings a payoff with it. But whenever there’s a payoff in a system, that system is open to gaming. Points are useful for letting you know where you stand in a system but they also lend themselves to leaderboards. That can discourage the newbies at the bottom of the leaderboard.

Flickr is like a game based around collecting social objects—in this case, photos (thankfully Andy is using the term social object correctly here).

Digg used to display the top 100 diggers but that led to the rich getting richer and the poor getting poorer as the system was gamed. Digg removed the feature.

Moo is a game that sucks you in. Andy initially went along to check out the site and ended up getting drawn in. Before he knew it, he had bought a pack of business cards.

Create a Perfect Environment

Andy syas we need to look beyound the Web to places like a Starbucks, the Virigin Atlantic lounge and Las Vegas to see what constitutes a great user experience. Dear God! I hope we don’t recreate Vegas on the Web. It’s bad enough in real life.

Aaaaand… he’s spent. The boy done good.

User Experience vs. Brand Experience

I’m at the Future of Web Design in London and figured I’d pass the time with some live blogging.

Right now there’s a session somewhat in the same vein as last year’s Flash vs. CSS face-off. This time it’s brand experience vs. user experience. And just as with last year’s supposed battle, the truth comes out pretty early on that actually they should work in perfect harmony.

Steve Pearce is on first, fumbling with his Mac setup and mumbling about the importance of user experience but hammering home that brand and user should be in agreement. He’s illustrating this point with some cute cartoons.

The interactive experience is like an iceberg apparently. An experience iceberg. The visual part sits above the surface (what most people see) but the main part (that people interact with) is below the surface. We spend too long focusing on the bit above the surface. It doesn’t matter how much you polish the visible bit if it’s a wreck underneath. Basically, you can’t polish a turd …or a turdy iceberg. Instead we should work on the experience, which is the stuff under the surface. The reason we should work on this is that users will spread the word about good and bad experiences.

At this point, Steve mentions social objects, misattributing the term to Hugh instead of Jyri. I don’t quite see the connection with social objects unless he’s trying to say that any good user experience is automatically a social object because people will talk about it with their friends. That’s not quite my understanding of social objects. Can I include the term social object in every sentence I write? Possibly (social objects).

Don’t work too much on the surface: work on the experience underneath. That’s Steve’s takeaway point.

Now Andy is up to talk about the importance of brand. To demonstrate his point, he will refer to classic British comedy acts like Morecambe and Wise.

Andy makes the point that branding isn’t about what’s up on the billboards. It’s more about the experience and emotional attachment. Think Starbucks. Think Twitter.

Quoting Seth Godin, Andy says that a brand is really about getting people talking to each other. You know, the viral thing.

Now for an Eric Morecambe interlude. There is a connection though. In the past, everyone used to watch the same television shows and share the experience. There were far more people watching the Morecambe and Wise Christmas special than the most-watched TV programme today. Back then we consumed media in a very different way. These days it’s harder to reach those numbers and create something that spreads so widely. Back to the Eric Morecambe jokes now.

Andy plugs Dan’s book. Instead of thinking of systems-centred design, we can practice user-centred design. What if we make people something they love emotionally instead of asking them what they want? This is reminding me of Henry Ford’s quote that If I had asked people what they wanted, they would have said faster horses.

Then there’s activity-centred design. Look at what people do instead of asking them.

Finally, there’s genius design. This is the Apple approach. You create something that you think is going to be fantastic and the user will then tell you if you were right. But you mustn’t fear failure otherwise you will never release anything risky. Yes, it’s the old “learn from your mistakes” lesson.

Andy likes the idea of inspired design. A usable design need not be a safe design.

Design should be more like one-liners from Eric Morecambe. That’s his takeaway point.

An awkward silence follows. Our compére, Paul Boag kicks off the Q and A by asking C’mon, it’s all good and well to say it’s okay to fail and learn from our mistakes, but I don’t think our clients would like that very much!

Steve says that a beta testing period is a good time to fail. You can then learn from your mistakes and still improve the product. It’s humbling to learn that we don’t know what users want.

Andy says this what we hired for—to create and experiment and sometimes fail. Otherwise we’re just painting by numbers.

Steve says creating great work requires a great client.

Next question: is there any way of measuring the value of user experience?

Steve says you can measure it by how much people talk about it. But there’s no magic bullet for measuring it.

The next question may or not be about inspiration. The advice from the panel is not to create Frankenstein designs by mashing up the best bits of other sites. Those bits don’t work so well out of context. That may or may not answer the question.

Now a question about roles and who should be doing what. Silos are bad, mmkay? Engineers, designers, developers …who calls the shots? Andy insists on doing his own wireframes. He also designs using HTML and CSS. He doesn’t want to get bogged down in process. Who wants to spend their answering Basecamp messages. Steve reminds us that design is about solving problems and that isn’t the exclusive domain of designers—engineers are good at that too.

And with that, Paul kicks them off the stage.

Wednesday, April 16th, 2008

Flickr Code

Hurrah! Flickr are sharing their code and here's the central repository.

The Rather Difficult Font Game

I scored 27 and frankly, most of that was pure luck.

Tuesday, April 15th, 2008

Sternlab.

Knitted body-technology interfaces.

Candy Should Not Be Mean | Slog | The Stranger | Seattle's Only Newspaper

Play Russian Roulette with Jelly Beans. This is a real product.

Letters to Walken

Christmas letters to Christopher Walken.

Monday, April 14th, 2008

Planet BNM

The homepage of the local Brighton New Media mailing list has had a facelift. It's now a very nifty aggregator of Brighton geek content.

Heavy Artillery Graffiti

These are the guys that painted the walls across from the Clearleft office. Every day, at least 10 people take pictures of their work.

Play You Have To Burn The Rope, a free online game on Kongregate

Burn the rope, kill the baddies and save the entire planet. Well, not really. But it's worth winning this game (by burning the rope) to hear the song.

Jelly Bed

I like it when geek travellers from afar pay Brighton a visit. This weekend Matt and Cindy came to town. This neatly coincided with Jina’s visit. She’ll be be partaking in The Future Of Web Design this week so right now she’s acclimatising here in Brighton.

There are two things I do whenever I have a visitor staying over:

  1. update my bedroll,
  2. try to convince the visitor to eat .

Shaun wouldn’t do it. Derek wouldn’t do it. Dave wouldn’t do it. Jina did it.

Jina's jellied eels Om nom bleurgh! An acquired taste

It strikes me that this practice of telling someone they are about try a local delicacy when in fact they are about to consume slimy fish in salty gunk is the gastronomic equivalent of rickrolling. But with jelly. It’s jellyrolling.

Saturday, April 12th, 2008

YouTube - Over the Air: Future Platforms - OctoBastard

Tom Hume demos Octobastard: a robot arm controlled from a mobile phone.

Friday, April 11th, 2008

Monkeyformats

Microformats + Greasemonkey = Monkeyformats. Is there a site that you wish used microformats? Write a userscript and share it here.

Thursday, April 10th, 2008

bn14aj - Google Maps

There is an undocumented feature in Google Maps: add "&output=html" to the URL to get the accessible, non-Ajax version.

Twitter Friends Network Browser

Browse trough your twitter friends, and your friends' friends, and your friends' friends' friends...

Spaces

It seems that small interface changes are rolled out to Twitter on a fairly regular basis. This morning, for example, I was greeted with a new “Everyone” tab. I was also disappointed to discover that an interface improvement that was introduced a few weeks ago has now been removed. As interaction tweaks go, this was a very small thing but it’s something I appreciated very much. Let me explain…

When I’m reading a long-ish page on the Web, rather than move my cursor over to the scrollbar, position it just so and click to scroll down see the next screenful of content, I’ll just tap the spacebar. In just about every browser I know, this will scroll the content by one screenful. This flow is interrupted if a website “helpfully” puts the focus into a form element when the page loads. This isn’t an issue on, say, Google because Google doesn’t have more than one screenful of content. But it is an issue on Twitter. When Twitter loads, the What are you doing? input box is automatically given focus. If I want to scroll down below the fold, I must either use the scrollbar or click out of the form element and then use the spacebar. I can understand the rationale behind this. Chances are most people want to get into that form element and start typing …at least on the front page.

The interface improvement that Twitter introduced a while back was to take that automatic focus away if I was on any page other than the first. In other words, if I was clicking back through older pages to catch up what my friends have been doing, the focus was no longer automatically given to the form element. Brilliant! This awareness of context reminds me of what Eric wrote when they were adding print stylesheets to A List Apart:

These print styles are only used on articles, which are the pages that are most likely to be printed.

Perhaps through oversight or maybe through deliberate choice, Twitter now places the focus in that form element on every page. What a pain! And what a shame that a great example of context-sensitive interaction has been removed.

I hereby invoke my bitching ‘n’ moaning mojo: c’mon Twitter, do the right thing.

While I’m at it…

Oi! Flickr! What’s up with the automatic focus in the search form on search results pages? Explain that to me. ‘Cause from where I’m sitting, it’s just downright annoying.

Wednesday, April 9th, 2008

THINKING ABOUT NETWORKS

They never taught this in my school.

They Shoot Browsers, Don’t They?

This article first appeared in issue 253 of A List Apart magazine. Two weeks later, Microsoft reversed their position on the default behaviour of version targeting.

App Engine, Facebook Platform, OpenSocial, and the Future of the Web - O'Reilly Radar

David Recordon shares his first impressions of Google App Engine.

App Engines of Creation

At last night’s £5 App gathering, after Glenn entertained us with the story of setting up Madgex, Paul and Simon unveiled a little thing they’ve been working on called WalRSS. In a nutshell, you point it at a URL and it makes a nice iPhone/iPod Touch version by styling the associated RSS feed.

Simon talked about all the headaches involved in such a seemingly simple concept. All the problems boiled down to the fact that the app needs to consume/parse/scrape third-party content. It turns out that consuming/parsing/scraping HTML and RSS is an order of magnitude hairier and scarier than pointing at a nice shiny RESTful API. In a textbook example of , Simon needed to be ultra-paranoid about malicious users potentially taking down his server while being overly-generous in the kind of malformed, invalid RSS/Atom he accepted because, as it turns out, a helluva lot of feeds out there are bozo-compliant. With all sorts of clever server-side solutions at his disposal to handle polling, load balancing, caching and message queueing, he quickly came to realise that he was becoming more of a sysadmin than a web developer.

Ironically, just the day before the £5 App meetup, Google announced their App Engine. WalRSS is almost exactly the kind of app that the App Engine is designed for: it’s written in Django and it needs to do the kind of processing that Google’s infrastructure was made to handle.

I for one welcome our new App Engine overlords. I quite like to dabble in the occasional bit of backend coding but I have no desire to delve into the domain of systems administration.

There’s already an OpenID provider built on Google App Engine. This means that anybody with a Google account potentially has an OpenID URL. You’d have to log in through the app first but from then on, you could use http://openid-provider.appspot.com/[your username] as your login.

Right now I’m using http://adactio.com/ as my OpenID URL, delegating to http://adactio.myopenid.com/:

<link rel="openid.delegate" href="http://adactio.myopenid.com/" />

Should I ever tire of MyOpenID, I guess I potentially update my delegate link to use Google:

<link rel="openid.delegate" href="http://openid-provider.appspot.com/adactio" />

I’d still need to update my openid.server link though.

Oh, you think this is geeky stuff? You should have heard Simon last night. Actually, you could have if you tuned into Ribot’s live broadcast on Qik.

Black Cab Sessions

This is the very definition of an intimate gig: a song in the back of a London cab.

OpenID for Google Accounts

Every Google account can now be an OpenID login thanks to this app built with the Google App Engine.

Tuesday, April 8th, 2008

Flickr: Photos from Powerhouse Museum Collection

The Powerhouse Museum in Sydney—who have been doing some great stuff with public tagging already—have joined the Library of Congress in putting their photographic collection online for crowdsourced tagging.

Visual

Jason Kottke points to a a beautiful collection of literary maps by Stefanie Posavec. Meanwhile over on A List Apart there’s a new article by Wilson Miner called Accessible Data Visualization with Web Standards. He shows some of the nifty CSS tricks he used on EveryBlock. The end results are very impressive though I don’t necessarily agree with the assertion that when what we’re really building is navigation, tables are an awkward and often clumsy tool for the job — I still think that tables would have been not just semantically correct but also malleable enough with CSS. But I’m nitpicking. It’s a great article.

There was oodles of data visualisation goodness at BarCamp Brighton 2 courtesy of Robin Harrison. Check out the links from his presentation. As well as the Tufte favourite of Napoleon’s Russian invasion map, he mentioned Florence Nightingale’s map of mortality causes which reminded me of the cholera map of London. That is the subject of the newest book from Steven Johnson called The Ghost Map: The Story of London’s Most Terrifying Epidemic—and How It Changed Science, Cities, and the Modern World.

There are some fine examples of data visualisation over at the New York Times:

Some more data visualisation:

.CSV » group think

Emergence, network theory, behavioural science ...these things have been occupying my mind a lot lately.

What Is Google App Engine? - Google App Engine - Google Code

Infrastructure just got even cheaper. Between this and Amazon's EC2/S3, the barrier to entry to getting an app up and running is getting lower and lower.

Stuffed Robot - Handmade Plush Robots

Plush robots. For the robot-lover in your life. You know; Ethan, Jina ...every other geek you know.

Monday, April 7th, 2008

Mi.gration

I’ve used del.icio.us for quite a while now. I’m storing 1159 bookmarks, each one of them tagged. It works just fine but it also feels a little, I don’t know …stale. There is supposedly a redesign in the works but I’m not sure that I want to wait around any longer to find out if they’re finally going to put some microformats in the markup.

Instead, I’m moving over to Magnolia. I’ve had a Magnolia account for years but I’ve never really used it. I didn’t see the point while I had a del.icio.us account. But whereas de.icio.us appears stagnated, Magnolia seems to be constantly innovating. Also, it uses microformats. There’s also the fact that I know Larry and I’ve briefly met Todd (lovely gents, both) but I don’t know Joshua Schachter. That shouldn’t matter but it kind of does.

Moving from del.icio.us to Magnolia is very straightforward. But that alone wasn’t going to be enough for me. I’m also accessing my del.icio.us bookmarks through the API. It turns out that Magnolia provides an ingenious way to ease my pain. As well as providing , Magnolia also provides . All I had to do was change some URL endpoints and I had Adactio Elsewhere switched over in no time. Other services take note: providing mirrored versions of your competitors’ APIs eases the pain of migration.

I’ve updated my feedburner RSS feed to point it at my Magnolia links instead of my del.ious.us links. If you were subscribed to my del.icio.us feed separately, you’ll probably want to update your feedreader to point to my Magnolia links instead.

It remains to be seen whether I’ll stay at Magnolia. Even though it is functionally and cosmetically superior to del.icio.us, that might not be enough. After all, Jaiku is superior to Twitter in almost every way—design,markup, reliability—but Twitter still wins. That’s mostly because that’s where all my friends are. Right now my bookmarking friends are split fairly evenly between del.icio.us and Magnolia. Then again, I’ve never really made much use of the “social” part of “social bookmarking”.

So who knows? Maybe I’ll end up moving back to del.icio.us at some stage. It’s reassuring to know that moving my data around between these services is pretty straightforward: I can export from Magnolia and import into del.icio.us any time I want.

Tweet Clouds

My Twitter folksonomy. I'm glad to see that present continuous verbs are the most used.

Sunday, April 6th, 2008

doesyourapi - user generated API design guidelines

Gareth is putting some wisdom of crowds behind the design of APIs. Vote on the principles that you think are important in a good API.

Saturday, April 5th, 2008

BMWSportTouring Forums: Space Shuttle Processing: Rarely seen by the general public

This photoset of a space shuttle' journey from assembly to launchpad is bringing back memories of that behind-the-scenes glimpse of Cape Canaveral I was lucky enough to enjoy. Thanks again, Benny!

HTTP errors - a photoset on Flickr

Friendlier HTTP errors.

400 Bad Request

Wufoo: UI That Really Cares

A nice piece of UI design. I think Kathy Sierra would like this.

Moral panic

Thanks to Tom’s always excellent linkage, I came across an excellent in-depth article by Brenda Brathwaite called The Myth of the Media Myth, all about the perception of videogames by non-gamers. The research was prompted by a dinner conversation that highlighted the typical reactions:

It happens the same way every time: People listen and then they say what they’ve been feeling. Videogames are not good for you. Videogames are a waste of time. They isolate children. Kids never go outside to play. They just sit there and stare at the TV all day.

The tone of the opinions reminded me of the Daily Mail attitude to social networking sites. The resonances were so strong that I decided to conduct a quick experiment using my hacky little text substitution script. Here are the terms I swapped:

OriginalSubstitution
videogamesocial networking site
gamingsocial networking
game designerweb designer
gamewebsite
playsurf
GTAFacebook

Because the original article is paginated, I ran the print version through the transmogrifier. Please excuse any annoying print dialogue boxes. Here’s the final result.

The results are amusing, even accurate.The original article begins:

There are six of us around the table, and the conversation turns to what I do for a living, also known as “my field of study” in academia. “I’m a game designer and a professor,” I say. The dinner had been arranged by a third party in order to connect academics from various institutions for networking purposes.

“You mean videogames?” one of the teachers asks. It’s said with the same professional and courteous tone that one might reserve for asking, “Did you pass gas?”

“Videogames, yes,” I answer. “I’ve been doing it over 20 years now.” Really without any effort at all, I launch into a little love manifesto of sorts, talking about how much I enjoy being a game designer, how wonderful it is to make games, all kinds of games.

After substiitution:

There are six of us around the table, and the conversation turns to what I do for a living, also known as “my field of study” in academia. “I’m a web designer and a professor,” I say. The dinner had been arranged by a third party in order to connect academics from various institutions for networking purposes.

“You mean social networking sites?” one of the teachers asks. It’s said with the same professional and courteous tone that one might reserve for asking, “Did you pass gas?”

“social networking sites, yes,” I answer. “I’ve been doing it over 20 years now.” Really without any effort at all, I launch into a little love manifesto of sorts, talking about how much I enjoy being a web designer, how wonderful it is to make websites, all kinds of websites.

The comments from interviewees also hold up. Before:

One friend complained about GTA, admitted she’d never played the game and then offered this: “If you really are interested in deep psychoanalysis… the truth of my disdain for games is from a negative relationship — [a former boyfriend] would play for hours, upon hours, upon hours. Maybe I felt neglected, ignored and disrespected.”

After:

One friend complained about Facebook, admitted she’d never surfed the website and then offered this: “If you really are interested in deep psychoanalysis… the truth of my disdain for websites is from a negative relationship — [a former boyfriend] would surf for hours, upon hours, upon hours. Maybe I felt neglected, ignored and disrespected.”

Even the analysis of the language offers parallels. Original:

“I haven’t found this kind of attitude about games per se. But in my version of your dinner party anecdote, I start with ‘I make games,’ not ‘I make videogames,’ and I’ve never had a response like the one you describe. This leads me to wonder if the very term ‘videogames’ is the problem meme.”

Substitution:

“I haven’t found this kind of attitude about websites per se. But in my version of your dinner party anecdote, I start with ‘I make websites,’ not ‘I make social networking sites,’ and I’ve never had a response like the one you describe. This leads me to wonder if the very term ‘social networking sites’ is the problem meme.”

But most telling of all are the quotes in the closing passages that haven’t been changed one jot from the original:

“If I had a choice, I would want to include these distrustful folks in finding solutions. I would prefer it if they understood. I would prefer it if they could see the long sequence of events that is going to address their fears and create the medium they will inevitably love and participate in, whether they expect to or not. What’s sad is that their ideological, ignorant, hostile, one-dimensional attitudes oversimplify one of the most beautiful problems in human history.”

Morethanseven » Why the webstandards world appears to be choosing Django

Gareth tries to figure out why Django seems to strike a chord with standardistas. It may that the separation of concerns resonates with the methodology of progressive enhancement. Some good comments follow

The Escapist : The Myth of the Media Myth

A piercing article by Brenda Brathwaite examining people's attitudes towards gaming. Substitute "videogames" for "social networking sites" for equal slices of moral panic.

Design Idea » Twitter and the Crystal Goblet

Good design is invisible. Rebecca points out why Twitter is very good social design indeed.

Friday, April 4th, 2008

The browser and beyond - that was Highland Fling 2008 (Yahoo! Developer Network blog)

Christian's round-up from The Highland Fling. Sounds like a good time was had by all.

Thursday, April 3rd, 2008

Amazon Web Services Developer Connection : Problems with XSLT and large ...

If anybody out there has some experience with the Amazon Associates Web Service API and XSLT, I could do with some help.

CSS Compatibility and Internet Explorer

A very handy table of CSS support for versions of Internet Explorer from 5 to 8. Note that IE8 Beta 1 is listed separately to IE8.0.

The Highly Extensible CSS Interface

Cameron has put all the materials from his four-part series together in one handy spot.

FooVid

At the end of the that I was at two months ago, the good folks at O’Reilly offered attendees the chance to share their thoughts on the weekend. So after 48 hours of sleep deprivation, some of us looked into a camera and performed mini braindumps.

Wednesday, April 2nd, 2008

Welles

In the latest episode of the Rissington podcast a listener asks What Podcasts do you listen to regularly? The panel answer with some top-notch listening recommendations. I’d just like to chime in with my own number one choice: Radiolab. Yes, technically it’s a radio programme rather than a made-for-Web podcast but that’s also true of my second choice, Mark Kermode’s film reviews.

The latest episode of Radiolab is somewhat special: the whole thing was recorded live in Saint Paul, Minnesota. The subject matter is also pretty special. The episode is devoted to War of the Worlds; not the book, not the many film versions, but the classic Orson Welles radio dramatisation. There’s a lot of resonance with more recent phenomena like ARGs. While we can’t quite place ourselves in the mindset of 1938, it’s still pretty thrilling to listen to that original broadcast. A recording of the radio broadcast is available on the Internet Archive.

Ah, Orson Welles! Most people will remember his best film work as being Citizen Kane but we really know that Touch of Evil (but not the studio cut) is his real meisterwerk. And while everyone remembers his War of the Worlds broadcast, who knows of the genius that is :

We know a remote farm in Lincolnshire, where Mrs. Buckley lives. Every July, peas grow there.

As for his renowned acting talents, surely his finest work was revealed towards the end of his life when he poured his soul into this Paul Masson wine commercial.

Grubbin' - Garlic Prawns

This recipe from Ted looks like a keeper.

Next to Last.fm

I’m listening to Jessica play some music on iTunes and I can’t help but think what a shame it is that Last.fm has no knowledge of this. The MyWare of Last.fm only works for my devices; my iTunes, my Mobile Scrobbler. It would be nice if I could somehow let Last.fm know that I’m currently listening to the music of another Last.fm user. It would be even nicer if I didn’t need a computer to do it. Suppose I could just use my mobile phone to send a message to Twitter. Something like:

@lastfm listening to @wordridden

or:

@lastfm scrobbling @wordridden

There would need to be some corresponding method of switching of the link-up. I haven’t really thought it through that far. I’m just jotting down this idea in case anyone out there wants to try using the respective APIs to give this a whirl.

No fooling

There are two problems with April fool’s day on the Web.

Firstly, there’s the curiously timeless nature of online publishing. Google has a habit of preserving everything we write in amber so that long after a joke has been published in the context of April 1st, it resurfaces in search results where it may the taken at face value.

Secondly, it becomes very difficult to separate “real” stories from the japes. Remember a few years back when Google launched their GMail service? Remember what day they launched it on? I recall quite a few people who refused to believe the veracity of the announcement.

With that in mind, here are some tidbits that are most definitely pranks:

  • GMail adds time-travel support using an e-flux capacitor to resolve issues of causality.
  • John Resig releases Class Query for developers who are sick and tired of brevity and simplicity. This one is only funny if you a total code nerd but if you are a total code nerd, it’s very funny indeed.
  • The Web Standards Project follow up their bookmark campaign with hyper-localised social tagging.
  • Moo announce the MightyCard.
  • The latest World of Warcraft character is the bard with damage effects like “epic solo” and “shoegazer”.
  • The BBC show flying penguins.
  • And finally, every single featured video on YouTube is a winner today.

These bits of news, on the other hand, are for real:

  • Joe launches Captioning Sucks in an attempt to bring sanity and standards to the worlds of film and television. Any garishness you may experience is intentional.
  • The good people over at Flickr have resurrected Game Neverending—the game that many years ago served as the genesis for Flickr itself (that’s why you’ll still the .gne extension to this day). The message announcing the resurrection is, of course, very much a joke.

There was one other announcement from Flickr but they managed to get it out right before the dreaded day of foolishness. The site now has a flawless import feature that has completely scrapped the password anti-pattern. Instead they’re using authentication APIs from GMail, Hotmail and Yahoo Mail (that last one is actually a bit of a cheat as Yahoo do not offer any export API for external services).

Needless to say, I’m over the moon about this (although Lachlan is less pleased). First Dopplr, now Flickr. And I’m ashamed to say that I didn’t even put Flickr in the running in the race to do the right thing. Consider me suitably chastised.

Tuesday, April 1st, 2008

Home of the Geotag Icon Project

An attempt to create a standardised icon for geotagged content, much like the standardised icon for RSS.

Life Before Death at the Wellcome Collection | Society | guardian.co.uk

A haunting series of portraits taken before and after the subjects' deaths.

Welcome to Game Neverending

Game Neverending is back. For real. Get nostalgic with this blast from the past.

World of Warcraft: Wrath of the Lich King

A new WOW hero class has been unveiled: the bard! "direct damage effects like "Epic Solo" that will rock foes into oblivion while powerful Indie debuffs such as "Tape Jam" and "Shoegazer" keep them in check."

Seed Conference | Chicago | 6 June 2008

The typography on this page is simply gorgeous. And the event looks good too.

Traces of Inspiration » Blog Archive » URL as UI

The importance of good URL design.

Radiohead/ Remix/ Nude

Ever wanted to remix a Radiohead song? Me neither. But for those who do, they now can.

Captioning Sucks!

Joe's latest project is deliberately garish.

New Initiative in Hyper-Localized Social Tagging - The Web Standards Project

The WaSP kicks it up a notch. Putting bookmarks in books was just the beginning. Now you can tag bad developers with the web standards equivalent of the scarlet letter.

John Resig - Classy Query

You have to be really, really geeky to find this funny. I find this funny.

Gmail: Google's approach to email

New from GMail: send email back in time. "Gmail utilizes an e-flux capacitor to resolve issues of causality." In all seriousness though, remember when GMail launched on April 1st, 2004 and everyone that it was a joke?

Flickr: Find your friends

Now this is how to do the "find your friends" trick. For GMail, Yahoo Mail, and Hotmail, Flickr never once asks for your password. Bravo!