Tips for building fast multi touch enabled web sites

  • 2,039 views
Uploaded on

Modern browsers take huge strides to enable multi-touch browsing. They also include many new HTML5 enabled capabilities that speed up the web and provide a more interactive experience. Internet …

Modern browsers take huge strides to enable multi-touch browsing. They also include many new HTML5 enabled capabilities that speed up the web and provide a more interactive experience. Internet Explorer has made huge strides in these areas. As web application designers \developers, we need to understand these capabilities and build our applications to take advantage of them. This session will define these new capabilities and provide some tips and tricks on how to use them effectively in your web applications.

Lessons learned:
*The new multi-touch enabled capabilities of modern browsers
*The new HTML5\CSS3 capabilities of modern browsers
*Tips and Tricks for using these capabilities

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,039
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • This is the simplest and real explanation of the modern independent composition that was designed for Windows8. The model is different enough in that the composition engine doesn’t do any rendering whatsoever, and only copies and moves bitmaps around. That means that IE is responsible for handing of opaque or transparent bitmaps of various layers of pages that can be simple (1 layer) or super complex (layers generated by intersecting graphics, sub-scrollers, videos with controls, etc).
  • It is the 3rd input deviceTalk to functional considerations and decisions, and how they sometimes collide with user expectations as wellas even standards. (e.g. button light up, link navigation, double-tap)Innovations : zoom in subscroller, back/forward gestures
  • Finger’s contact geometry is used to redirect the coordinate of your touch to the actionable element your finger overlaps.
  • DEMO: http://www.bing.com/ homepage hot spots
  • DEMO: http://ie.microsoft.com/testdrive/Browser/TouchFirstControls/Default.htmlTouch First Controls
  • Discussion: ways to adapt your site for touch usersA hardware agnostic site (e.g., a “no-compromises” UX)Only give the touchified site for users where touch is possible (but please, give us your full featured site b/c we can handle it)Change the site depending on the input being used (e.g. Bing homepage)Don’t use UA string or other browser sniffing.Metro style != touch users, touch hardware detection doesUsers with touch hardware may still use a mouse.
  • For more info: http://bit.ly/win8touchguidanceTouch targeting goes a long way to help users confidently tap common elements like links, button elements, and input boxes. However, the best thing you can do to accommodate the size of a finger is to provide larger hit targets.
  • Demo: fixing a site that depends on mouse movement (e.g. Cuttherope.ie, HTML5 Angry Birds)
  • LIVE CODING: A simple photo gallery
  • LIVE CODING: A simple photo gallery
  • LIVE CODING: A simple photo gallery
  • LIVE CODING: A simple photo gallery
  • LIVE CODING: A simple photo gallery
  • LIVE CODING: A simple photo gallery

