Touchscreens bring new requirements for web design

A new class of devices are becoming more prevalent and these are touchscreen enabled devices. The touchscreen is a very common interface on mobile devices nowadays, mobile phones and mp3 players use them very often. And now with the release of the iPad combined with the upcoming slate pcs of companies like HP, Dell and Asus the touchscreen is growing up. And this has an impact on the design of websites (among other things like application user interface design).

With the growth of these devices web designers need to take care of yet another class of devices.  In this case a new class of devices with a particular input method. Using a finger to navigate and manipulate directly on the screen requires changes. A mouse can be controlled very precisely. But using your finger you can still hit very specific areas — arguably maybe even more precise as a mouse — but the interaction area is much larger. In other words a finger is bigger than a mouse pointer.

Web designer need to take these new class of devices into account when designing new websites. Things they need to consider:

  • Easy to hit buttons for navigation and actions
  • Leave enough space around links to avoid miss clicks using a finger
  • Employ other user interface paradigms in line with touchscreen use:
    • Dragging feels more natural with fingers than with the mouse
    • Gestures for navigation or manipulation of items

Another aspect with touchscreen devices unrelated to the input is that the available screen estate is smaller. This means that website need to be optimized for screens with low resolution. Also these screens are often used in portrait mode instead of widescreen like most laptops and monitors.

Also very important to note is that these devices have often the ability to dynamically change the orientation of the screen. It is possible to catch this event using Javascript and dynamically update the stylesheet to change the screen layout for the chosen orientation.

Touchscreen devices bring new requirements for websites and with the launch of the Apple Ipad it is now time to think and implement optimizations to cope with these devices. In my opinion these devices will become very important for reading and using internet content and web designers need to be ready for them.