Skip navigation

It hasn’t escaped our attention that the Subsume alpha makes somewhat heavy use of “onmouse” events and cursor changes, just like many pages use them along with CSS a:hover styles. The iPhone challenges those particular Web 2.0 conventions, though, because it is a device that not only adds support for another pointer, but at the same time eliminates them as interface objects. That means we not only have to revamp our game interface a bit, but you should fully expect to see many other regular sites reduce the prevalence of navigation that relies on the movement of a single mouse (assuming the iPhone takes off at all, of course).

The initial misstep on our part is easy to explain, since we’re initially just developing Subsume as a regular web page. In that environment it is easy to get caught up in thinking how great it would be to make a sound and highlight when a valid square gets the user’s attention. But the user doesn’t get to express their attention with the iPhone (or any of the upcoming multi-touch technology, it seems). They only get to express their immediate action. That means we either don’t squeak at all for valid moves, or we have to proactively show them as click targets. Since the game rules are probably new to most people, we’ve decided that showing is better than not showing at this stage.

I find it rather interesting that with all the hype surrounding the iPhone that no other people are talking about these sorts of things. It’s great that it comes with an able browser, but the iPhone also challenges some basic assumptions about what Web 2.0 can do. It is rather disappointing that all the techno-pundits are missing some of the real meaning behind the bullet point of multi-touch. Just another value-added insight you get by caring about our silly little game. 🙂

Update: It looks like this entry got a link in from Slashdot, and the discussion is a bit surreal! It’s probably there, for better or worse, because of all the iPhone hype, but I find it hard to see anything pro-iPhone about what I wrote above or what was in that Slashdot story. What I wrote was just a note that there is an intersection of somewhat discordant technologies at this particular point in time. No, touch screens aren’t new, but the iPhone (which was just a timely announcement that drove our interest in developing a game) represents one of the first mass market devices that use it for browsing the “regular” web at a time when the web is seeing an explosion of interactive apps, and especially when Jobs said that Web 2.0 was the way to write iPhone apps. It may be a bit of a non-story, but those of you who do or will use touch screens will have no control over how a site implements that interactivity. Maybe it’s just that we’re not very bright, but even we missed it at the beginning despite trying to target the iPhone. It seems reasonable to wonder what kind of impact that will have on the iPhone browsing experience, and touch-based browsing in general.



  1. “I find it rather interesting that with all the hype surrounding the iPhone that no other people are talking about these sorts of things.”

    What’s funny is that Steve Jobs himself, on stage, in front of thousands of witnesses, noted that hover effects won’t work….

  2. I must have missed that; do you have a link to the video on Apple’s site where that happens? Still, even if Steve mentioned it in passing, it hasn’t received very much attention by anyone else. Just like I can’t recall Steve saying anything about it, I can’t recall any mention in the hundreds (or thousands) of news stories that have covered the iPhone.

  3. Assuming the use of a mouse has long been recognised as a bad idea, in that it discriminates against those unable to use one. The W3C’s WCAG 1.0 points out that “the user may interact with the user agent or document with a preferred input (or output) device — mouse, keyboard, voice, head wand, or other.” Hopefully interfaces such as the iPhone’s will make web developers more aware of the need to make content accessible via many different modes of interaction.

  4. I’ve got an article I wrote last week regarding development and interaction considerations for the iPhone.

    Hover interactions are gotchas, and also that the user has the choice if she wants to be viewing in landscape or portrait mode and the site should degrade properly for both.

    I’ve also got a trivial little PHP function on there that sniffs user agent, because I believe we should reserve the media=”mobile” for other, dumber devices to use that are closer to a WAP browser.

  5. @treyharrell

    The landscape/portrait is a really interesting issue when combined with what looks like a lack of scroll bars. For the purposes of the game, we tried to take advantage of the mode changes by using them to show/hide extra player info, but I don’t know what it’ll mean for regular pages. In the Apple videos I’ve seen, pages appear to be rendered by some method at their “largest” size, and you’d flick/zoom around using the iPhone screen as a kind of portal view on the page. I have no idea what that is going to mean for elements that are sized relatively. What does it mean to say something has 50% width when there is no window to size it relative to? I also wonder how things like CSS position:fixed is going to get handled. We can only wait and see on those issues, I guess, but taking a closer look at how mousing around is handled is something a web designer could look at before the 29th.

  6. I think that based on the specs that were leaked, the browser reports that it’s a 480px width, which could screw up a lot of assumptions based on getting apps to scale to 100% in portrait view.

    I’ve decided that I’m going to develop a second CSS layout for my site (done with the shameless plugs), but not launch it until I’ve had a chance to test with the real deal. iPhoney is cool, but between the scrollbars and the fact that it allows rollovers, Flash and other stuff to load, it’s not much use unless you’re just testing user-agent redirection.

    I’m also what javascript hooks are available into the browser… not like you can test for mouse position, window position, hover, release, or a ton of other shortcuts web dev types use to make designs work (or quiet client demands, as the case is usually).

    I’ll definitely be running the browser and mail through a serious torture test next week, from a dev perspective.

  7. Perhaps a safari browser plugin could better emulate a mouse for such sites. Touching with one finger could emulate a mouse hover and holding with the first while touching with a second finger could emulate a click.

  8. @JebusWankel

    That gets to the heart of web app problems. The site is not in control of the browser, and the iPhone in particular seems very locked down and unlikely to allow plugins. Neither does the user control the site, so it ultimately falls on the site designer to keep interface changes in mind. It’s not just an iPhone/Safari issue, either. As I said, touch screens aren’t new, but I think the iPhone has set the stage for them to become more popular than ever, so it’s generally a good idea to be mindful that the long-familiar mouse pointer is being depreciated.

4 Trackbacks/Pingbacks

  1. By Top Posts « on 23 Jun 2007 at 11:58 pm

    […] Less reaching out and more touching It hasn’t escaped our attention that the Subsume alpha makes somewhat heavy use of “onmouse” events […] […]

  2. […] have thought that the advent of a finger control interface would spark so much debate? Others have debated at length on the implications of finger browsing, but the main conclusions may be summarized as […]

  3. […] by the iPhone release alone. Even now we’re just starting to see scattered reports, just like we expected, of some Web 2.0 techniques not quite working on the […]

  4. […] after reading this "realisation". If you’ll recall, it’s pretty much the same iPhone touch interface musing I wrote back in 2007. It’s nice to see some people finally catching up with the rest of us, […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: