YUI Theater — Stephen Woods: “Creating Responsive HTML5 Touch Interfaces” (24 min.)

By Ryan GroveFebruary 23rd, 2012

At the February 6, 2012 BayJax event at Yahoo!, Flickr Frontend Engineer Stephen Woods (@ysaw) shared his hard-won advice for building responsive touch-based interfaces using HTML5, CSS, and JavaScript. He also revealed how Star Trek: The Next Generation predicted the need for instant user feedback in a touch-based UI and how Tivo’s slow UI was made bearable by a simple “bloop” sound.

Links

10 Comments

  1. Just a few days after the web dev world erupted about the dangers of mono-culture, YUI puts up a video praising it.

    Sort of ruins everything else…

  2. Awesome talk thanks so much.

  3. As Lars said, saying we don’t have to worry about other browsers on mobile is not only contradictory to independent statistics (see PPK or StatCounter), it also goes against everything open standards advocates are pushing for.

    Just because you see e.g. Android or iDevice users in the room, doesn’t mean you’re looking at WebKit users.

  4. I don’t recall praising monoculture. The fact is the vast majority of mobile user agents ARE webkit.

    My talk was supposed to be practical, not idealistic. And I am talking about touch events:

    http://www.quirksmode.org/mobile/tableTouch.html

  5. Hi Stephen,

    I like the concept of immediate continuos feedback and how to use it as an improvement for user experience :)

    Nice talk, good work.

  6. The tables you linked to are out of date (2010). Opera Mobile and Fennec both have support for touch events.

  7. Didn’t mean to be over-critical, by the way. The information on transforms and matrices was very useful, as well as the “always give your users feedback” rule.

  8. @Stephen you mention “cleaning off” CSS transforms, didn’t you find this caused flickering? I’ve done similar things to the carousel you show and always ended up keeping my transforms on for this reason. Curious if you found a solution.

  9. This is a great video – great content as well. Can you share a little on how you captured and edited this? I love the speaker on the right and the “3d” presentation on the left.

  10. Thanks so much for your talk! Loved it… I’m currently working through a bunch of new problems that I haven’t encountered before and this really helped me.