Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Applications

Responsive Web Applications

If you'd like to see the accompanying talk, head over to http://video.kiberpipa.org/SU_Klemen_Slavic-Responsive_web_applications/ .


Klemen Slavič

December 14, 2011


  1. Responsive Web Applications Klemen Slavič http://about.me/klemen.slavic

  2. Basically ...

  3. http://www.flickr.com/photos/heathbrandon/3187207970/ Information.

  4. http://www.flickr.com/photos/deathtogutenberg/361664198/ We create it.

  5. http://www.flickr.com/photos/butchershopglasgow/5594308079/ We consume it.

  6. Across various media. http://www.flickr.com/photos/entropy1138/5282203331/

  7. It‘s interactive. http://www.flickr.com/photos/jbergen/1271176832/

  8. http://www.flickr.com/photos/mc/1602236114/ It‘s haptic.

  9. http://www.flickr.com/photos/just-an-idea/3750094/ It‘s responsive.

  10. http://hashemartworks.net/wp-content/uploads/2008/11/tablet-1-frontback.jpg It wasn‘t always like this, though.

  11. http://www.flickr.com/photos/wijkerslooth/4251533995/ Traditionally, it was always bound to a medium.

  12. http://www.flickr.com/photos/netphotography/2360185459/ But along came computers.

  13. http://www.flickr.com/photos/cstmweb/4348489567/ Information became coded, abstract.

  14. http://www.flickr.com/photos/bradandkathy/2404564885/ It became intangible.

  15. http://www.flickr.com/photos/jvk/1458010/ Reproduction was cheap, but lacking.

  16. http://forums.cgsociety.org/showthread.php?f=121&t=399499 Computers are catching up, though.

  17. http://www.flickr.com/photos/holmgren/1375283440/ But interaction was indirect, clunky.

  18. http://www.flickr.com/photos/34575118@N04/4240822343/ It still is.

  19. http://www.flickr.com/photos/steffenj/847762820/ What makes it so inaccessible?

  20. http://www.flickr.com/photos/yours-intuitively/4063292553/ We use all five senses to experience the world

    around us.
  21. http://www.flickr.com/photos/johnencinas/3928235670/ Devices can cater to sight and sound.

  22. http://www.flickr.com/photos/mrehan00/4530022593/ But there‘s a more important sense for interaction –

  23. http://www.flickr.com/photos/sehdeva/3426904301/ Obviously, we‘re ignoring taste and smell. (But frankly, we‘re

    glad those aren‘t part of the experience.)
  24. http://www.flickr.com/photos/monkeyballs/2197694839/ Touch is direct.

  25. http://www.flickr.com/photos/dcmetroblogger/4915501829/ Interaction becomes natural.

  26. http://www.flickr.com/photos/nasteeca/4395540224/ Not everything supports it, though.

  27. http://www.flickr.com/photos/wookieebyte/2477314947/ But why should we be creating baseline experiences for

  28. http://www.neatorama.com/2010/06/11/the-macgyver-fact-check/ Use whatever is available at the time.

  29. http://thewoodwhisperer.com/evolution-of-a-workshop/ Adapt. Evolve.

  30. http://thewoodwhisperer.com/evolution-of-a-workshop/ ... but beware of convenience traps.

  31. http://www.flickr.com/photos/jacobpellegren/383757210/ A touch does not a pointer make.

  32. Even though a tap triggers a click, it doesn‘t mean

    we should treat it as such.
  33. • A finger obscures the content • A touch isn‘t

    as precise as a pointer • Touches wiggle, mouse pointers don‘t (easy to mistake for a drag) • A mouse has a single pointer, but you can have multiple touches • A pointer is persistent, a touch is not Need reasons? Fine:
  34. There are numerous pitfalls associated with assuming a mouse+keyboard paradigm.

  35. • Menus with hover-triggered content • Gallery widgets that pause

    on hover • Using mouse drag events to navigate, interact • Using double clicks • Using right clicks • ... Need we go on? Le Gránde Fail
  36. http://www.flickr.com/photos/naiffer/2691471212/ Hands up: has this ever happened to you?

  37. http://artoftrolling.memebase.com/2011/10/05/sweet-prince-troll-ubuntu-will-miss-you/ We need to think differently.

  38. Too soon?

  39. ... aaaaanyways, moving on.

  40. Select item Left click Tap Hand/plane intersection Voice command We

    need to abstract interaction.
  41. http://www.inquirer.net/remembering-steve-jobs Abstraction helps our vocabulary.

  42. It avoids convenience traps by defining new events that are

    triggered by different primitive interactions.
  43. http://www.flickr.com/photos/mardis/4100051854/ We no longer think in terms of „clicks“

  44. http://www.flickr.com/photos/34228744@N07/3186833195/ ... but in terms of actions within our environment.

  45. http://www.paintinghere.com/canvas/why_so_serious_the_joker_28214.html But why all the fuss?

  46. http://futurefriend.ly Two words:

  47. Touch is not the only emerging interface.

  48. http://www.avclub.com/articles/kinect,47642/ Kinect shows a lot of promise.

  49. It provides a way to physically place yourself within the

    interface, indirectly.
  50. Not near it (mouse+keyboard), not on it (touch), but within

  51. Oh, and you can talk to it. (There‘s a Web

    Audio API on the way.)
  52. Seriously.

  53. Think about it.

  54. That‘s why it‘s so important that we‘re able to express

    actions as a series of interface events, regardless of the interaction.
  55. After that, we‘re free to add support for any future

    interaction model.
  56. • Ultra- and infrasound projectors for remote haptic feedback •

    Immersive holography • Natural language interfaces • Non-invasive neural interfaces • THE ! Just to name a few:
  57. Okay.

  58. So we‘re not there just yet.

  59. We‘re still missing browser support for most of these.

  60. Let‘s make use of the features that are available.

  61. • User touches a point on the screen • User

    lifts the finger after no more than 300ms and doesn‘t move it by more than 10px • If above condition holds: – we trigger a tap event and forward it the coordinates and target element • Else: – we do nothing Let‘s define a touch event – tap
  62. • User touches a point on the screen • User

    moves the finger by more than 10px in any direction and lifts the finger • Determine the direction (N, S, E, W), trigger a swipe event and forward it the direction, initial coordinates and length of the swipe A swipe is similar:
  63. • Determine which person is interacting • Place a plain

    parallel to the user‘s abdomen at about 2/3 arm‘s length in front of them • Determine intersection point(s) of skeleton with the plane to determine „touch“ points • Trigger intersection events for each intersection on each animation frame • ...[more steps here]... • Profit Working with spatial data is trickier:
  64. • Use the browser‘s Speech Input API to determine a

    command • Use prescribed grammar to match words to commands • Trigger events based on the chosen command on the active element Voice interaction is simpler:
  65. We can set up any number of these events based

    on primitive events. Even gestures.
  66. Demo time!

  67. Go fork and conquer. http://github.com/krofdrakula/i-o-hu