Creating Responsive HTML5 Touch Interfaces – SxSW 2012
William
In Interaction Design, Mobile, SxSW, Web Design, Web Development Posted March 16, 2012
In the Desktop world devs are often concerned with browsers, their capabilities, and their shortcomings. Differences in browsers account for most of the code changes. In the mobile space, that’s been take care of. Mobile FF, Opera Mini, and Webkit all provide a very similar, up-to-date experience on a wide array of devices.
A new iPhone, however, is just a bad iMac from years ago only with a better resolution screen. The constant memory and hardware constraints need to be taken into account when running mobile web touch interfaces – the browser WILL crash on you.
Touch interfaces are tactile functions. In this way, the user’s brain responds to feedback in a haptic way. Feedback must be continuous and constant to make the user aware of what’s happening. Good rule of thumb is to stop all other actions while touch is taking place.
Interaction Designers must respect new conventions introduced by native mobile systems. Despite the systems being so very young, they are critical. Slide to unlock, pinch to zoom, etc. are all cases of these new conventions in practice over an array of touch devices. By following patterns that users are familiar with, other interaction designers have done, we create a “Social HIG” from which to work in the browser.
Job number one is to prioritize user feedback while touch is taking place. Pause all running scripts while gestures are firing. Stop reading the DOM for actions – this is costly and often times the #1 source of browser crash. Whenever possible use CSS transitions to run touch, they are far less costly than JS.
Because DOM reads are expensive, read once and then consider the DOM to be write-only. Transitions (with easing) are often enough to give the users the touch they were looking for (i.e. swipes). Easing helps ‘snap’ content back and forth, further helping the user. JS will help with edge detection for the easing transitions. Keeping in mind: when the user gestures, the element needs to be moving.
Keep scrolling native, it’s just easier on everyone.
Pinch to zoom requires math. There’s no way around it, but don’t worry, it’s not actual matrix math. Use Matrix Transforms:
transform:
matrix (1, 0, 0, 1, 10, 10)
Where the ones are the scale, the tens are the translation – you need both. Translate the position to original touch point after the scale transform to determine the zoom.
- Determine touch center
- Calculate scale percentage
- Apply scale
- Translate position
Oh, yeah – do all this without a DOM read!
If you have the cash, a giant pile of old devices to test on can’t be beat! Testing on devices is always better than emulators to test touch points.
For Dev tools, use Weinre (Webkit Inspector spoof) or use Adobe Shadow as a wrapper for your page (prototypes).
For progressive enhancement: Feature detect on each device. Build on transitions, don’t depend on them for core functionality. Click should still work – gesturing is still an enhancement. Be able to disable on user-agent detection.
See Also
#SXHTMLtouch
