Successfully reported this slideshow.
Your SlideShare is downloading. ×

HTML5 Touch Interfaces: SXSW extended version.

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

HTML5 Touch Interfaces: SXSW extended version.

  1. 1. Creating Responsive HTML5 Touch Interfaces Stephen Woods Sunday, March 11, 12
  2. 2. Stephen Woods Front End Engineer Flickr Sunday, March 11, 12
  3. 3. Sunday, March 11, 12
  4. 4. On the desktop we worry about browsers -moz-transform:rotate(-270deg); -moz-transform-origin: bottom left; -webkit-transform: rotate(-270deg); -webkit-transform-origin: bottom left; -o-transform: rotate(-270deg); -o-transform-origin: bottom left; filter:progid:DXImageTransform.Microsoft .BasicImage(rotation=1); Sunday, March 11, 12
  5. 5. On mobile we worry about devices. Sunday, March 11, 12
  6. 6. Wait! Did you say they all run webkit? Sunday, March 11, 12
  7. 7. Wait! Did you say they all run webkit? Sunday, March 11, 12
  8. 8. Wait! Did you say they all run webkit? Sunday, March 11, 12 X
  9. 9. On mobile we worry about devices. Sunday, March 11, 12
  10. 10. Screen Sizes Media Queries, Break points, liquid layouts http://www.alistapart.com/articles/responsive-web-design/ Sunday, March 11, 12
  11. 11. Sunday, March 11, 12
  12. 12. iPhone 3GS 256mb RAM Geekbench: 271 Sunday, March 11, 12
  13. 13. iPhone 3GS 256mb RAM Geekbench: 271 == Sunday, March 11, 12
  14. 14. Modern mobile devices are crappy computers with decent video cards. Sunday, March 11, 12
  15. 15. Sunday, March 11, 12
  16. 16. Perceived Performance Sunday, March 11, 12
  17. 17. On the desktop it’s easy... Throw up a spinner. Sunday, March 11, 12
  18. 18. Touch interfaces are tactile. Sunday, March 11, 12
  19. 19. Touch interfaces are tactile. Feedback must be continuous. Sunday, March 11, 12
  20. 20. When the interface stops moving during a gesture it feels like it died Sunday, March 11, 12
  21. 21. Respect Convention Sunday, March 11, 12
  22. 22. Mobile has conventions too Sunday, March 11, 12
  23. 23. Mobile has conventions too Sunday, March 11, 12
  24. 24. TouchEvent • touchstart - fires once • touchmove - fires continuously • touchend - fires once Sunday, March 11, 12
  25. 25. The touches Array • You only get one on Android • You get up to 11 on iOS • Each touch gives you position information, and sometimes scale Sunday, March 11, 12
  26. 26. iOS Gesture Events • gesturestart • gesturechange • gestureend Sunday, March 11, 12
  27. 27. iOS Developer Library http://bit.ly/iOS-guide Sunday, March 11, 12
  28. 28. Making Gestures Work • Prioritize user feedback • Use hardware acceleration • Manage your memory Sunday, March 11, 12
  29. 29. Prioritize User-feedback • Don’t do any loading during gestures • Treat the DOM as write-only (do your own math) • When at all possible, use css transitions Sunday, March 11, 12
  30. 30. Write-Only DOM • DOM touches are really expensive • You know where everything is • Use matrix transforms to queue up positions Sunday, March 11, 12
  31. 31. Swipe Basics distance = e.touches[0].pageX - startX; 'translate3d('+distance+'px,0px,0px)' Sunday, March 11, 12
  32. 32. Snap back/snap forward • Keep track of last position, use transitions with easing to snap back • Pick a swipe distance threshold, use that to snap forward (ontouchend) • If the user is gesturing, the element must be moving Sunday, March 11, 12
  33. 33. A Word about scrolling • Use native if at all possible: • -webkit-overflow-scrolling: touch; • If not, use a library to simulate momentum scroll (iScroll 4, Scrollability) Sunday, March 11, 12
  34. 34. Avoid Event Abstraction Sunday, March 11, 12
  35. 35. Image © Brian Lalor Used with permission Pinch to Zoom (there will be math) Sunday, March 11, 12
  36. 36. Why you can’t use native Pinch to Zoom Sunday, March 11, 12
  37. 37. First: Use Matrix Transforms Minimize DOM touches, make your transforms simpler in the long run Sunday, March 11, 12
  38. 38. http://xkcd.com/184/ Sunday, March 11, 12
  39. 39. It’s Not That Hard! transform: Translate matrix(1, 0, 0, 1, 10, 10); Scale Sunday, March 11, 12
  40. 40. With Hardware Acceleration... (matrix3d) [ [1,0,0,0], [0,1,0,0], [0,0,1,0], [tx,ty,tz,1] ] Sunday, March 11, 12
  41. 41. Transforms keep complex state without DOM reads Sunday, March 11, 12
  42. 42. What is happening? • Determine Center of the touch points • Determine the scale factor (touch.scale) • Scale the element by the scale factor, with the center of the touch points as the scale center Sunday, March 11, 12
  43. 43. The Naive Example Sunday, March 11, 12
  44. 44. The Naive Example Sunday, March 11, 12
  45. 45. The Naive Example Sunday, March 11, 12
  46. 46. The Right Example Sunday, March 11, 12
  47. 47. The Right Example Sunday, March 11, 12
  48. 48. The Right Example Sunday, March 11, 12
  49. 49. Breakdown Sunday, March 11, 12
  50. 50. Breakdown Sunday, March 11, 12
  51. 51. Breakdown Sunday, March 11, 12
  52. 52. Breakdown Sunday, March 11, 12
  53. 53. translateX = scalePointX * (newWidth - oldWidth) newWidth; Sunday, March 11, 12
  54. 54. Pro Tips • Beware the virtual pixels • Moving the transform-origin won’t really work • Remember to snap back Sunday, March 11, 12
  55. 55. Dealing with browsers Sunday, March 11, 12
  56. 56. Dealing with browsers Sunday, March 11, 12
  57. 57. Remember Progressive Enhancement? Sunday, March 11, 12
  58. 58. Progressive Enhancement • Feature Detect • Add transitions, don’t depend on them • Gesture interaction is an enhancement, clicks should still work • Be able to disable features per user- agent, if necessary Sunday, March 11, 12
  59. 59. The Tool Chain Sunday, March 11, 12
  60. 60. The dumbest thing that works Webkit Browser with UA Spoofing Sunday, March 11, 12
  61. 61. Weinre Remote webkit debugger. http://phonegap.github.com/weinre/ Sunday, March 11, 12
  62. 62. Internet Sharing + Charles Proxy • Watch HTTP traffic • Add breakpoints in ajax requests • Serve web pages to your phone from your computer Sunday, March 11, 12
  63. 63. Adobe Shadow • Wrapper for Wienre • Neat • Has some limitations Sunday, March 11, 12
  64. 64. Pile of Devices Sunday, March 11, 12
  65. 65. Pile of Devices • iPad 1 • Galaxy Tab • iPhone 3G • Motorola Xoom • iPhone 4 • Kindle Fire • Samsung • HTC Titan Galaxy S • HTC Desire Sunday, March 11, 12
  66. 66. Device Simulators & Emulators: Basically Useless. Sunday, March 11, 12
  67. 67. The Flickr Touch Light Box Sunday, March 11, 12
  68. 68. Untitled By protohiro Sunday, March 11, 12
  69. 69. Untitled By protohiro Sunday, March 11, 12
  70. 70. Untitled By protohiro Sunday, March 11, 12
  71. 71. Untitled By protohiro Sunday, March 11, 12
  72. 72. Swiping Process • Event Listener on top level for touch events • Only visible nodes move via translate3d • Rebuild next/previous happens when movement stops. Sunday, March 11, 12
  73. 73. Performance Tricks • Aggressive Pruning • Clean off css transforms/transitions • Write-only DOM. • Do as little as possible during swipes Sunday, March 11, 12
  74. 74. Frustrating Limitations • Retina screen is huge, device memory is small • Hardware acceleration is a crash festival • Fighting automatic optimization http://bit.ly/apple-image-size-restrictions Sunday, March 11, 12
  75. 75. Stephen Woods @ysaw http://www.slideshare.net/ysaw/creating- responsive-html5-touch-interfaces http://www.flickr.com/photos/wafer/5533140316/ http://www.flickr.com/photos/latca/2265637876/ http://www.flickr.com/photos/spine/1471217194/ http://www.flickr.com/photos/williamhook/3656233025/ http://www.flickr.com/photos/isriya/4656385586/ Image Credits (http://flic.kr/y/kQ5cLh) http://www.flickr.com/photos/yandle/3076451873/ http://www.flickr.com/photos/uberculture/6632437677/ http://www.flickr.com/photos/blalor/4934146981/ http://www.flickr.com/photos/torek/3280152297/ http://www.flickr.com/photos/nilsrinaldi/5157809941/ Sunday, March 11, 12

×