3D Touch Gestures - What does it mean for web design?

In recent weeks Apple announced a variety of new devices including the iPhone 6s, a refreshed Apple TV and the long awaited iPad pro with a 12.9” display. Apple has always been at the forefront of technology and while some features do take a while to reach their platform before Android, there is no denying that they are still the very best technically and aesthetically.

Today, we take a look at how these new devices will work with existing responsive websites and we also look at a great new User Interaction feature (UI) called 3D Touch.

iPad Pro and it’s Mammoth 12.9” Screen

This new Apple device could really pave the way for some fantastic applications. While the display is massive, it has the perfect space for two iPad Air devices running alongside each other. With iOS9’s amazing multi tasking abilities, this seems like a no brainer for power users.

In terms of Web Design, responsive designs should in essence work a treat in either dual browser mode or as a single entity, that is of course if your designer had the foresight to create a responsive layout for Super HD screens. We as a company have been incorporating HD Retina ready responsive web designs for a couple of years now and have really future proofed in that regard.

The iPad pro offers a new keyboard accessory as well as the Apple Pencil; a stylus that even Steve Jobs described the class of accessories as “Yuk!”. Whether it really aids certain professionals such as graphic designers remains to be seen. That said, you can't take away the fact that for graphic designers and artists it's a fantastic tool, especially with its pressure sensitive tip.

3D Touch/Force Touch Gestures

The new iPhone 6s is the first apple device to feature a brand new gesture - 3D touch (or sometimes referred to as Force Touch in other devices). The multi touch invention by Apple revolutionised the phone and tablet market with intuitive gestures such as the pinch and zoom. We see 3D touch as the next evolutionary step in mobile and tablet UI.

How do you use 3D Touch

The 3D touch gesture responds to pressure when using your fingertips on the screen. With a combination of pressure and duration, new prompts are presented to the user. This inherently means that actioning certain tasks are quicker and more intuitive than before.

Apple’s demonstrations show an extensive level of gestures placed into their latest OS such as previewing mail items or application information from the home screen. In addition app developers now have the ability to place such gestures into their own applications.

How does it work?

Underneath the retina display a special pressure sensitive layer monitors microscopic changes in force applied. There’s no doubt that it’s an amazing achievement considering how high tech the displays have already become. Incorporation of multiple high technologies is no easy task when it comes to manufacturing.

Will we see it in web design?

There’s no doubt that force gestures are the future of intuitive User Interaction, but there are a number of hurdles that need to be overcome. Firstly, force gestures are very new and only Apple’s latest MacBooks and iPhone offer support. As we know with any new technology you have to wait some time before you can use it effectively. That’s the first real problem we have is the ability for browsers to support it as well as supporting it effectively. We all know that using JavaScript or HTML5 just doesn’t have the same level of fluidity as native Apps. It’s up to Apple to support them better and perhaps even look at adding custom browser enhancement frameworks to Safari. That in itself presents a problem as the lack of an industry standard means that additional work is required to support each device or software. By not having a standard in place, it becomes harder for developers to utilise those functions, which in turn could result in higher development costs.

The other option is to optimise HTML5 and JavaScript engines to work better to rival that of native apps. It’s quite a few years off before we can start using force gestures in websites mainly due to the limitations that are currently in place.

What could we use it for in websites?

From a desktop or tablet perspective, 3D touch isn’t going to set the world alight as there’s plenty of screen room already. In responsive mobile versions of websites, web designers are always challenged with trying to omit certain functionality to keep usability at it’s highest. With 3D touch we can essentially hide elements and have more room for information that doesn’t require user interaction.

The process of moving to such gestures is going to take time with technology and infrastructure being the limiting factors. As time goes on, the user will adapt and force gestures will be an expectation in all mobile applications.