I came across a situation recently where a JavaScript widget didn’t ‘work’ on the iPhone. It did technically work, but without knowing about two-fingered scrolling (and when you need to use it), it didn’t appear to work. So how do you differentiate the iPhone (and other touch based devices) from a regular browser?
Well, we all know object detection beats browser detection, but what object would you detect?

The issue in this case was with the Stylish Select jQuery pluggin. It replaces a standard drop-down with a nicer looking one. It is reasonably accessible as well, supporting keyboard use.

However, it creates a div with overflow of auto and a fixed height, which in desktop browsers creates a scroll bar. In the iPhone, it looks as though you can only select the ones that are initially visible, because there is no scroll bar.

In this case there is a nice fall-back: the select box that the JavaScript is replacing. The iPhone (and I assume other mobile browsers) show this in a system-native way.

So the question becomes how do you detect that a touch-based device is in use?

The solution came from this article on Detecting event support without browser sniffing, however, it does more than I was looking for, and wasn’t aimed at touch based detection.

I put together a little script that so far, seems to do what I’d like:

function isTouchDevice() {
   var el = document.createElement('div');
   el.setAttribute('ongesturestart', 'return;');
   if(typeof el.ongesturestart == "function"){
      return true;
   }else {
      return false
   }
}

Currently this script gives good results for:

• IE8 / Win (no event detected)
• FF 3.6 / Win (no)
• Chrome / Win (no)
• iPhone 4.0 (yes)

I originally picked ontouchmove as a fairly advanced touch event, but Google’s Chrome started firing for that event. I’ve moved to ongesturestart which works for now, but may also be used in Chrome later.

If you have another device or browser, please try the test page and let me know the results.

If you have an editable box with TinyMCE, and that box will appear on the website if it contains content, sometimes you can get a ‘blank’ box. When a user deletes content from the box, they might not delete everything in the box, leaving some blank HTML tags.

For example, if there was a list of links, and you use the mouse to select the list, and press delete, it can leave either <ul></ul>, or <ul><li></li></ul> depending on the browser.

In our CMS, when that went through to the front-end page the HTML content meant the box was displayed, but without visible content.

I messed around with some of the TinyMCE API events, ruling out onSaveContent and onSubmit.

The key event was onPostProcess, which allows you to run a script on the content before it is submitted.

Combine that with a little script from Stackoverflow to strip HTML from text with JavaScript, and you get:

tinyMCE.init({
   ... // other settings here
    setup : function(ed) {
    // If there is no text content, return nothing.
    //   NB: Image-only content would get swallowed.
      ed.onPostProcess.add(function(ed, o) {
            var text = "";
            var tmp = document.createElement("DIV");

            tmp.innerHTML = o.content;
            //console.debug("inner html=" + tmp.innerHTML);

            if (tmp.innerHTML) {
               text = tmp.textContent||tmp.innerText||"";
               text = text.replace(/\n/gi, "");
               text = text.replace(/\s/g, "");
               text = text.replace(/\t/g, "");
               //console.debug("if content, text=" + text);
            } else {
                text = "";
                //console.debug("else no content, and typeof =" + typeof(text));
            }
            if (text == "") {
                o.content = text;
                //console.debug("content set, possibly, get content = " + o.content);
            }

      });
   } // add comma here if there's another thing in the list
});

The only weakness I know of in that, is that something containing only an image but no text would return a blank box. I left the console logging in (but commented) if you’d like to see what happens though Firebug.

Free free to use this or to feedback any improvements below.

Joel Spolsky – Keynote

Joel’s keynote was on the theme of simplicity vs power, or rather, the third way.

I’m afraid that this is my interpretation entirely from memory, but essentially:

• A couple of fundamental assumptions are that users do not like to make decisions, and that just about every design decision should lead to the user being more likely to get laid.
• There has been a great upswing in simple interfaces, at least partially lead by 37signals. (Perhaps another contributory factor is the rise of internet applications? Services that can do one thing well.)
• However, some types of commercial applications (e.g. bug trackers) will need to cover the 80% of features that aren’t covered by these ‘simple’ applications. Alhtough 80% of people use 20% of the features, they are often different features. Otherwise you are cutting off too many people.
• Creating elegant code often takes more time and thought that simply typing out standard code. NB: Elegant was defined as doing things well, and making it look effortless.
• Creating elegant interfaces also takes more work, both in creating the UI and often more so in the coding behind it.
  A good example is the Amazon one-click. When you move form the (standard?) method of click, then confirmation screen (then rest of checkout process), you suddenly have more work to do. For example, queuing the order (in case they order more things), allowing undo within a certain time, making sure there’s a default address etc.
• Rather than not adding features to keep an interface simple, keep it simple by not forcing the user to make decisions. The interface should certainly start simple, but allow it to be extended, perhaps on a per client/site basis.

Joel’s assertions certainly match my experience with Content Management Systems, which are probably the hardest and least solved programming / interface problem. Whilst 37Signals have been very successful, I don’t see them tackling CMSs any time soon…)

Michael Sparks – Python

Michael essentially took us through the finer points of Python by demonstrating how you can create the Google-style spelling match function, in 21 lines of code (plus a few books worth of content in text files).

It was really good to see an expert use the Python interpreter well (including running into a couple of problems, and solving them). I’d never really understood how you use it for complex functions before, for example,  indentation matters in Python, and you put it in a command line?? Anyway, that explains the spaces being preferred to tabs thing, and it will certainly help in my dealings with Django. Hopefully Michael can post something about it soon, in the meantime the code is available.