Transcript

  • 1. 450 Lincoln Street Suite 101 Denver, CO 80203 719.359.9692 www.aspenware.com Building Fast Multi-Touch Enabled Web Sites Ben Hoelting @benhnet
  • 2. Ben Hoelting In truth, he’s just a big kid. He loves designing systems that solve real world problems. There is nothing more satisfying than seeing something you helped develop being used by the end users. Ben is also involved in the technology community and runs the South Colorado .NET user group. He also enjoys speaking at tech groups and events around the country. Ben Hoelting @benhnet b.hoelting@aspenware.com
  • 3. Agenda:  Browser Support For Touch  Do’s and Don’ts of Touch Websites  Touch Demos  Wrap-up For sample code please go to https://github.com/BenHNet/MultiTouchP ublic
  • 4. Touch Support In Today’s Browsers
  • 5. Hardware Accelerated Fast
  • 6. The Power Of The Whole PC
  • 7. Independent Composition & Manipulation  Process input as fast as possible  On a separate thread  Using the fastest methods available on current hardware  Compose Graphics as fast as possible  On a separate thread  Using the fastest methods available on current hardware Thus even with while (true) {} Animations execute, videos play, application screens transition, pages pan and zoom
  • 8.  http://ie.microsoft.com/testdrive/  http://blog.monitis.com/index.php/2011/05/15/30-tips-to-improve- javascript-performance/  http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification We have the technology! The Six Million Dollar Web Better… Stronger… Faster… Browsers and computers are getting better and faster. However, if developers get to know how modern browsers work we can make our applications even faster.
  • 9. Touch Support Deliver a fast and fluid touch-first experience along with smooth animations on a wide range of form factors including those built on ARM and SOC architectures – Position and Zoom manipulation – The “right” positioning of fixed elements – Soft Keyboard Integration (impact on panning, edit, etc) – Events (is a click a click?) – Developer queues for panning and zooming for performance – Zoom and Pan content in a sub-scroller – Innovations such as back/forward navigation
  • 10. Today’s Web wasn’t designed with a finger in mind. Touch Targeting
  • 11. Dos and Don’ts of Touch Websites
  • 12. Quick Steps to a Touch-Friendly Site For 2 decades, the Web has been built with mouse and keyboard in mind. Here’s a checklist to ensure your site is accessible to users of any input device.
  • 13. With mouse, users can target links easily because the mouse cursor changes from an arrow to a pointer hand while over the link: DO: provide CSS :hover styles for links With touch, users need feedback when they touch the screen to know that they successfully targeted the link: Did I hit the link?
  • 14. DON’T: hide content behind hover With a mouse, users can point at something to hover it independently of clicking it to activate it. For most touch devices, hover and active are the same thing. Consider tap-based menus, or scrubbing menus.
  • 15. DO: identify input type using HTML5 Forms IE10 introduces support for HTML5 input types including, but not limited to: <input type="email"> <input type="tel"> <input type="url"> Specify the format of the input and IE10 will give your users the right touch keyboard for the job. IE10 touch-optimizes all of the supported HTML5 input elements.
  • 16. DO: feature detect, DON’T: browser detect Detect support for the IE10 touch APIs: if(navigator.msPointerEnabled) //Supports pointer input Detect hardware support for touch: if(navigator.msMaxTouchPoints>1) //Supports multi-touch
  • 17. DO: provide ample room for your finger Avg. 11mm 7mm 7mm 2mm padding Ideal Min Target
  • 18. DO: use the Windows 8 “touch language” Press & Hold to Learn Tap for Primary ActionPinch to Stretch/Zoom Turn to Rotate tooltips (@title) contextmenu event gesture events Direct Manipulation zooming gesture events gesture events click event gesture events InteractionTools
  • 19. DON’T: reinvent touch interactions
  • 20. DO: take advantage of enhanced pinning and tile notifications Your site can now define the tile(s) to use when your site is pinned to the start screen. Use buildmypinnedsite.com to create a tile for all sizes and setup notifications.
  • 21. Good Touch Sites Demo  http://windows.microsoft.com/en-us/internet-explorer/browser- ie#touchweb=touchvidtab1  http://www.msn.com
  • 22. Working with Touch
  • 23. Deep Dive into the IE Touch APIs Pointer, Gesture Events CSS Custom Panning, Zooming, and Swipes Direct Manipulation Pan/Zoom, HTML5 Controls, Touch Targeting
  • 24. By default, pan, zoom, and double-tap “win” over DOM events. When IE takes over a touch contact for pan/zoom/double-tap, the page is signaled with an MSPointerCancel event. So, if you need move events, drag and drop, tapping fast, pinching, etc. then configure IE for just the touch actions you do want: -ms-touch-action: none | manipulation | double-tap-zoom | auto | inherit; Configuring Touch Default Actions (Or, “how to get events to fire when dragging your finger”)
  • 25. Custom Pan, Swipe, & Zoom HTML CSS <div id="scrollViewer"> <div id="scrollContents"> <div class="page“>1</div> <div class="page“>2</div> <div class="page“>3</div> </div> </div> #scrollViewer { width: 500px; height: 500px; overflow-x: scroll; overflow-y: hidden; -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-x: snapInterval(0px, 100%); } .page { width: 500px; float: left; } Page 2Page 1 Page 3 Panning Snap Points
  • 26. Touch CSS Demos
  • 27. Simple Photo Gallery Viewer <style> img { width:500px; vertical-align: top; } .photoGallery { width: 500px; height: 340px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -ms-scroll-snap-points-x: snapInterval(0px,500px); -ms-scroll-snap-type: mandatory; -ms-overflow-style: none; -ms-scroll-chaining:none; } </style> <h1>Photos</h1> <div class="photoGallery"> <img src="img1.jpg"><img src="img2.jpg"><img src="img3.jpg"><img src="img4.jpg"> </div>
  • 28. http://www.w3.org/TR/touch-events/ W3C Touch Events Events Event Properties touchstart touchmove touchend touchcancel clientX clientY pageX pageY screenX screenY
  • 29. Pointer events help make your site have no compromises because they’re hardware agnostic. Raw Input MSPointer Events Pointer Mouse Pen Touch Events Event Properties MSPointerDown MSPointerMove MSPointerUp MSPointerOver MSPointerOut MSPointerCancel Everything you have for mouse, plus: pointerType pressure rotation tiltX tiltY width height Capture individual contacts to elements: elm.msSetPointerCapture(pointerId); elm.msReleasePointerCapture(pointerId);
  • 30. Touch Events - “Can I Use”
  • 31. Touch Event Demos
  • 32. Simple Google Touch Example function ol() { canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); timer = setInterval(update, 15); canvas.addEventListener('touchend', function () { ctx.clearRect(0, 0, w, h); moving = false; }); canvas.addEventListener('touchmove', function (event) { event.preventDefault(); touches = event.touches; }); canvas.addEventListener('touchstart', function (event) { moving = true; console.log('start'); }); };
  • 33. Simple IE Touch Example function ol() { canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); timer = setInterval(update, 30); canvas.addEventListener('MSPointerMove', function (event) { if (event.button > 0 || event.pointerType == event.MSPOINTER_TYPE_TOUCH) { event.preventDefault(); makeCircle(event.pageX, event.pageY); } }); canvas.addEventListener('MSPointerUp', function (event) { if (event.button > 0 || event.pointerType == event.MSPOINTER_TYPE_TOUCH) { event.preventDefault(); ctx.clearRect(0, 0, w, h); makeCircle(event.pageX, event.pageY); } }); };
  • 34. Touch Event Libraries
  • 35. JQuery UI Touch Events $("#canvas").bind("tap", canvasTapped );  http://api.jquerymobile.com/tap/
  • 36. Kendo UI Touch Events $("#canvas").kendoTouch({ multiTouch: true, touchstart: canvasTapped });  http://http://docs.telerik.com/kendo-ui/api/mobile/touch
  • 37. Touch Library Demos
  • 38. Wrap Up Fast Touch Support Touch Ready Sites Modern browsers are re-imagined to support touch. IE is input device agnostic and provides APIs for using touch events. Well written apps can make the web even faster Touch Standards For the past two decades web sites have been designed for mouse input. Touch is a paradigm shift for web design. Touch API standards are not defined. Requires extra work to support all browsers. 3rd party touch JS libraries provide some cross- browser support.
  • 39. Resources:  http://http://windows.microsoft.com/en-us/internet-explorer/browser- ie#touchweb=touchvidtab1  http://ie.microsoft.com/testdrive/  http://blog.monitis.com/index.php/2011/05/15/30-tips-to-improve- javascript-performance/  http://blogs.msdn.com/b/ie/  http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification  http://www.webplatform.org/  http://channel9.msdn.com/Events/Build/2013/3-071  http://http://docs.telerik.com/kendo-ui/api/mobile/touch  http://www.designyourway.net/blog/resources/jquery-plugins-that-handle- touch-events-43-items/
  • 40. 450 Lincoln Street Suite 101 Denver, CO 80203 719.359.9692 www.aspenware.com Building Fast Multi-Touch Enabled Web Sites Ben Hoelting @benhnet