Touch screens

Orde Saunders' avatarPublished: by Orde Saunders

A few years ago touch screens were typically associated with phones, and thus small hand held devices. However, they have now become universal even at the bottom end of the price range for laptops and monitors.

This expansion of touch screens is mainly due to Windows 8 - most consumer laptops and desktops come with it installed and, whilst it can be a bit awkward to use at times, it is significantly improved when coupled with a touch screen. The conspicuous gap in the market is now Apple's OS X devices, if that's all you use then you're losing touch (no pun intended) with where the consumer market is heading.

This is a collection of devices with touch screens that are all capable of browsing the web. None of these are more than 18 months old and, the watch aside, you could reasonably expect to find them - or at least something similar - in the analytics of any reasonably sized consumer website.

Touch screens

DeviceViewport physical size (mm)1Viewport size (pixels)2
LG G Watch30x30187x187
BlackBerry 990058x39356x206
iPhone 5S55x82320x460
Galaxy Note 270x119360x615
Kindle Paperwhite90x102758x897
Nexus 794x140600x887
Dell XPS13 laptop290x1601904x1079
1080p Monitor509x2801904x1079

Looking at the physical and pixel browser viewport sizes it's just not possible to make any meaningful generalisations. Combine that with the other input methods across these devices - keyboard, mouse, touchpad, hardware buttons, trackball, voice, Bluetooth remote &c. then the only safe thing we can do is assume that every screen has the possibility of being a touch screen.

Even if you don't have or want touch screens on all your devices they are now becoming ubiquitous in the consumer space: if your users are using them then you need to understand how they work as an interface and the only meaningful way to do that is to actually use them.

Footnotes

  1. As measured by me with a tape measure. This is the physical size of the browser viewport when taking up as much of the screen as possible - e.g. full screen mode, scrolled to hide browser chrome &c.^
  2. As reported by jQuery's $(window).width() and $(window).height() when taking up as much of the screen as possible.^