Joel Spolsky – Fogbugz

We had plenty of Joel time today, this was his demo of Fogbugz, where it’s a disservice to describe it as bug-tracking software. It’s obviously modelled on Joel’s copious experience in developing software, and includes things like Bayesian driven email direction, and predicting launch times better than developers. I’m not sure it would work for us (juggling 15 web projects at the same time), but it will certainly make me wish for more next time I look at Trac or Bugzilla.

Reto Meir – Android

I have to admit, the technical side of mobile application development (rather than mobile web development) is still pretty intimidating for me, and doesn’t particularly float my boat. Reto also needs to either increase the font size in Eclispe, or use the ‘only when the cursor reaches the edge’ settings in OS X’s accessibility preferences.

From doing previous presentations I’ve learned the hard way to:

• practice it at 800×600 resolution,
• check it in 1024, and
• even if the projector supports more, keep it to 1024!

On the positive side, it was good to see some use of Google moderator. Not only does it make it easy to ask questions (and for people to vote up the best questions), Reto answered the top ones on the spot, and has since answered them all.

Remy Sharp – jQuery

Remy gave good talk on jQuery (presentation), something I’ve used quite a bit. It was great to include how to creat a plugin, and it explained a few things I’d seen around but didn’t understand. I liked Remy’s approach to the brief of using code,

The things that most interested me were:

• Having looking up “equality without type coersion” (the triple equals).
• jsbin.com looks like a very useful service.
• There’s a good IRC channel for getting help.
• How to add a plugin to jQuery.

Jeff Atwood – Stackoverflow

Jeff’s talk was less on code, and more the experiences around Stackoverflow, I can’t remember of it much specifically, but after listening to lots of podcasts it’s good to put a face to the voice!

Pekka Kosonen - Qt

Pekka’s presentation on Qt was intriguing, partly for the upfront honesty (tackling people’s scepticism about platforms from Nokia), and partly because of the possibilities of Qt.

Although Nokia was presenting about Qt, the platform itself is not originally from Nokia, in fact, it is designed to build cross-OS applications, desktop and mobile. Applications such as Skype and Google Earth have been built with it, so it seems that it can produce native looking applications.

It looks like you have to go whole-hog into Qt development, it’s an SDK, IDE and they may even have server-side compiling of code to for platforms you don’t have. The demo wasn’t incredibly convincing, but it does seem like a an option to investigate if you need to develop desktop/mobile applications across several platforms. See also getjar.

Phil Nash – iPhone

Phil’s presentation on iPhone development wasn’t quite what I expected, it took us through a short history of the language that iPhone development uses (Objective-C), before creating a little app from scratch. Phil’s dry sense of humour and occasionally cheesy slides helped make the first half more entertaining, especially as I wasn’t really target audience and haven’t quite got the different versions of C straight yet.

The outline of Objective C drew a few gasps: garbage collection? It seemed most of the audience are used to higher level languages, and Objective C seems like a step backwards.

However, the impression was improved a great deal once Phil opened up Xcode and put together a quick application. Phil was the only mobile developer who managed this. As well as the support of the IDE, emulation is obviously easier for the iPhone than Android or Qt, because you’re targeting a much more narrow range of devices.

Jon Skeet – Humanity: Epic Fail

The ‘phenomenal’ Jon Skeet presented a very funny look at why programming is generally hard, based on a rant he had recently about time zones. There isn’t much for me to say on this, but it’s worth checking out the presentation and audio on the Stackoverflow podcast soon.

Paul Biggar – How not to design a scripting language

I hadn’t really expected much of this talk, essentially what’s wrong with modern compilers, however, Paul’s enthusiasm really carried it.

Christian Heilmann – Yahoo! Developer Tools

For me the best was saved until last. I haven’t seen Christian talk on this before, and despite reading about Yahoo! pipes and YQL, I just hadn’t really groked it before.

It doesn’t really hit home until you see someone put an example together in front of you, but the upshot is that there are about a 100 APIs (everything from Amazon to Weather) that you don’t need to read.

You select a data source from the right of the console, adjust the ‘selector’, the YQL statement top left, and preview the results in the middle.

If the result is good, then copy the URL from the top right box, and use that with your backend (or ajax/ajaj), and hey-presto.
Example uses are:

• Showing all your disparate content on other sites in one place, for which Christian’s site is a prime example. It’s basically built with YQL, virtually all the content is from other sites! (Presentations, videos, books, blog articles etc.)
• YQLAutoTagger – automatic tag generation with a single line of JavaScript.
• Translate tweets.
• Create a set of Flickr photos from a particular geo-location.
• You can even scrape HTML for redisplay, narrowing the area using an xpath statement.

It uses a SQL like syntax to allow a great deal of granularity, both in terms of filtering things to get just the information you want, as well as using several input sources (URLs) at the same time.

I am not closing the YQL tab I have in Firefox until I’ve used it somewhere! I think this is the closest video on YQL I’ve seen that covers the same content.

You can run it as a program by installing the Validator SAC:

Validator S.A.C. (Stand Alone Complex) is a stand-alone, easy to install, version of the W3C’s HTML / XHTML Markup Validator for Mac OS X.

Even better, you can install it as a local ‘service’, essentially a web application running on Apache on your local machine. That means you can adjust the Web Developers Toolbar for Firefox to use you local version. In the ‘options’ of the toolbar, go to the ‘tools’ options and adjust the URL of the HTML validator.

