HTML5 APPLICATIONS DEVELOPMENT MANUAL (2016)
6 - Touch Interfaces and Gestures
Today’s mobile devices and many PC monitors incorporate touch-screen technology, which makes it easier for many users to interact with the devices and their programs. A simple finger tap selects an object or presses a button, a finger swipe scrolls a list of photos on the screen, and a pinch zooms out on an image.
Any finger move is referred to as a gesture, which can involve a single finger (one-touch, such as press, tap, press and hold, slide to pan, and so on) or a finger and a thumb (two-touch, such as a pinch and stretch or a turn to rotate). The action the application takes in response to a gesture is called a touch event.
When developing any touch-enabled app, be sure to test for the following:
- Overall responsiveness and fluidity
- Tapping, pinching, rotating, and other common gestures
- Controlled scrolling
- Controlled panning
- Ability to disabled scrolling and panning
- Accuracy of snap points
- Unintended zooming or scrolling, especially in a multi-touch environment
- Proper touch event reaction, especially in a multi-touch environment
Designing and developing well-formed touch-enabled apps takes practice, and a lot of testing. If you don’t have a touch-screen device, you can use MouseTouch events and a touch-screen emulator or simulator. Try Microsoft Surface SDK and Runtime for Windows 7, or the Windows Simulator tool in Visual Studio 11. A touch-screen simulator or emulator imitates a system that only has touch capabilities. Several free emulators are available online.