1 / 35

Touch Your Application

Touch Your Application. Chris Love @ChrisLove Love2Dev.com. Who Am I. ASP.NET MVP ASP Insider Internet Explorer User Agent Author Speaker Tweaker, Lover of Web, JavaScript, CSS & HTML5 @ChrisLove Love2Dev.com. High Performance Single Page Web Applications. BUY NOW !.

larya
Download Presentation

Touch Your Application

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Touch Your Application Chris Love @ChrisLove Love2Dev.com #devconnections

  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 BUYNOW! • 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 • Slide Deck – http://slideshare.com/docluv • Source Code – http://github.com/docluv

  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. Data Element Container Scroll View 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 */ } .x-scroller-wrapper { } .y-scroller-wrapper { } @media (min-width:600px) { .xy-scroller-wrapper { /* Adjust Rules from vertical to horizontal scroll */ } }

  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 • http://bit.ly/1o0uxaO • 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 MOUSE TOUCH POINTERS

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

  33. DeepTissue var dt = deeptissue(".sgl-tap"); dt.tap(function (evt) { tl.textContent = "Single Tap\n" + 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. Rate with Mobile App: Rate This Session Now! Tell Us What You Thought of This Session Select the session from the Agenda or Speakers menus Select the Actions tab Click Rate Session Be Entered to WIN Prizes! Rate Using Our Website: Register at www.devconnections.com/logintoratesession Go to www.devconnections.com/ratesession Select this session from the list and rate it

More Related