It’s pretty straightforward to setup as a local website, especially if you use Apache locally on OSX. (My setup is a little more complex, but the principle is the same).

If you’ve adjusted your hosts file to include http://validator/, you just need to wrap the supplied file in a VirtualHost setting and setup your Apache config to use that.

This allows you to check local sites behind firewalls (or just on your own laptop), and to save the W3C some bandwidth, so I’d encourage standards aware developers using OSX to give this a go.

Keynote: The urban web, Steven Johnson

This was an interesting introduction to the topic, highlighting the social aspects of the story of understanding cholera outbreaks. Unfortunately I wasn’t set-up to make notes at the time, but from memory it centred around the story of John Snow. I’ve heard this before in terms of good information design, but this highlighted important aspects such as the “social hub” that was the local vicar.

The modern examples mostly came from his company, outside.in, including radar. Radar appears to be an aggregator of local info, like a Google News for local blogs and tweets.

I’m not sure how it works, although one method it employs appears to be language to identify location. For example, monitoring a twitter stream, it picks up a tweet about “Dizzy’s”, a restaurant (or similar) in Brooklyn. Relying on language for this sort of thing seems flawed, as there are far too many overlapping terms (how many Springfields in the US for example?). However, perhaps there’s more to it?

In general it did make me think that it would be good to have a geo attribute, like the lang attribute, to show where a section of content is relevant to a particular real world location. However, I’m not sure what the values should be? Lat-long (numerical), or specified locations, like “Brighton, UK”. There’s probably a microformat for it already, but would be nice to have it baked in properly as a fundamental aspect of HTML5.

Steven also showed a nice way of showing how much of a voice you have compared to other people, with percentage pie charts of posts shown over various map locations.

Playing the web, Aleks Krotoski

(This is more of a notes format, simply getting down what the speaker was saying, my comments are in parentheses. Aleks is a very animated, entertaining speaker, which you won’t get from these notes!)

Aleks starts off by wondering why there is little overlap between the games and web industries. (‘Games’ and ‘web’ are used for their respective industries from this point.)

She first knocks down graphics and story as things that matter (critically) in games. Play is what makes people ‘stick’.

(Side note: I’ve often thought that the fun definition of a “User Experience Consultant” should be: the urge to make verbs into abilities. E.g. usability, findability etc. In this case it would be playability. Not a new term, but it did remind me about this!)

She describes the term ‘Experience Economy’ as essentially a boring term for making things fun.

Control systems

The things game designers can use to increase playability:

1. Carrots. Give people more for contributing more. It could be points, character levels, collectables etc. The web does do this to some extent, often you give more (e.g. personal details) and get more out of a site.
2. Openness. As in, games that are open as you play them rather than on rails, with no exploration. (This reminded me of the “Zone of proximal development” where there is a level of difficulty that is helpful.)
3. Have an important end goal, something to get to, or achieve.

The web has has much greater community, or at least, potential community, but games developers have really started utilising communities, e.g. hiring community managers.

The web does have a few rallying points, e.g. digg.

From the community comes social value, out of the central thing (that the designers created), comes other output from the social community, e.g. characters / assets that people create and then can sell on ebay.

Personalisation causes investment from the person. This is relatively new in the web as a common feature.

There is a social urge to collect things, so far web developers tend to concentrate on points, but could be anything to challenge yourself. (I missed the example URL for this, it was a virtual badge-collection site that rewards users for doing things like not using google for 7 days with particular badges. Sounded like ‘peanod’ or something, does anyone know?)

There is very little focus within games dev on theory, they are gamers who create games. Thoroughly separate from HCI. It is a case where you can show that the process has worked without knowledge of the theory of why.

(The main thrust which doesn’t come through from the notes is that the games and web industries have a great deal to learn from each other.)

Questions

Is ‘Little big planet‘ a first step?

The guy from Sony (not media molecule), comes from a web background. But it seems few and far between that this happens. There are 5 major games companies in brighton, but hardly any people here at this web conference.

It’s got wifi (on a Nintendo DS I think?), why can’t I do more with it?

Brief History tour: The most innovative device was the Dreamcast, it was so far ahead of it’s time, only now are we seeing what it could have done, and seeing those things in the mainstream. Why not more integration? In early 2000, the Dreamcast was connected to the internet. You could create your own content, share it, play a multiplayer online games, and it also had VMU (Visual Memory Unit), part of the controller. This little device had a little screen which you could take out, about the size of (modern) mobile phone. You could play a pared down version of the game. E.g. Sonic, you could take it away and play a sub-game that then affected the main game. The game cube did something like this. We’ve still not really seen the realisation of these things.

Information around the Xbox 360 launch said you’d be able to connect the Xbox with other machines, e.g. iPods, Playstations etc. There are lots of cross-platform issues, but the potential is there.

What creates the divide? (Between the web and games industries)

They developed in two different ways. In the UK, the games industry developed out of a bedroom coder mentality. A small pocket.The Web industry attracted different type of people, as the connections/connectedness of the online sphere have always been there.

Now people really engage with the web, there should be more cross over.

The games industry has some unfortunate perceptions, e.g. games are childs playthings, and people generally don’t recognise the depth and breadth of what is going on.

Perhaps it’s a marketing issue?

(I couldn’t hear the question, but…) What about the barrier to do with open standards on web vs very proprietary practices in games.

I think that will change with more smaller developers using (perhaps open?) standard environments.

