• Save
Touch me, I Dare You...
Upcoming SlideShare
Loading in...5
×
 

Touch me, I Dare You...

on

  • 4,986 views

 

Statistics

Views

Total Views
4,986
Views on SlideShare
4,983
Embed Views
3

Actions

Likes
2
Downloads
0
Comments
1

1 Embed 3

https://twitter.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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/
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • RE: Actions should be reversible so users can safely explore. Example – swipe to select is reversible
  • We’ve now submitted pointers as a standard specification to the W3C
  • We’ve now submitted pointers as a standard specification to the W3C
  • New Pointer Model proposed by MS with ie10 and windows 8 appLook for
  • Show how easy to program for independent multi-touch: http://touch2.azurewebsites.net/water3.html
  • Similar object formation to traditional event object, all same values in pointer event object but with moreProvides additional information
  • 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
  • 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
  • So now lets upgrade our feature detection to consider pointers as well
  • Show using two different input types at once: http://ie.microsoft.com/testdrive/Performance/BrickBreaker/
  • http://touch2.azurewebsites.net/cssCarousel.htmlhttp://touch2.azurewebsites.net/cssZoom.html(can this be shown publicly? ) http://t.msn.com/
  • http://touch2.azurewebsites.net/cssCarousel.htmlhttp://touch2.azurewebsites.net/cssZoom.html(can this be shown publicly? ) http://t.msn.com/
  • http://touch2.azurewebsites.net/cssCarousel.htmlhttp://touch2.azurewebsites.net/cssZoom.html(can this be shown publicly? ) http://t.msn.com/

Touch me, I Dare You... Touch me, I Dare You... Presentation Transcript

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