Touch the web
Download as PPTX, PDF3 likes917 views
The document is a comprehensive resource by Chris Love focused on high-performance single-page web applications and responsive design for touch interfaces. It covers essential guidelines for touch interactions, such as designing for touch points, implementing touch gestures, and using various input modalities like touch and mouse. Additionally, it provides links to libraries and resources related to touch input and application architecture.
![<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>](https://image.slidesharecdn.com/touchtheweb-140621100314-phpapp02/85/Touch-the-web-18-320.jpg)
Touch the web
- 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)
- 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