Download as KEY, PPTX
![Swipe Basics
distance = e.touches[0].pageX - startX;
'translate3d('+distance+'px,0px,0px)'](https://image.slidesharecdn.com/preso-120206000011-phpapp01/85/Creating-Responsive-HTML5-Touch-Interfaces-27-320.jpg)
![With Hardware
Acceleration... (matrix3d)
[
[1,0,0,0],
[0,1,0,0],
[0,0,1,0],
[tx,ty,tz,1]
]](https://image.slidesharecdn.com/preso-120206000011-phpapp01/85/Creating-Responsive-HTML5-Touch-Interfaces-35-320.jpg)
Creating Responsive HTML5 Touch Interfaces
- 1.
- 2. Stephen Woods Front EndEngineer Flickr
- 4. On the desktopwe 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);
- 5. On mobile weworry about devices.
- 6. Screen Sizes Media Queries, Break points, liquidlayouts http://www.alistapart.com/articles/responsive-web-design/
- 8. iPhone 3GS 256mbRAM Geekbench: 271
- 9. iPhone 3GS 256mbRAM Geekbench: 271 ==
- 10. Modern mobile devices arecrappy computers with decent video cards.
- 12.
- 13. On the desktopit’s easy... Throw up a spinner.
- 14.
- 15. Touch interfaces are tactile. Feedback must be continuous.
- 16. When the interface stops moving during a gesture it feels like it died
- 17.
- 18.
- 19.
- 20. TouchEvent • touchstart -fires once • touchmove - fires continuously • touchend - fires once
- 21. 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
- 22. iOS Gesture Events •gesturestart • gesturechange • gestureend
- 23. iOS Developer Library http://bit.ly/iOS-guide
- 24. Making Gestures Work • Prioritize user feedback • Use hardware acceleration • Manage your memory
- 25. Prioritize User-feedback • Don’tdo any loading during gestures • Treat the DOM as write-only (do your own math) • When at all possible, use css transitions
- 26. Write-Only DOM • DOMtouches are really expensive • You know where everything is • Use matrix transforms to queue up positions
- 27. Swipe Basics distance =e.touches[0].pageX - startX; 'translate3d('+distance+'px,0px,0px)'
- 28. 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
- 29. A Word aboutscrolling • Use native if at all possible: • -webkit-overflow-scrolling: touch; • If not, use a library to simulate momentum scroll (iScroll 4, Scrollability)
- 30. Image © BrianLalor Used with permission Pinch to Zoom (there will be math)
- 31. Why you can’tuse native Pinch to Zoom
- 32. First: Use Matrix Transforms MinimizeDOM touches, make your transforms simpler in the long run
- 33.
- 34. It’s Not ThatHard! transform: Translate matrix(1, 0, 0, 1, 10, 10); Scale
- 35. With Hardware Acceleration... (matrix3d) [ [1,0,0,0], [0,1,0,0], [0,0,1,0], [tx,ty,tz,1] ]
- 36. Transforms keep complex state without DOM reads
- 37. 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
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48. translateX = scalePointX *(newWidth - oldWidth) newWidth;
- 49. Pro Tips • Bewarethe virtual pixels • Moving the transform-origin won’t really work • Remember to snap back
- 50. The Flickr Touch Light Box
- 51.
- 52.
- 53.
- 54.
- 55. Swiping Process • EventListener on top level for touch events • Only visible nodes move via translate3d • Rebuild next/previous happens when movement stops.
- 56. Performance Tricks • AggressivePruning • Clean off css transforms/transitions • Write-only DOM. • Do as little as possible during swipes
- 57. 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
- 58. Stephen Woods @ysaw Image 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/
Editor's Notes
- #2 \n
- #3 I built the mobile lightbox (on a great backbone from the flickr FE team)\n
- #4 The flickr mobile lightbox. Swiping, zooming, pretty smooth, very natural for the device.\nI’m going to talk about how we made it, but I am going to talk a lot of concepts that came out of the work first\n
- #5 \n
- #6 They all run webkit, they all have css3, transforms, etc.\nYou’ll have to do a lot of testing on screen sizes of course...but..\n
- #7 People have covered this topic very well elsewhere\n
- #8 \n
- #9 \n
- #10 \n
- #11 but this is going to change...\n
- #12 An awesome experience is possible.\n
- #13 \n
- #14 \n
- #15 Remember the teleporter control in stng? It had a control like in the original series, but touch\nIt needs to feel right, that means immediate feedback is continuous, rather than momentary.\n
- #16 The rational for snap back and momentum scroll (always give feedback)\n\n
- #17 We all know the conventions of desktop software\nMost people respect it when building interfaces\n
- #18 Slide to unlock, swipe to go forward and back, pinch to zoom, tap and hold\ni) don't break what users expect: swipes & Pinches\nexample: user reaction to m.flickr lack of pinch zoom\n
- #19 \n
- #20 Ice cream sandwich caveat noted.\nI don’t know what the eleventh touch point is for\n
- #21 Considered harmful, Don’t waste your time with this crap, just do the math, its way easier than forking\n
- #22 Best reference in the universe for this\n
- #23 \n
- #24 DOM reads aren’t free, most JS-dom stuff is blocking\nMinimize writes as well of course, but that is obvious when you just do the math your self\n
- #25 Don’t be insecure, math is math, no need to keep checking positions\nMore on matrices later. Remember reads aren’t free, don’t do them\n
- #26 use average of multiple touches if you want it to be multi-finger swipe\nYou probably shouldn’t override os gestures\nprioritize user feedback! When the user is swiping you are doing nothing else\nsnapback, snap forward. Just keep track of the place to snap back to and go there\n
- #27 (native uses physics, generally unecessary)\n\n
- #28 limitation of -webkit-overflow-scrolling: it bounces the whole page!\n
- #29 \n
- #30 You have ZERO control. Your interface elements are going to slide all over and resize\nYou could try position:fixed, but what about touch points? Font size? \nOk, you can work around all that, but that is going to be a hassle, especially when you consider\nthat pinch zoom isn’t that complex\n
- #31 If you have multiple transforms to apply, you can apply them to the matrix and combine the changes into one DOM write\nNot as scary as it looks\n
- #32 The cartoon everyone uses for this\nMatrix is a transformation applied to the vector representing the position\nYeah, you don’t really need to understand that for anything I’m talking about here, because we aren’t rotating, shearing, anything like that\n\n
- #33 This is the 2d\n
- #34 The 1s are the scale, the ts are translation. For pinch zoom (without rotation)\nTHIS IS ALL WE NEED TO KEEP TRACK OF STATE\n
- #35 \n
- #36 \n
- #37 Just apply the scale property to the scale transform of the element\nBreaks the convention. \nIt should feel like the user is stretching the image, not turning a dial\n
- #38 Just apply the scale property to the scale transform of the element\nBreaks the convention. \nIt should feel like the user is stretching the image, not turning a dial\n
- #39 Just apply the scale property to the scale transform of the element\nBreaks the convention. \nIt should feel like the user is stretching the image, not turning a dial\n
- #40 Just apply the scale property to the scale transform of the element\nBreaks the convention. \nIt should feel like the user is stretching the image, not turning a dial\n
- #41 Just apply the scale property to the scale transform of the element\nBreaks the convention. \nIt should feel like the user is stretching the image, not turning a dial\n
- #42 Just apply the scale property to the scale transform of the element\nBreaks the convention. \nIt should feel like the user is stretching the image, not turning a dial\n
- #43 Just apply the scale property to the scale transform of the element\nBreaks the convention. \nIt should feel like the user is stretching the image, not turning a dial\n
- #44 The touch center point is the point from which the object scales\n
- #45 The touch center point is the point from which the object scales\n
- #46 The touch center point is the point from which the object scales\n
- #47 The touch center point is the point from which the object scales\n
- #48 The touch center point is the point from which the object scales\n
- #49 The touch center point is the point from which the object scales\n
- #50 The touch center point is the point from which the object scales\n
- #51 The touch center point is the point from which the object scales\n
- #52 The touch center point is the point from which the object scales\nWith the magic of matrix transforms we can apply both at the same time\n
- #53 The touch center point is the point from which the object scales\nWith the magic of matrix transforms we can apply both at the same time\n
- #54 The touch center point is the point from which the object scales\nWith the magic of matrix transforms we can apply both at the same time\n
- #55 The touch center point is the point from which the object scales\nWith the magic of matrix transforms we can apply both at the same time\n
- #56 The touch center point is the point from which the object scales\nWith the magic of matrix transforms we can apply both at the same time\n
- #57 The touch center point is the point from which the object scales\nWith the magic of matrix transforms we can apply both at the same time\n
- #58 The touch center point is the point from which the object scales\nWith the magic of matrix transforms we can apply both at the same time\n
- #59 The touch center point is the point from which the object scales\nWith the magic of matrix transforms we can apply both at the same time\n
- #60 Scale point x is relative to object left, not page\n
- #61 transform origin will suffer from rounding errors caused by hiDPI virtual pixels\n
- #62 \n
- #63 \n
- #64 \n
- #65 DOM Layout is very simple. When the lightbox first opens we create three nodes (in addition to the interface, which is also simple) The DOM is also blanked to clear up memory space.\nImages are DIVs\n
- #66 \n
- #67 Remember the 256mb of memory!\nNo loading, no calculations during swipes. And no fancy business between event handler and transform,\n that is a critical performance point\n
- #68 You can’t use a big enough image to really benefit from pinch/zoom (subsampling of large images means they get scaled down)\nHardware accelerated stuff does not seem to manage memory very gracefully\n
- #69 \n