What about a negative feedback loop with games players becoming games designers. A lot of web practice is about designing for another audience that is not you.

There has been a lot of research recently in games industry, see the paper Chicks and Joysticks: An Exploration of Women and Gaming. Another perspective is the DS’s brain training, plus the marketing with the adverts of non-typical gamers (e.g. Nicole Kidman using the DS). The industry recognises the current audience (The average age of an Xbox gamer is 28), but we need to adapt or there will be a drop-off.In the web industry? I’m not sure, I’ll think about it and I might blog about it.

Leveraging Cognitive Bias in Social Design, Joshia Porter

This is about the merging of the web with social psychology.

Web designers need to add (social) psychology tools to their belt. But, those worlds haven’t collided yet.

A little experiment: which of these two restaurants would you choose? (95% choose second)

1st has physical barrier, and no one sitting down. The second has lots of people there, with a small queue.

Calls this the ‘bandwagon effect‘. Associated with sheep mentality. With little information available we tend to follow others. It’s one way (heuristic) we use to make decisions.

It’s a short-cut rather than doing the logical thing: gather all the needed information. Makes up for a lack of resource.

Sometimes there is ‘cognitive bias‘, and these are often predictable outcomes.

There is the Lake Wobegon effect (where every one thinks they are above average).
We all know the Self-serving bias, and the prediction bias (leads to underestimate work, part of the Focusing effect).

The main paper for this stuff is Judgment under Uncertainty: Heuristics and Biases, by Amos Tversky; Daniel Kahneman in 1974, (although there are plenty of easy links to the Wikipedia for this!).

Examples

(You could probably go through the List of cognitive biases and assign design patterns to them? Joshua makes a great start on this.)

For representational bias (couldn’t find a reference), uses Freshbooks happy users example. They show a ‘representative’ selection, showing the ones that resonate with their exact audience. Rather than stock photos, uses real (or at least realistic) ones.
(This seems more related to the bandwagon effect combined with Ingroup bias to me?)

Review of the day on yelp.com, the chosen users are always the ‘best’, people that do a lot on the site. Power users. By showing that, they show the desired behaviour. This should attract those people interested in doing the same, and perhaps put off people who aren’t.

Loss aversion, e.g. Few people would take a 50% chance of loosing / gaining £100. At 3:1, there is a much better response.

“Losses loom larger than gains”.
Therefore make sure people gain before they lose something, e.g. personal data. Netvibes frame the registration as “login to save your page.” I.e. not loosing information.

OpenID feature, framed as ‘don’t forget another password’.
Rather than call something ‘save time, create an account’, frame as not loosing something.
E.g. “don’t lose the ability to track your package.”

Ownership bias: people value things more when they fell a sense of ownership.
(I think this is a weak example based on copy: youtube, my hotel etc. Flickr has lots of “you”s. I’m not convinced about that as the whole you/me thing can cause usability issues, but it could certainly apply to keeping people on sites when they have created / uploaded something, which is covered later.)

Sign up problem effect (the 9x effect): People value current software about 3 times as much as a theoretical real value. Software makers tend to overvalue their products by about 3 times. Therefore a product has to be 9 times better to actually convert people.
From ‘Eager Sellers and Stony Buyers‘.

Websites now can get you engaged and creating something before asking for any sign up. This creates an instant feeling of ownership.

Geni gets you started very quickly, just three bits of information and you have the start of a family tree that you can share.

Freshbooks uses every sign-up tactic possible:

• bandwagon (thousands of new users)
• features and benefits
• why it’s better than you current product
• they explain what it is immediately
• provides a telephone number
• shows where freshbooks is used (with a world map)
• shows feedback
• shows more happy users with quotes
• has a tour
• highlights free registration

Questions

Isn’t this evil?

Absolutely, that’s a great question. Depends on business ethics really. Trying to provide a win-win. If you provide a better solution, your making the world a better place. However, getting into psychology is what casinos do, e.g. people still sign up for cards etc.

Even when we are aware of cognitive bias, we are still susceptible (see Blind spot bias).

Regarding the e-commerce checkout without an account signup, where was the stat from?

A major US retailer gained 10-20% from allowing people to checkout without signing up, but I can’t name names.

What doesn’t work internationally?

I have no idea, great question.

(Comment from the audience) Regarding International applicability, things like youtube/myspace are less relevant to asian societies than western societies.

Great point, now you mention it, it’s mostly about strength of bias in different societies. It will vary.

Can you reconcile Freshbooks Direct Marketing style approach, vs slide, which is less ‘full on’? Is there a heuristic for when you’ve gone too far?

There is a danger of trying to automate too much, if people don’t know what’s going on, there could be an issue. It’s a very contextual question, each case is different.

In the workshop yesterday, we mentioned that some sites start you instantly, some don’t. There is a trade-off where a screen describing what’s going on could be more important.

What most designers don’t think about is the behaviour change that happens when you use a new bit of software. Habits and behaviour change can be huge, so you want to minimise that.

I read that google was so successful because you didn’t have to change your behaviour. But another site can copy that…

Designing for interaction, Daniel Burka

Daniel is Creative director of Digg, and co-founder of Pownce.

Makes point around the effects that large crowds (e.g. for baseball), and the infrastructure around it. That’s what we are doing, building the infrastructure to allow people to do similar things.

Challenges for social design

Challenge 1: Getting signups.

Encouraging people to participate.

Percentage of people that ‘view’ is much greater than participants. Need to increase benefit, go beyond altruistic motivations. Tap into self-interest.

