Touch is Big

Touch devices have quickly overtaken traditional mouse and keyboard devices (device sales, mobile usage). The current landscape is such that we can confidently assume our visitors will be experiencing our web pages on their phones first and then on their desktops second… if we are lucky.  The tricky thing is, when we speak of touch devices, we are not only referring of small screen devices (like phones and tablets) but we are now talking about all device sizes.

The large device market has been quickly incorporating touch capabilities into large tablet, laptops and desktops. Recently Apple introduced the iPad Pro, joining Google Chromebooks, and Microsoft Surfaces and laptops as large format (typically  11-13” and above) touch enabled devices.

Commonly in Responsive Web Design both designers and developers have used arbitrary size (usually around 750px) for the breakpoint between touch devices and mouse and keyboard devices. This commonly segregates styles and functions giving assumed desktop sizes more robust elements and ignoring considerations for touch.  This practice was not reliable, and is becoming increasingly problematic.

We should avoid hiding content behind hover states that can be finicky on different touch browsers. Ensure that links, buttons, and form elements have a large enough “touch target”  (Luke Wroblewski has a great reference). Interactive elements (like carousels) should accept touch gestures by using plugins like hammer.js and others.  And form fields should utilize specialized virtual keyboards on mobile operating systems whenever possible.
Mobile First Design has become an important part of how we think about the conception of our web pages. More and more we need to remember that these lessons do not end at a certain widths… they are continuous throughout the experience no matter the screen size or device.