Touch the web

747 views
646 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
747
On SlideShare
0
From Embeds
0
Number of Embeds
125
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Touch the web

  1. 1. Touch The Web Chris Love @ChrisLove Love2Dev.com
  2. 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. 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. 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. 5. Touch • Touch Is Not New • Mobile Devices Have Made Touch Common
  6. 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. 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. 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. 9. Touch Your Application • Content Must Be Touchable • Account for Fat Fingers • Support APIs • Mouse • Touch (Apple) • Pointer (MSFT & W3C)
  10. 10. Touch Your Application
  11. 11. Touch Your Application • The Average Human Finger is 11mm in Diameter • Fingers Range from 8mm - 19mm • Baby to Large Man
  12. 12. Touch Your Application • Touch Points Need Margin • Or Separation From Neighbors
  13. 13. Touch Gestures • Pan • Pinch/Zoom • Swipe • Tap • Tap + Hold • Rotate
  14. 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. 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. 16. Scrollable Lists • Vertical • Horizontal • Momentum • Rubber band or Bounce Effect
  17. 17. Scroll View Container Data Element Container
  18. 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. 19. .x-scroller-wrapper, .xy-scroller-wrapper, .y-scroller-wrapper { /* properties */ }
  20. 20. Input Modalities • Mouse • Touch • Pen • Non-Touch • Keyboard • Voice • Eye Tracking & Assistive Technologies
  21. 21. Input Modality APIs • Mouse • Touch • Patented By Apple • W3C http://bit.ly/SZEGee • Pointer • Created by Microsoft • Kinect
  22. 22. Mouse API • MouseDown • MouseUp • MouseOver • MouseMove • MouseEnter • MouseCancel • Click, etc • Multiple Buttons
  23. 23. Apple’s Touch API • TouchStart • TouchEnd • TouchMove • TouchCancel
  24. 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. 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. 26. Pointer Events
  27. 27. Pointer Events • Pointerdown • Pointerup • Pointercancel • Pointermove • Pointerover • Pointerout • Pointerenter • Pointerleave • Gotpointercapture • lostpointercapture
  28. 28. MSGestureEvent • Similar to Apple’s Gesture Events • Scale • Rotate • http://bit.ly/1lIaqzJ
  29. 29. MSGestureEvent • MSGestureChange • MSGestureEnd • MSGestureHold • MSGestureStart • MSGestureTap • MSInertiaStart
  30. 30. Touch Libraries HammerJS - http://bit.ly/1kXXT6X HandJS – Pointer Events Polyfil http://bit.ly/1wduAFn DeepTissue – http://deeptissuejs.com
  31. 31. DeepTissue • Abstracts Touch & Mouse APIs • Abstracts Input Modality Gestures • http://deeptissuejs.com
  32. 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); });
  33. 33. INPUT TYPE=XXXX • New Input Types Drive On-Screen Keyboards • Drives Native Validation • Tel, email, url, number, etc
  34. 34. 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

×