How iPhone’s 3D Touch Will Affect Web Development

Apple’s new iPhone 6s is creating quite a buzz with its “3D Touch” feature. In case you’ve been hiding under a rock lately, 3D Touch enables apps to respond to how hard the user presses on the touchscreen. The built-in iOS 9 apps already takes advantage of this feature (enabling users to preview an email with a light touch and opening it with a harder touch, for example), and third-party apps are sure to follow soon.

But what about mobile web?

Clearly, most websites—even those that are optimized for mobile platforms—don’t take any particular advantage of touchscreen interaction. Taps take the place of clicks, and that’s about it. Zooming and scrolling are features of the browser or mobile OS, but have little or nothing to do with individual websites. How will the advent of 3D Touch change that, if at all? And how can mobile web developers take advantage?

The good news is that yes, Apple’s 3D Touch API (also known as Force Touch, from its origins in the iPad world) is available for use with JavaScript. Various force events are available and you can obtain a value corresponding to the level of force being exerted.

So far, so good. But what do you do with it?

This is where the Magic 8 Ball says, “Outlook cloudy.” Smart designers and developers will no doubt come up with cool, creative uses for 3D Touch on websites that even the visionaries at Apple haven’t dreamed up yet. Until then, here are some things that designers and developers need to think about:

  • At this writing, the iPhone 6s and 6s Plus are the only devices that are equipped to detect and measure force level. The older iPhones don’t have it, and no devices from any other manufacturers have it. So at least at first, the portion of mobile users who can take advantage of 3D Touch will be very small. Having a mobile website that is useless without 3D Touch is going to alienate a huge swath of potential users.
  • Websites, therefore, will not only need to be responsive to mobile platforms in general, but to particular mobile OSs and devices, thereby adding a layer of complexity to the design and coding.
  • If and when Android and Windows introduce some equivalent to 3D Touch, they almost certainly will not do so in the exact same way as in iOS, so mobile websites that use the technology will not only become more complex to build, the testing load will increase dramatically.
  • From a design and user experience standpoint, there will be a need for some way to alert end users that websites, or particular objects on a page, are 3D Touch-enabled. Otherwise, users might never know, or discover it only by accident. How do you do that without cluttering up the page, or overwhelming non-3D Touch users with useless (to them) information?

As you can see, 3D Touch, while providing a new dimension for interactivity, also opens up several cans of worms that need to be sorted out. Standards for cross-platform coding and visual effects will need to be developed and agreed upon. New best practices for usability are needed. It’s an exciting time – let’s see where it takes us.