Touch me, I Dare You...
4 likes8,236 views
The document discusses touch design and development for websites and applications. It covers touch strategies like designing for touch first, touch targets of around 42 pixels, touch and the grid, ergonomics of touch, and remembering there are multiple touch inputs. The document also discusses the W3C pointer events standard, event models for touch and pointer events, polyfills for cross-browser support, touch features like scroll snapping and content zooming, tile notifications, and considerations for touch in Internet Explorer 11.
![Code for multi-touch
document.addEventListener(moveevent, moveTouchPoint, false);
…
function moveTouchPoint(e) {
var pID = e.pointerId || 0;
if (e.targetTouches) {
for (var i = 0; i < event.targetTouches.length; i++) {
iPD = e.targetTouches[i].identifier;
if (touchPoints[pID]) {
touchPoints[pID].x = e.targetTouches[i].clientX;
touchPoints[pID].y = e.targetTouches[i].clientY;
}
}
} else {
if (touchPoints[pID]) {
touchPoints[pID].x = e.clientX;
touchPoints[pID].y = e.clientY;
}
} }](https://image.slidesharecdn.com/touchme-130531121028-phpapp02/85/Touch-me-I-Dare-You-20-320.jpg)
![Code for Pointer
document.addEventListener(moveevent,
moveTouchPoint, false);
…
function moveTouchPoint(e) {
var pID = e.pointerId;
if (touchPoints[pID]) {
touchPoints[pID].x = e.clientX;
touchPoints[pID].y = e.clientY;
}
}](https://image.slidesharecdn.com/touchme-130531121028-phpapp02/85/Touch-me-I-Dare-You-21-320.jpg)
Touch me, I Dare You...
- 1. TOUCH ME. I DAREYOU… Josh Holmes @joshholmes http://www.joshholmes.com josh.holmes@microsoft.com
- 2. Why does touch matter?
- 4. What’s your strategy for dealing with touch? Ignore Retrofit Design for first
- 5. Remember touch is touching… Don’t Use It Hover Sucks
- 7. Touch and the Grid
- 10. Design forTouch First • Design with hands and fingers in mind
- 11. Remember there’s more than one finger
- 12. Remember there’s more than type of input
- 15. W3C Pointer Standard • http://www.w3.org/Submission/pointer-events/ • http://www.w3.org/TR/pointerevents/ pointerMove pointerUp pointerOver pointerOut
- 16. W3C Pointer Standard • http://www.w3.org/Submission/pointer-events/ • http://www.w3.org/TR/pointerevents/ pointermove pointerup pointerover pointerout
- 17. Event Models But not as a crutch! pointermove pointerup pointerover pointerout pointercancel
- 18. demo
- 19. Event Models
- 20. Code for multi-touch document.addEventListener(moveevent, moveTouchPoint, false); … function moveTouchPoint(e) { var pID = e.pointerId || 0; if (e.targetTouches) { for (var i = 0; i < event.targetTouches.length; i++) { iPD = e.targetTouches[i].identifier; if (touchPoints[pID]) { touchPoints[pID].x = e.targetTouches[i].clientX; touchPoints[pID].y = e.targetTouches[i].clientY; } } } else { if (touchPoints[pID]) { touchPoints[pID].x = e.clientX; touchPoints[pID].y = e.clientY; } } }
- 21. Code for Pointer document.addEventListener(moveevent, moveTouchPoint, false); … function moveTouchPoint(e) { var pID = e.pointerId; if (touchPoints[pID]) { touchPoints[pID].x = e.clientX; touchPoints[pID].y = e.clientY; } }
- 22. CurrentTouch support on IOS/Android… if ('ontouchstart' in document.documentElement) { myButton.addEventListener('touchstart', myFavFunction, false); } else { myButton.addEventListener('click', myFavFunction, false); }
- 23. Touch First if (window.ontouchstart) { myButton.addEventListener('touchstart', myFavFunction, false); } else { myButton.addEventListener('click', myFavFunction, false); } if (window.navigator.msPointerEnabled) { myButton.addEventListener('MSPointerDown', myFavFunction, false); } else if ('ontouchstart' in document.documentElement) { myButton.addEventListener('touchstart', myFavFunction, false); } else { myButton.addEventListener('click', myFavFunction, false); }
- 24. Polyfills… • Hand.js - http://handjs.codeplex.com • Polymer PointerEvents - http://github.com/polymer-project/PointerEvents • Points.js - http://github.com/Rich-Harris/Points
- 25. demo
- 27. Scroll Snap -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-x: snapInterval(0px, 405px);
- 30. demo
- 31. What are LiveTiles? <meta name="application-name" content="Josh Holmes"/> <meta name="msapplication-TileColor" content="#f2a109"/> <meta name="msapplication-square70x70logo" content="tiny.png"/> <meta name="msapplication-square150x150logo" content="square.png"/> <meta name="msapplication-wide310x150logo" content="wide.jpg"/> <meta name="msapplication-square310x310logo" content="large.jpg"/> <meta name="msapplication-notification" content="frequency=30;polling- uri=http://foo.com/f&id=1;polling-uri2=http://foo.com/f&id=2;polling- uri3=http://foo.com/f&id=3;polling-uri4=http://foo.com/f&id=4;polling- uri5=http://foo.com/f&id=5; cycle=1"/>
- 32. What’s the Feed Look Like? <?xml version="1.0"?> <tile> <visual lang="en-US" version="2"> <binding fallback="TileSquareImage" branding="logo" template="TileSquare150x150Text04"> <text id="1">.NET Rocks Ireland</text> </binding> <binding fallback="TileWideImage" branding="logo" template="TileWide310x150ImageAndText01"> <image id="1" src="http://www.dotnetrocks.com/slices/carlrichard2.jpg"/> <text id="1">.NET Rocks Ireland</text> </binding> <binding branding="logo" template="TileSquare310x310TextList02" contentId="http://www.joshholmes.com/blog/?p=77168529"> <text id="1">.NET Rocks Ireland</text> <text id="2">Freddy moment</text> <text id="3">Tech Parenting</text> </binding> </visual> </tile>
- 33. demo
- 35. What’s needed for Swipe Ahead? <link rel="next" href="http://www.joshholmes.com/blog/page/2/" />
- 36. demo
- 37. Where’s IE11 now? • Dev preview • Win 8.1 • Windows 7 – Rease Preview • New features • F12 DevTools (like you just saw) • UA string change Site compatibility just works • WebGL is awesome • Evergreen updates • More standards • MoreGPU • More awesomesauce
- 40. TOUCH ME. I DAREYOU… Josh Holmes @joshholmes http://www.joshholmes.com josh.holmes@microsoft.com
Editor's Notes
- #11: RE: Actions should be reversible so users can safely explore. Example – swipe to select is reversible
- #16: We’ve now submitted pointers as a standard specification to the W3C
- #17: We’ve now submitted pointers as a standard specification to the W3C
- #18: New Pointer Model proposed by MS with ie10 and windows 8 appLook for
- #19: Show how easy to program for independent multi-touch: http://touch2.azurewebsites.net/water3.html
- #20: Similar object formation to traditional event object, all same values in pointer event object but with moreProvides additional information
- #21: Each touch point for iOS is buried in a collection, so we have to add an extra loop on each frame to identify each touch point and then position in tracking array
- #22: Model in this case needs to know that current and previous locations of each touch point, so tracks in form of array based on pointerID
- #24: So now lets upgrade our feature detection to consider pointers as well
- #25: Show using two different input types at once: http://ie.microsoft.com/testdrive/Performance/BrickBreaker/
- #31: http://touch2.azurewebsites.net/cssCarousel.htmlhttp://touch2.azurewebsites.net/cssZoom.html(can this be shown publicly? ) http://t.msn.com/
- #32: http://touch2.azurewebsites.net/cssCarousel.htmlhttp://touch2.azurewebsites.net/cssZoom.html(can this be shown publicly? ) http://t.msn.com/
- #36: http://touch2.azurewebsites.net/cssCarousel.htmlhttp://touch2.azurewebsites.net/cssZoom.html(can this be shown publicly? ) http://t.msn.com/