Therefore, in digg they’ve added a recommendation engine. It takes your activity (digging, burying), compares it to others, and makes recommendations based on that. The more you tell the system, the better it can be.

There might be 16000 stories in 24 hours, so boiling it down to the dozen you’re interested in is tricky. Therefore this recommendation (personalisation) is very useful. The more you do, the better it gets, and the messages on the site reflect this.

Reduce barrier to entry. Currently Digg pops-up a dialogue when you need to login. The next version will allow you to login via other social sites, like Facebook. Put those details on, and it takes the details from there.

Let people Dip a toe in the water. Get going quickly, get invested quickly.
Geni (overlapping with previous pres), is possibly the best of it’s kind.
They show you what it is, you only have to put in 3 things, and you are started.
Once you get to the next step, you’ve got something already.

Challenge 2: Encouraging positive behaviours.

Personal profiles, gives you sense of trust, and creates trackable connections.
Silverorange intranet was something I was involved in many years ago, uses avatars, and this makes it quite emotional for the users.

Last.fm, mixes info from user (name, sites like tumblelog), also your music taste, recently listened to. The digg profile page does this as well, you don’t have to do anything beyond normal usage to keep it up to date.
In pownce, we link to other profiles. Uses info for other sites.

Focus on tension points. Copy and design can go a long way.
If a particular place in the site is a tension point, focus on that. Getsatisfaction has a good interface for this, where you can show how you feel about something when adding a comment. The reason for being on the site is probably negative, in GS, they have the faces to show emotional state.
Makes it explicit, “dorky as hell”, but it works. Simple to do, but has a big effect.

Avoid negative competition. Kind of the hill contests don’t work. The system on Digg listed the users by how many stories got to the homepage. Self-fulfilling prophecy, and new users couldn’t get on the list. The system encouraged bad behaviour, people tried to game it. With critical mass, the feature went from encouraging to negative.

Challenge 3: Allow for flexible participation.

Allow for niche, allow for small participation, allow for huge contributions, it’s a difficult challenge and no one has cracked it. We need to adapt to different data, volume and frequency.

E.g. use benjamin roethlisberger, who has a really long last name. Uses him as the example guy in designs. Chemists use ‘unobtainium’, which can be anything.

Designers do the same, enter just the right data, perfectly align things etc.
Make sure you enter silly data, use stuff from a myspace profiles etc. It’ll be more realistic.

Flow, amount of stuff going in. Facebook is quite good at dealing with this.
It tries to determine what you think is interesting. However, you’re never sure if you’re friends receive things, as they may not see it in their feed. A preferences pain like facebook uses is a bit of a crutch, but I’m not sure what the best solution is.

Follow trails, paving the cow paths.

Don’t be afraid to adapt to your users.

Pownce thought files would be biggest thing, but actually links was the biggest thing, by far.

Then adapted by sucking in video to display directly, and even created oEmbed to enable that more easily.

The comment system has evolved greatly, even used to have threaded comments as they thought Digg was big enough, and because people started using the @notication to reply to other people. Pownce has smaller conversations, and they concluded that it wasn’t useful there.

Questions

Question on progressive registration, is that good thing?

Can be strange, you can end up with quasi accounts. Not very conformable with that, prefer the linkedin style “you’re 30% complete”.

Do you have release cycles?

We used to do changes on the spot, now we have a roughly 30 day cycle. Wouldn’t want to loose the advantage of making small adjustments quickly.

Do you do user testing?

Mark Trammle can give you the in depth answer. However, we’re getting better at it, we used to do quick and dirty, partly task-analysis testing.

Now we do focus group testing at start of project, then do user testing with paper prototypes or comps, then do task based testing towards the end.

Every time we just do a little bit, it’s been worth it, finding obvious problems that hadn’t been that obvious to us before.

Social network portability, Tantek Çelik

I didn’t takes notes on Tantek’s, he’s always very good at doing comprehensive presentations and publishing them (the link is in the heading).

Designing for the coral reef, Matt Jones and Matt Biddulph

Will do an experiment, download ‘neo-readder’, for iPhones, N series Nokia phones and others.

Yay: not invented here! Something of a Dopplr motto.

What we do with computers in general: We make models, e.g. spreadsheets, and manipulate things to see how we make things better.

(Shows model of all space time!) notes it may change next week with the LHC.

Dopplr is a “social physics engine”, a piece of software that underlines the physics of the world, how things behave. It’s kind of a middleware as a website.

Shows a graph of enzymes showing the increased interaction due to the catalyst, Dopplr intends to be something that increases the effect of the parts.

Show a picture of Jon Postel, famous for his be conservative in what you send, be liberal in what you receive, something they take to heart.

Coral reef as a metaphor: Dave Winer made this comparison initially, and they show some imaginary outlining it as both an infrastructure and an animal.

From the coral reef diagram, we are tropic level 2!

Web 2.0: It’s an arc of history, with connected computers. In the early days people used mainframes with time sharing. You would get economies of scale, and the individuals benefit.

Then we got into the personal computing era.

Then with sites like Flickr, it widens out again. With the internet, and the data oriented uses of it, Flickr is a mainframe, and using the economies of scale.

See also Tom Coate’s, native to the web of data.

We design for other sites, re-use of data. Sites that open up, are themselves benefiting.
Matt Webb: Your web service is a finite state machine that operates on your users.

