HTML5 Touch Interfaces: SXSW extended version.

16,367 views

Published on

SXSW Version...

Published in: Technology, News & Politics
0 Comments
39 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
16,367
On SlideShare
0
From Embeds
0
Number of Embeds
1,271
Actions
Shares
0
Downloads
280
Comments
0
Likes
39
Embeds 0
No embeds

No notes for slide

HTML5 Touch Interfaces: SXSW extended version.

  1. 1. Creating Responsive HTML5 Touch Interfaces Stephen WoodsSunday, March 11, 12
  2. 2. Stephen Woods Front End Engineer FlickrSunday, 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: 271Sunday, 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 PerformanceSunday, 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 diedSunday, March 11, 12
  21. 21. Respect ConventionSunday, March 11, 12
  22. 22. Mobile has conventions tooSunday, March 11, 12
  23. 23. Mobile has conventions tooSunday, March 11, 12
  24. 24. TouchEvent • touchstart - fires once • touchmove - fires continuously • touchend - fires onceSunday, 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 scaleSunday, March 11, 12
  26. 26. iOS Gesture Events • gesturestart • gesturechange • gestureendSunday, March 11, 12
  27. 27. iOS Developer Library http://bit.ly/iOS-guideSunday, March 11, 12
  28. 28. Making Gestures Work • Prioritize user feedback • Use hardware acceleration • Manage your memorySunday, 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 transitionsSunday, March 11, 12
  30. 30. Write-Only DOM • DOM touches are really expensive • You know where everything is • Use matrix transforms to queue up positionsSunday, 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 movingSunday, 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 AbstractionSunday, 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 ZoomSunday, March 11, 12
  37. 37. First: Use Matrix Transforms Minimize DOM touches, make your transforms simpler in the long runSunday, 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); ScaleSunday, 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 readsSunday, 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 centerSunday, March 11, 12
  43. 43. The Naive ExampleSunday, March 11, 12
  44. 44. The Naive ExampleSunday, March 11, 12
  45. 45. The Naive ExampleSunday, March 11, 12
  46. 46. The Right ExampleSunday, March 11, 12
  47. 47. The Right ExampleSunday, March 11, 12
  48. 48. The Right ExampleSunday, March 11, 12
  49. 49. BreakdownSunday, March 11, 12
  50. 50. BreakdownSunday, March 11, 12
  51. 51. BreakdownSunday, March 11, 12
  52. 52. BreakdownSunday, 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 backSunday, March 11, 12
  55. 55. Dealing with browsersSunday, March 11, 12
  56. 56. Dealing with browsersSunday, 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 necessarySunday, March 11, 12
  59. 59. The Tool ChainSunday, March 11, 12
  60. 60. The dumbest thing that works Webkit Browser with UA SpoofingSunday, 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 computerSunday, March 11, 12
  63. 63. Adobe Shadow • Wrapper for Wienre • Neat • Has some limitationsSunday, March 11, 12
  64. 64. Pile of DevicesSunday, 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 DesireSunday, March 11, 12
  66. 66. Device Simulators & Emulators: Basically Useless.Sunday, March 11, 12
  67. 67. The Flickr Touch Light BoxSunday, March 11, 12
  68. 68. Untitled By protohiroSunday, March 11, 12
  69. 69. Untitled By protohiroSunday, March 11, 12
  70. 70. Untitled By protohiroSunday, March 11, 12
  71. 71. Untitled By protohiroSunday, 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 swipesSunday, 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-restrictionsSunday, 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

×