Touch is now everywhere. It is almost impossible to find a personal computing device without a touch screen. This means developers and designers need to reconsider how to design client interfaces to successfully enable successful touch interactions. Touch involves layout choices, new CSS properties and new touch APIs. This session covers design concepts and how to apply new coding techniques

1. Touch The Web
Chris Love
@ChrisLove
Love2Dev.com

2. Who Am I
• ASP.NET MVP
• ASP Insider
• Internet Explorer User Agent
• Author
• Speaker
• Tweaker, Lover of Web, JavaScript, CSS & HTML5
• @ChrisLove
• Love2Dev.com

3. High Performance Single Page Web
Applications
• Responsive Design
• Touch
• Mobile First
• SPA
• Extensible, Scalable Architecture
• Web Build and Workflow
• Goes Really Fast!
• ~395 Pages
• 20 Chapters
• $9.99 http://amzn.to/1a55L89

4. Slide Deck & Source Code
• Normal Slide Decks – http://slidesha.re/15YTrTT
• Today’s Slides - http://bit.ly/1m66Hu6
• Source Code – http://GitHub.com/docluv/movies

5. Touch
• Touch Is Not New
• Mobile Devices Have Made Touch Common

6. Import Touch Design Considerations
• Make Data Actionable
• Make Actionable Items Easy to Touch
• Provide Enough Margin between Touch Points to Eliminate
Touch Error
• Simple is often Better

7. Touch Guidelines
• iOS Human Interface guidelines - http://bit.ly/UYh3Vh
• Windows Phone Design and Interaction Guidelines -
http://bit.ly/1nUhREj
• Windows Store UI Guidelines Touch Interactions -
http://bit.ly/1nUhTMg
• Unbuntu - Designing for Finger UIs – http://bit.ly/1suY2s1
• Android Touch Feedback Guidelines - http://bit.ly/1nUi0HB
• Guidelines for Building Touch Friendly Sites -
http://bit.ly/1qqAFfh

8. Hover
• There is Currently No Hover Event Related To Touch
• This May Eventually Change
• Internet Explorer Supports Tap + Hold to Trigger Hover
Event
• Always Provide Secondary, Touch Friendly Mechanism To
Trigger Hover Actions

9. Touch Your Application
• Content Must Be Touchable
• Account for Fat Fingers
• Support APIs
• Mouse
• Touch (Apple)
• Pointer (MSFT & W3C)

10. Touch Your Application

11. Touch Your Application
• The Average Human Finger
is 11mm in Diameter
• Fingers Range from 8mm -
19mm
• Baby to Large Man

12. Touch Your Application
• Touch Points Need Margin
• Or Separation From
Neighbors

13. Touch Gestures
• Pan
• Pinch/Zoom
• Swipe
• Tap
• Tap + Hold
• Rotate

14. Touch-action
• CSS Property to Help Determine How Touch is Handled
• Auto
• None
• Pan-x
• Pan-y
• Can disable Auto-zoom
• Enable Scrolling
• http://bit.ly/Thlyc0

15. Scrolling Content
overflow: scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
-ms-scroll-chaining: none;
-ms-scroll-translation: vertical-to-horizontal;

16. Scrollable Lists
• Vertical
• Horizontal
• Momentum
• Rubber band or Bounce Effect

17. Scroll View Container
Data Element Container

18. <div class="xy-scroller-wrapper">
<div class="movie-poster-div movie-poster-grid">
<!– The wrapping element should have known width Assigned -->
[Data Elements]
</div>
</div>

19. .x-scroller-wrapper, .xy-scroller-wrapper, .y-scroller-wrapper {
/* properties */
}

20. Input Modalities
• Mouse
• Touch
• Pen
• Non-Touch
• Keyboard
• Voice
• Eye Tracking & Assistive Technologies

21. Input Modality APIs
• Mouse
• Touch
• Patented By Apple
• W3C http://bit.ly/SZEGee
• Pointer
• Created by Microsoft
• Kinect

22. Mouse API
• MouseDown
• MouseUp
• MouseOver
• MouseMove
• MouseEnter
• MouseCancel
• Click, etc
• Multiple Buttons

23. Apple’s Touch API
• TouchStart
• TouchEnd
• TouchMove
• TouchCancel

24. Apple’s Gesture API
• Rotate
• Scale
• http://bit.ly/SZFC2e
• onGestureChange: function(e) {
e.preventDefault();
e.target.style.webkitTransform =
'scale(' + e.scale + startScale + ') rotate(' + e.rotation +
startRotation + 'deg)';
}

25. Pointer Events
• Created By Internet Explorer Team
• Abstracts Mouse, Touch, Pen into Common API
• W3C Standard http://bit.ly/1we8qmu
• Public Domain, not Patented

26. Pointer Events

27. Pointer Events
• Pointerdown
• Pointerup
• Pointercancel
• Pointermove
• Pointerover
• Pointerout
• Pointerenter
• Pointerleave
• Gotpointercapture
• lostpointercapture

28. MSGestureEvent
• Similar to Apple’s Gesture Events
• Scale
• Rotate
• http://bit.ly/1lIaqzJ

29. MSGestureEvent
• MSGestureChange
• MSGestureEnd
• MSGestureHold
• MSGestureStart
• MSGestureTap
• MSInertiaStart

30. Touch Libraries
HammerJS - http://bit.ly/1kXXT6X
HandJS – Pointer Events Polyfil http://bit.ly/1wduAFn
DeepTissue – http://deeptissuejs.com

31. DeepTissue
• Abstracts Touch & Mouse APIs
• Abstracts Input Modality Gestures
• http://deeptissuejs.com

32. DeepTissue
var dt = deeptissue(".sgl-tap");
dt.tap(function (evt) {
tl.textContent = "Single Tapn" + tl.textContent;
console.log(evt.type);
console.log(evt.screenX);
console.log(evt.screenY);
});

34. INPUT TYPE=XXXX
• New Input Types Drive On-Screen
Keyboards
• Drives Native Validation
• Tel, email, url, number, etc

35. High Performance Single Page Web
Applications
• Responsive Design
• Touch
• Mobile First
• SPA
• Extensible, Scalable Architecture
• Web Build and Workflow
• Goes Really Fast!
• ~395 Pages
• 20 Chapters
• $9.99 http://amzn.to/1a55L89