Michal Migurski. Doing stuff with maps and lots of data. They started wtih google maps. But started creating open source map frameworks, e.g. modest maps, mapnic.

“Slippy maps”, like Google’s, are more like games, where you can slip through. They divide the world into discrete chunks, then stream them. It’s like looking at a blue whale through a letter box.

From a game design article, they make valiant efforts to avoid landing screens. This is a lot like web 2.0 stuff, where you try and stream things in as you go along. There are a lots of places on Dopplr where we use that.

The long zoom, designing a distributed interwoven identity.
The genius of a coke bottle is that if it smashes into a thousand pieces you still know what it is. Because details are so hard to get right, they are hard to duplicate.
Ideas aren’t going to win, it’s going to be the execution, the details.

Dopplr was an idea, and then they later realised the scope of what we could do technically.

Another word: delighter, a word from the W hotels in new york, where you put something into their experience (in their room). If you go in and there’s a rubber duck, it’s an “eh” moment. If, on your second day, after shopping and being knackered, and you find a rubber duck, it’s a delightful moment.

In Dopplr, the colours change based on your location. It takes ages, people tend to notice after a month or so. Then you notice it in the favicon!

We wanted to put in data toys, e.g. delighters. Personal velocity works out how far you’ve travelled in a year, and works out how far you’ve travelled in a year. Turned them into things, we ‘equivelised’ (TM) these into an animal. We tried animals, it took a while to work out how fast animals move (Wikipedia isn’t that great for this sort of query!).

The fastest person on dopplr is going the speed of a whippet, but many are very slow. The nasa transporter and a glacier were good equivalents. We have the fail snail, a fail whale equivalent we hope you never see.

Building distributed interwoven system

In Dopplr, as well as the cache, it’s very important to use asynchronous services.
There are many services surrounding central Dopplr, and then the 3rd parties are outside of that.

You need to be playing with asynchronous systems now, Beanstalkd, Apache Caramel. These systems move at different speeds, you need to be flexible and allow for that.

Jeremy Keith showed the chain reaction of updating fire eagle, then Dopplr, Pownce etc.

Shows a diagram of the current schema around other sites such as friendfeed and facebook.

Dopplr is an example of a site that can be successful without people visiting it.
There is a lot to be gained by sending people away from your site, and Google has demonstrated that this isn’t always a business problem.

However, it can be a bit like choosing hi-fi separates, where you try and optimise the overall by using different pieces. It can get too complicated!

They have open sourced some of the routines, like social network imports, search github for Dopplr. (I couldn’t find anything through github’s search, using google I found Identity matcher, Matt’s profile may be better.)

Social network subscription will be next, so things automatically update across sites.

The big challenge is the interactions with the user. Dopplr is careful to be contextual, we won’t automatically import things etc.
Your Linkiedin set of people is not the same as you network on facebook. (This is an important point, it will have to be quite )

We added public profile support a while back, and have been adding more and more toys, e.g. personal velocity. Coded it to be embedded as a blog badge etc. They are open social applications. So if another site supports Open Social they can embed it. Uncoordinated collaboration.

Twitter: You can send messages to Dopplr through that, or email about it, and then it updates dopplr.

It’s an announcement, an instruction to other things.
However, it does depend on language parsing. We’ve built up the top 1000 destinations, but also had to build a ‘stop list’ of the common words in emails that are also town names, e.g. conference.

Just released groups, which get quite a few features of the individual pages. For example, the Dconstruct goup.
Even a group carbon footprint calculator, which should be popular for CSR.

It used to be that you could only get anything once logged in.
Just done “share this trip”, you can get a guest pass URL to share with people to access that trip only.
As a non-user, you get a small view.

Experiment: Share a trip, showed a barcode, but unfortunately no ones phone could get it.

<rant>

Merlin Mann on the case for a pause button: against the fake follow fucntion on friendfeed.

The fake friend function on friendfeed may be very clever, but the fact that there are fake friends shows a problem. Matt talks about the pause button on social sites (see the Merlin Mann article).

My take: friending considered harmful. We are tying ourselves in knots because of the language. Using the word friend makes it necessary to contort yourself.
Don’t use friends, talk about the actions, trust etc, not friends.
Plausible deniability of friendfeed makes you jump through a lot of hoops.
Shows pic of US politician with a shotgun.

The System Of The World,
Jeremy Keith

This I didn’t even try and take notes about. This was less a presentation and much more of a performance, the presentation and MP3 will be available soon, the text is available now.

Bob Easton has a useful test case page, with which I tried in everything I had to hand:

• Firefox 3 with zoom, and regular text-size changes.
• Safari 3 with text-size changes.
• IE 6 & 7.
• Opera 9.5.
• JAWs with IE7.
• Windows Eyes with IE7.
• VoiceOver 2.0 with Safari.

The image replacement techniques were generally fine with a couple of small bugs, most of which don’t appear on Mezzoblue list. Having them as links seems to be problem, and increased font size does seem to be an issue for the Gilder/Levin method unless you start with a small text size.

Problem

When I got to the sIFR method (scalable Inman Flash Replacement), the Windows based screen readers read out the heading twice. I also checked on the official example page as well, just to be sure it wasn’t an old example.

Things may have changes since the sIFR method was introduced, but now most Windows based screen readers (i.e. not VoiceOver) are quite happy to read out the Flash. You get something like:

Flash movie start.
Heading level 3, scalable Inman Flash Replacement.
Flash movie end.
Heading level 3, scalable Inman Flash Replacement.

Solution?

