Touch the web
Upcoming SlideShare
Loading in...5
×
 

Touch the web

on

  • 514 views

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 ...

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

Statistics

Views

Total Views
514
Views on SlideShare
396
Embed Views
118

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 118

https://twitter.com 89
http://www.scoop.it 29

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Touch the web Touch the web Presentation Transcript

  • Touch The Web 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 • 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
  • 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
  • Touch • Touch Is Not New • Mobile Devices Have Made Touch Common
  • 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
  • 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
  • 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
  • Touch Your Application • Content Must Be Touchable • Account for Fat Fingers • Support APIs • Mouse • Touch (Apple) • Pointer (MSFT & W3C)
  • Touch Your Application
  • Touch Your Application • The Average Human Finger is 11mm in Diameter • Fingers Range from 8mm - 19mm • Baby to Large Man
  • Touch Your Application • Touch Points Need Margin • Or Separation From Neighbors
  • Touch Gestures • Pan • Pinch/Zoom • Swipe • Tap • Tap + Hold • Rotate
  • 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
  • Scrolling Content overflow: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; -ms-scroll-chaining: none; -ms-scroll-translation: vertical-to-horizontal;
  • Scrollable Lists • Vertical • Horizontal • Momentum • Rubber band or Bounce Effect
  • Scroll View Container Data Element Container
  • <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>
  • .x-scroller-wrapper, .xy-scroller-wrapper, .y-scroller-wrapper { /* properties */ }
  • Input Modalities • Mouse • Touch • Pen • Non-Touch • Keyboard • Voice • Eye Tracking & Assistive Technologies
  • Input Modality APIs • Mouse • Touch • Patented By Apple • W3C http://bit.ly/SZEGee • Pointer • Created by Microsoft • Kinect
  • Mouse API • MouseDown • MouseUp • MouseOver • MouseMove • MouseEnter • MouseCancel • Click, etc • Multiple Buttons
  • Apple’s Touch API • TouchStart • TouchEnd • TouchMove • TouchCancel
  • 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)'; }
  • Pointer Events • Created By Internet Explorer Team • Abstracts Mouse, Touch, Pen into Common API • W3C Standard http://bit.ly/1we8qmu • Public Domain, not Patented
  • Pointer Events
  • Pointer Events • Pointerdown • Pointerup • Pointercancel • Pointermove • Pointerover • Pointerout • Pointerenter • Pointerleave • Gotpointercapture • lostpointercapture
  • MSGestureEvent • Similar to Apple’s Gesture Events • Scale • Rotate • http://bit.ly/1lIaqzJ
  • MSGestureEvent • MSGestureChange • MSGestureEnd • MSGestureHold • MSGestureStart • MSGestureTap • MSInertiaStart
  • Touch Libraries HammerJS - http://bit.ly/1kXXT6X HandJS – Pointer Events Polyfil http://bit.ly/1wduAFn DeepTissue – http://deeptissuejs.com
  • DeepTissue • Abstracts Touch & Mouse APIs • Abstracts Input Modality Gestures • http://deeptissuejs.com
  • 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); });
  • INPUT TYPE=XXXX • New Input Types Drive On-Screen Keyboards • Drives Native Validation • Tel, email, url, number, etc
  • 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