Creating ResponsiveHTML5 TouchInterfacesStephen Woods
Stephen WoodsFront End Engineer       Flickr
On the desktop weworry about browsers-moz-transform:rotate(-270deg);-moz-transform-origin: bottom left;-webkit-transform: ...
On mobile we worryabout devices.
ScreenSizesMedia Queries,Break points,liquid layoutshttp://www.alistapart.com/articles/responsive-web-design/
iPhone 3GS 256mb RAMGeekbench: 271
iPhone 3GS 256mb RAMGeekbench: 271      ==
Modern mobiledevices are crappy  computers withdecent video cards.
PerceivedPerformance
On the desktop it’seasy...  Throw up a spinner.
Touch interfaces aretactile.
Touch interfaces aretactile.   Feedback must be        continuous.
When the interface  stops movingduring a gesture it feels like it died
Respect Convention
Mobile hasconventionstoo
Mobile hasconventionstoo
TouchEvent• touchstart - fires once• touchmove - fires continuously• touchend - fires once
The touches Array• You only get one on Android• You get up to 11 on iOS• Each touch gives you position  information, and s...
iOS Gesture Events• gesturestart• gesturechange• gestureend
iOS Developer      Libraryhttp://bit.ly/iOS-guide
Making Gestures Work • Prioritize user feedback • Use hardware acceleration • Manage your memory
Prioritize User-feedback• Don’t do any loading during gestures• Treat the DOM as write-only (do your  own math)• When at a...
Write-Only DOM• DOM touches are really expensive• You know where everything is• Use matrix transforms to queue up  positions
Swipe Basicsdistance = e.touches[0].pageX - startX;translate3d(+distance+px,0px,0px)
Snap back/snap      forward• Keep track of last position, use  transitions with easing to snap back• Pick a swipe distance...
A Word about scrolling• Use native if at all possible:• -webkit-overflow-scrolling:      touch;• If not, use a library to ...
Image © Brian LalorUsed with permission   Pinch to Zoom   (there will be math)
Why you can’t use native Pinch to      Zoom
First:Use Matrix TransformsMinimize DOM touches, make your transformssimpler in the long run
http://xkcd.com/184/
It’s Not That Hard!transform:          Translatematrix(1, 0, 0, 1, 10, 10);         Scale
With HardwareAcceleration... (matrix3d)            [                [1,0,0,0],                [0,1,0,0],                [0...
Transforms keep  complex statewithout DOM reads
What is happening?• Determine Center of the touch points• Determine the scale factor  (touch.scale)• Scale the element by ...
The Naive Example
The Naive Example
The Naive Example
The Right Example
The Right Example
The Right Example
Breakdown
Breakdown
Breakdown
Breakdown
translateX =scalePointX * (newWidth - oldWidth)            newWidth;
Pro Tips• Beware the virtual pixels• Moving the transform-origin won’t  really work• Remember to snap back
The Flickr Touch   Light Box
UntitledBy protohiro
UntitledBy protohiro
UntitledBy protohiro
UntitledBy protohiro
Swiping Process• Event Listener on top level for touch  events• Only visible nodes move via  translate3d• Rebuild next/pre...
Performance Tricks• Aggressive Pruning• Clean off css transforms/transitions• Write-only DOM.• Do as little as possible du...
Frustrating         Limitations• Retina screen is huge, device  memory is small• Hardware acceleration is a crash  festiva...
Stephen Woods                                  @ysawImage Credits (http://flic.kr/y/kQ5cLh)http://www.flickr.com/photos/wafe...
Creating Responsive HTML5 Touch Interfaces
Creating Responsive HTML5 Touch Interfaces
Creating Responsive HTML5 Touch Interfaces
Upcoming SlideShare
Loading in …5
×

Creating Responsive HTML5 Touch Interfaces

39,802 views

Published on

Published in: Technology
  • Be the first to comment

Creating Responsive HTML5 Touch Interfaces

  1. Creating ResponsiveHTML5 TouchInterfacesStephen Woods
  2. Stephen WoodsFront End Engineer Flickr
  3. On the desktop weworry 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);
  4. On mobile we worryabout devices.
  5. ScreenSizesMedia Queries,Break points,liquid layoutshttp://www.alistapart.com/articles/responsive-web-design/
  6. iPhone 3GS 256mb RAMGeekbench: 271
  7. iPhone 3GS 256mb RAMGeekbench: 271 ==
  8. Modern mobiledevices are crappy computers withdecent video cards.
  9. PerceivedPerformance
  10. On the desktop it’seasy... Throw up a spinner.
  11. Touch interfaces aretactile.
  12. Touch interfaces aretactile. Feedback must be continuous.
  13. When the interface stops movingduring a gesture it feels like it died
  14. Respect Convention
  15. Mobile hasconventionstoo
  16. Mobile hasconventionstoo
  17. TouchEvent• touchstart - fires once• touchmove - fires continuously• touchend - fires once
  18. 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
  19. iOS Gesture Events• gesturestart• gesturechange• gestureend
  20. iOS Developer Libraryhttp://bit.ly/iOS-guide
  21. Making Gestures Work • Prioritize user feedback • Use hardware acceleration • Manage your memory
  22. 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
  23. Write-Only DOM• DOM touches are really expensive• You know where everything is• Use matrix transforms to queue up positions
  24. Swipe Basicsdistance = e.touches[0].pageX - startX;translate3d(+distance+px,0px,0px)
  25. 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
  26. 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)
  27. Image © Brian LalorUsed with permission Pinch to Zoom (there will be math)
  28. Why you can’t use native Pinch to Zoom
  29. First:Use Matrix TransformsMinimize DOM touches, make your transformssimpler in the long run
  30. http://xkcd.com/184/
  31. It’s Not That Hard!transform: Translatematrix(1, 0, 0, 1, 10, 10); Scale
  32. With HardwareAcceleration... (matrix3d) [ [1,0,0,0], [0,1,0,0], [0,0,1,0], [tx,ty,tz,1] ]
  33. Transforms keep complex statewithout DOM reads
  34. 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
  35. The Naive Example
  36. The Naive Example
  37. The Naive Example
  38. The Right Example
  39. The Right Example
  40. The Right Example
  41. Breakdown
  42. Breakdown
  43. Breakdown
  44. Breakdown
  45. translateX =scalePointX * (newWidth - oldWidth) newWidth;
  46. Pro Tips• Beware the virtual pixels• Moving the transform-origin won’t really work• Remember to snap back
  47. The Flickr Touch Light Box
  48. UntitledBy protohiro
  49. UntitledBy protohiro
  50. UntitledBy protohiro
  51. UntitledBy protohiro
  52. Swiping Process• Event Listener on top level for touch events• Only visible nodes move via translate3d• Rebuild next/previous happens when movement stops.
  53. Performance Tricks• Aggressive Pruning• Clean off css transforms/transitions• Write-only DOM.• Do as little as possible during swipes
  54. Frustrating Limitations• Retina screen is huge, device memory is small• Hardware acceleration is a crash festival• Fighting automatic optimizationhttp://bit.ly/apple-image-size-restrictions
  55. Stephen Woods @ysawImage Credits (http://flic.kr/y/kQ5cLh)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/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/

×