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

February 23, 2012 at 11:16 am by Ryan Grove | In Development, YUI Theater | 10 Comments

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

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

10 Comments »

RSS feed for comments on this post.

  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…

    Comment by Lars Gunther — February 23, 2012 #

  2. Awesome talk thanks so much.

    Comment by Adolfo Foronda — February 23, 2012 #

  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.

    Comment by Daniel Davis — February 24, 2012 #

  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

    Comment by Stephen Woods — February 24, 2012 #

  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.

    Comment by Leo Lanese — February 26, 2012 #

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

    Comment by Daniel Davis — February 26, 2012 #

  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.

    Comment by Daniel Davis — February 26, 2012 #

  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.

    Comment by richard — February 27, 2012 #

  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.

    Comment by Robert — February 28, 2012 #

  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.

    Comment by John Weis — March 2, 2012 #

Leave a comment

Note: Comments are moderated for first-timers. Spam deleted.

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Hosted by Yahoo!

Copyright © 2006-2012 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service

Powered by WordPress on Yahoo! Web Hosting.