tips for building fast multi touch enabled web sites
DESCRIPTION
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 capabilitiesTRANSCRIPT
![Page 1: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/1.jpg)
450 Lincoln StreetSuite 101Denver, CO 80203719.359.9692
www.aspenware.com
Building Fast Multi-Touch Enabled Web Sites
Ben Hoelting@benhnet
![Page 2: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/2.jpg)
BenHoelting
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
![Page 3: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/3.jpg)
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/MultiTouchPublic
![Page 4: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/4.jpg)
Touch Support In Today’s Browsers
![Page 5: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/5.jpg)
Hardware Accelerated
Fast
![Page 6: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/6.jpg)
The Power Of The Whole PC
![Page 7: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/7.jpg)
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
![Page 8: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/8.jpg)
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 WebBetter… 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.
![Page 9: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/9.jpg)
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
![Page 10: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/10.jpg)
Today’s Web wasn’t designed with a finger in mind.
Touch Targeting
![Page 11: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/11.jpg)
Dos and Don’ts of Touch Websites
![Page 12: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/12.jpg)
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.
![Page 13: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/13.jpg)
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?
![Page 14: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/14.jpg)
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.
![Page 15: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/15.jpg)
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.
![Page 16: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/16.jpg)
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
![Page 17: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/17.jpg)
DO: provide ample room for your finger
Avg. 11mm
7mm
7mm
2mm padding
Ideal Min Target
![Page 18: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/18.jpg)
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
Inte
racti
on
Tools
![Page 19: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/19.jpg)
DON’T: reinvent touch interactions
![Page 20: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/20.jpg)
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.
![Page 21: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/21.jpg)
Good Touch Sites Demo
http://windows.microsoft.com/en-us/internet-explorer/browser-ie#touchweb=touchvidtab1
http://www.msn.com
![Page 22: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/22.jpg)
Working with Touch
![Page 23: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/23.jpg)
Deep Dive into the IE Touch APIs
Pointer,GestureEvents
CSS Custom Panning, Zooming, and Swipes
Direct Manipulation Pan/Zoom, HTML5 Controls, Touch Targeting
![Page 24: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/24.jpg)
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”)
![Page 25: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/25.jpg)
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
![Page 26: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/26.jpg)
Touch CSS Demos
![Page 27: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/27.jpg)
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>
![Page 28: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/28.jpg)
http://www.w3.org/TR/touch-events/
W3C Touch Events
Events Event Properties
touchstarttouchmovetouchendtouchcancel
clientXclientYpageXpageYscreenXscreenY
![Page 29: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/29.jpg)
Pointer events help make your site have no compromises because they’re hardware agnostic.
Raw Input MSPointer Events
Pointer
Mouse
PenTouch
Events Event Properties
MSPointerDownMSPointerMoveMSPointerUpMSPointerOverMSPointerOut
MSPointerCancel
Everything you have for mouse, plus:pointerTypepressurerotationtiltXtiltYwidthheight
Capture individual contacts to elements: elm.msSetPointerCapture(pointerId);elm.msReleasePointerCapture(pointerId);
![Page 30: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/30.jpg)
Touch Events - “Can I Use”
![Page 31: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/31.jpg)
Touch Event Demos
![Page 32: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/32.jpg)
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'); }); };
![Page 33: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/33.jpg)
Simple IE Touch Examplefunction 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); } }); };
![Page 34: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/34.jpg)
Touch Event Libraries
![Page 35: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/35.jpg)
JQuery UI Touch Events
$("#canvas").bind("tap", canvasTapped );
http://api.jquerymobile.com/tap/
![Page 36: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/36.jpg)
Kendo UI Touch Events $("#canvas").kendoTouch({ multiTouch: true, touchstart: canvasTapped });
http://http://docs.telerik.com/kendo-ui/api/mobile/touch
![Page 37: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/37.jpg)
Touch Library Demos
![Page 38: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/38.jpg)
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.
![Page 39: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/39.jpg)
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/
![Page 40: Tips for building fast multi touch enabled web sites](https://reader034.vdocuments.net/reader034/viewer/2022042713/546ec960af79598c6d8b5dc4/html5/thumbnails/40.jpg)
450 Lincoln StreetSuite 101Denver, CO 80203719.359.9692
www.aspenware.com
Building Fast Multi-Touch Enabled Web Sites
Ben Hoelting@benhnet