There are two broad ways around it:

1. Hide the Flash content from screen readers.
2. Hide the ‘hidden’ content from screen readers.

I did try (and succeed) in creating an example that hides the actual text from the screen reader, but that’s probably the wrong way to go.

Given that there are still quite a few user-agents (e.g. VoiceOver) that don’t cope with Flash, it would be better to leave the text as available as it is, and make the Flash inaccessible. I assume setting wmode to transparent would do that, wouldn’t it?

In a recent test with Internet Explorer’s conditional comments, some of the more complex operators didn’t seem to work. For example, trying to target IE 6 and 7 defensively, this ‘and’ operator should work:

<!--[if (gte IE 6)&(lt IE 8)]>
    [import this style sheet]
<![endif]––>

However, that didn’t seem to work when testing in virtual machines, only the first part did. It was the same for the ‘or’ version as well, it just counted as greater than or equal to Internet Explorer 6.

Since we can’t move CSS based conditional comments into the CSS, what did work in our testing was this slightly inelegant nested version:

<!--[if lt IE 8]>
    <![if gte IE 6]>
        [import this stylesheet.]
    <![endif]>
<![endif]––>

Can anyone else replicate this? I’ve a quick test page to see if you can point a 5.5 / 6 / 7 / 8 IE browser at it.

The cheat sheet is from seomoz.org, and as a fan of cheat sheets in general, I immediately downloaded it. Some of the advice directly contributes to an accessible site (which is something many have noted before), but a couple of items will impact on the experience for people using particular technologies.

The good (for accessibility)

Much of the advice is also good for accessibility. For example, keeping the number of links on a page to under 100 can help not scare screen reader users, redirects should be done server-side, and site URLs should be readable and consistent.

The syntax of the page title is recommended as Keyword < Category | Website title, which is pretty close to what we recommend. (We tend to put the category / section at the end, as usage in browser bookmarks, tabs and history means that the second most important information is the site.)

The Common Robot Traps tend to align closely with accessibility as well, where frames, forms and sessions are highlighted as potential issues.

It also highlights the use of the sitemap XML file, which would be a useful thing for access technologies to pick up on and use as a navigation mechanism. It would allow things like listing recently changed pages (if the site doesn’t itself), and the importance that the site places on particular sections.

The conflicting

Whilst the advice on title (elements), headings and bold/strong are good accessibility wise, a couple of the recommendations do conflict. The main thing is that the attribute use suggested does not seem to help people:

• Stuffing keywords into alt text is unlikely to be a valid description of an image.
• Adding titles to text links (especially if they are just keywords) has little meaning to people, and is likely to get in the way for people using screen magnifiers.
• Using keywords as link text might give you an indication of the destination, but that isn’t the advice I would want to be taken.

For link text, I generally advise that it should match the main heading of the target page, which I believe aligns with SEO fairly well, alhtough I guess it depends on whether keywords are used.

As an SEO specific cheatsheet, it is doing what it is supposed to. However, I wouldn’t give it to a developer or content author without the caveat that keywords should be included where applicable, that is not the purpose of those attributes. (And just skip the title attribute on text links.)

One of the new features is the ability to automatically create a gallery within a post of all the picture uploaded to that post. I wasn’t very happy with the code output for galleries, so I took it apart and tried to improve it.

Current process

To see how it works now, I uploaded a few photos, and included titles, captions, and descriptions in a way that I could see how they came out. I tend to have lots of windsurfing pictures lying around, so I picked half a dozen from an event last year to test with.

This is what you get after selecting a few files.

Once in, you can add the alternative text, a title, and longer description.

Inserting a single image into post

The code produced by simply inserting an image into the post is:

<p><a href="/path/_b5m1617-01.jpg">
<img class="alignleft size-thumbnail wp-image-289"
title="Title - Formula sailor speeding across the course."
src="/path/_b5m1617-01-150x150.jpg"
alt="Caption - Joe Bloggs"
width="150" height="150" />
</a></p>

Not bad, the title is added as a title, the ‘caption’ is the alternative text. I’m not sure if the standard use would need a title and caption, why not just use ‘title’ and use that as the alt? (As mentioned in the images part of my WYSIWYG spec.) Still, it’s a nice implementation of having a longer description, as it creates a page for each item.

Adding a gallery

Adding a gallery is pretty easy: press the button. It doesn’t add in the pictures into the editor, it simply adds a bit of text for gallery (in square brackets). The advantage to this approach is that how galleries are dealt with from a code point of view is handled when the page is rendered in PHP, rather than hard-coded by the TinyMCE editor.

However, the code when previewing the page is not what I had hoped for:

<style type='text/css'>
.gallery {
margin: auto;
}
.gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;			}
.gallery img {
border: 2px solid #cfcfcf;
}
.gallery-caption {
margin-left: 0;
}
</style>

<p>	<!-- see gallery_shortcode() in wp-includes/media.php --></p>
<div class='gallery'>
<dl class='gallery-item'>
<dt class='gallery-icon'>
<a href='path/_b5m1617-01/'
title='Title - Formula sailor speeding across the course.'>
<img src="path/_b5m1617-01-150x150.jpg" width="150"
height="150" class="attachment-thumbnail" /></a>
</dt>
<dd class='gallery-caption'>
Caption - Joe Bloggs
</dd>
</dl>
<dl class='gallery-item'>
<dt class='gallery-icon'>
<a href='path/_b5m1622-01/'
title='_b5m1622-01'><img
src="path/_b5m1622-01-150x150.jpg"
width="150" height="150"
class="attachment-thumbnail" /></a>
</dt>
</dl>
<!-- more lists for for each picture -->

