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.

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

6. Obviously…
Touch Sized Buttons
~42px

7. Touch and the Grid

8. Ergonomics & touch

9. Touch the hotspots

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);

28. Content Zooming
-ms-content-zooming: zoom;

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&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"/>

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

39. Wrapup
•http://modern.ie
•http://docs.webplatform.org/PointerEvents
•http://joshholmes.com
•@joshholmes
•josh.holmes@microsoft.com

40. TOUCH ME.
I DAREYOU…
Josh Holmes
@joshholmes
http://www.joshholmes.com
josh.holmes@microsoft.com