Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Touch me, I Dare You...

7,659 views

Published on

Published in: Technology, Business
  • Just a tiny note about slide 22-23: please, don't fall for the 'if the browser has touch support, listen to touch, otherwise click' as this completely ignores the situation where the browser and the platform may support touch, but the user is actually using a mouse or keyboard instead (case in point: win8 laptop with multitouch screen running chrome or similar). See also https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Touch me, I Dare You...

  1. 1. TOUCH ME. I DAREYOU… Josh Holmes @joshholmes http://www.joshholmes.com josh.holmes@microsoft.com
  2. 2. Why does touch matter?
  3. 3. What’s your strategy for dealing with touch? Ignore Retrofit Design for first
  4. 4. Remember touch is touching… Don’t Use It Hover Sucks
  5. 5. Obviously… Touch Sized Buttons ~42px
  6. 6. Touch and the Grid
  7. 7. Ergonomics & touch
  8. 8. Touch the hotspots
  9. 9. Design forTouch First • Design with hands and fingers in mind
  10. 10. Remember there’s more than one finger
  11. 11. Remember there’s more than type of input
  12. 12. W3C Pointer Standard • http://www.w3.org/Submission/pointer-events/ • http://www.w3.org/TR/pointerevents/  pointerMove  pointerUp  pointerOver  pointerOut
  13. 13. W3C Pointer Standard • http://www.w3.org/Submission/pointer-events/ • http://www.w3.org/TR/pointerevents/  pointermove  pointerup  pointerover  pointerout
  14. 14. Event Models But not as a crutch!  pointermove  pointerup  pointerover  pointerout  pointercancel
  15. 15. demo
  16. 16. Event Models
  17. 17. 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; } } }
  18. 18. 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; } }
  19. 19. CurrentTouch support on IOS/Android… if ('ontouchstart' in document.documentElement) { myButton.addEventListener('touchstart', myFavFunction, false); } else { myButton.addEventListener('click', myFavFunction, false); }
  20. 20. 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); }
  21. 21. Polyfills… • Hand.js - http://handjs.codeplex.com • Polymer PointerEvents - http://github.com/polymer-project/PointerEvents • Points.js - http://github.com/Rich-Harris/Points
  22. 22. demo
  23. 23. Scroll Snap -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-x: snapInterval(0px, 405px);
  24. 24. Content Zooming -ms-content-zooming: zoom;
  25. 25. demo
  26. 26. 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&amp;id=1;polling-uri2=http://foo.com/f&amp;id=2;polling- uri3=http://foo.com/f&amp;id=3;polling-uri4=http://foo.com/f&amp;id=4;polling- uri5=http://foo.com/f&amp;id=5; cycle=1"/>
  27. 27. 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>
  28. 28. demo
  29. 29. What’s needed for Swipe Ahead? <link rel="next" href="http://www.joshholmes.com/blog/page/2/" />
  30. 30. demo
  31. 31. 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
  32. 32. Wrapup •http://modern.ie •http://docs.webplatform.org/PointerEvents •http://joshholmes.com •@joshholmes •josh.holmes@microsoft.com
  33. 33. TOUCH ME. I DAREYOU… Josh Holmes @joshholmes http://www.joshholmes.com josh.holmes@microsoft.com

×