<p><br style="clear: both" /><br />
<br style='clear: both;' >
</div>

Ok, so the main problems here are:

• Inline styling embeded into the page content.
• Invalid HTML. Open paragraphs tags without closing paragraph tags.
• Classitus, with each item being given a class, rather than using inheritance. (It is fair enough to put a div with a class around it, but it should just be plain HTML under that.)
• No alternative text on the image.
• Each item is created with a list, a single item in each definition list. (A definition list is a slight stretch, but it would be ok if it was one list.)

It looks ok in my theme:

But I was unhappy enough with the code to start looking at how to change it.

Altering the Gallery code

The code itself gave me directions as to where to look, see gallery_shortcode() in wp-includes/media.php. This shows:

// Allow plugins/themes to override the default gallery template.
$output = apply_filters('post_gallery', '', $attr);

I looked into writing a pluggin that used a filter to override this, but either I just didn’t get it (very possible, I’m not a programmer) or the gallery aspect is too new to be documented yet. Also, my understanding of the filters is that it changes the output, but I also want to include something that is missing – alt text.

I copied across the entire function, and two others that it relies on, into a plugin that overrides the shortcodes function set for the gallery.

I cut out the style tags, and adjusted it so the same gallery outputs this:

<ul class='gallery'>
<li><a href='path/_b5m1617-01.jpg'>
<img src="path/_b5m1617-01-150x150.jpg"
width="150" height="150"
alt="Caption - Joe Bloggs" />
</a></li>
<li><a href='path/_b5m1622-01.jpg'>
<img src="path/_b5m1622-01-150x150.jpg"
width="150" height="150"
alt="" /></a></li>
</ul>
<p><br class='cl' /></p>

It takes a little styling in your own CSS, but this is much better, more basic code. It looks pretty much the same, but it will drop to two columns if you are on a smaller screen.

If I could work out how, I would make it so that the title is added within each list item, so you would have:

<li>
<a><img></a>
<p>Title</p>
</li>

Anyway, if it is of use to you, the extension I created to do this is available: Gallery code clearner plugin. I’m not going to try and put it on WordPress.org, I’ll be submitting some bugs so that hopefully this can be changed in WordPress.

Other little bugs

Whilst digging around in 2.5, I did find a couple of other bugs:

• The edit the URL (permalink) aspect is much better than ‘page slug’, but when you click ‘save’ next to it, you also have to know to save the post as well, otherwise it doesn’t take effect.
• Titles are added to text navigation, for example, on the category links. This is somewhere between annoying (for regular users), and positively disruptive to people using screen magnifiers.
• When adding images, it adds the domain name, I would rather it used an absolute link without the domain name. E.g. /path/to/image.jpg rather than http://domain/path/to/image.jpg.

Update:

• I wrote up the changes I’d like to see.
• I submitted a bug about adding options for galleries in WordPress settings.
• I seconded this bug about lack of alt text and only using one short-description field in the interface.
• I commented on this bug about how galleries are displayed, disagreeing with the use of multiple lists of 1.
• There is another pluggin for a similar purpose which appears to make the addition of a lightbox easier (although I don’t think it adds alt text).

EM based layouts becoming more popular?

Recently Dan Cederholm released his new layout ‘gridlasticness‘, an EM based layout that expands with your font-size choice.

I’ve looked at accessible layouts before, and bemoaned the fact that elastic layouts are mis-named. My main point was that font-based layouts will cause issues for people with visual impairments. When usability testing with people at RNIB centers, a fairly standard setup was an 800 or 1024 width screen, and large fonts.

That means lots of horizontal scrolling. In usability testing I’ve seen people get really frustrated with horizontal scrolling. Or when they don’t notice the scrolling, frustrated with trying to do things that should be easy, and are easy if you can see the right side of the screen!

This part of Dan’s post worries me:

Understand that when building an already-wide layout, it’ll get really wide, really fast. That’s OK. Wide is the new drop shadow.

If you’re someone that often needs to adjust your font-size, you’d be encouraged to tick the “ignore site’s font sizes” setting in IE (or use larger sizing in your prefered browser), and you would immediately get substantial horizontal scrolling:

I’m not singling out Dan here, font-based layouts are popping up in quite a few places, such as the new Odeon site. He just happened to draw my attention to it and mention the fashion aspect.

Now, I can understand giving a greater weight towards design aspects, and maintaining the grid (although I wouldn’t do the same). However, I find the timing curious, as these changes seem likely to be obsolete soon.

Browser zooming coming of age

Firefox 3 has a full zoom (rather than text-zoom), and you get pretty much the same effect as the EM based layout. Except that the browser zoom is often better, as (unless it’s a font-based layout), it can try and fit the page to the viewport.

In a very little testing, Opera’s version still seems more effective with the fit-to-width option enabled, and of course IE7′s trails behind with it’s linear-only zoom. (Side prediction: I suspect that IE8′s zoom will be better, but not when using IE7′s rendering.)

The bottom line is, that when these browsers are the mainstream, the differences between pixel and font-sizing becomes academic. Of course, I still find sizing layouts based on the viewport more robust over font or pixels methods, but when browser zooming is standard it will be more difficult to argue.

Ironically Simplebits old design using percentages works much better with zooming that fits-to width. What’s the big deal with font-based layouts, what have I missed?