Back to Blog

Touch-based web app design problems

Fri, 27 Sep 2013, by Syrsly

I attended a course on mobile web design and it got me thinking about the compatibility of the web with touch-based devices. Touch-based devices do not have the same design issues, but that difference creates a more complex overall design challenge. How do we target both touch-based and mouse-based devices?

Advantages of mouse-driven design

  1. Mice can hover over elements. Hover effects are often taken for granted, but on the web, that feature is very useful, because it allows certain screen elements to only take up space when the visitor needs to see them. There are some workarounds for designing without hover effects, and hover effects are often used poorly, anyway, but designing without hover effects makes the amount of interactive possibilities for the web less varied.
  2. Mice can more easily traverse small screen elements and therefore allow for much more data and visual stimuli to be presented on the screen at once. On the other hand, if designing for touch-based and mouse-based devices, you will have an easier time scrolling through the content using a mouse wheel than you will holding and dragging the screen with your finger. Therefore, not only is mouse-based design easier on screen real-estate but it is also useful for traversing larger pages.
  3. Mouse-based devices tend to have larger resolutions with larger screens. As screens get cheaper, touch-based screens will always be more expensive and therefore be smaller than traditional screens. The larger screen means tinier elements will be easier to read from a distance and the screen may support a higher resolution, and the higher resolution means more screen real-estate for a web page design.

Advantages of touch-based design

  1. Mice can click and drag, and so can touch-based devices, so any design that is for touch-based devices will work for a mouse, as well... as long as we are not using gestures or multi-touch.
  2. Mobile web has always been mostly keyboard-based and only recently started entering the tablet space. Thanks to touch-based phones becoming popular, we no longer have to design web sites to be keyboard accessible. However, I would hardly call this a good idea. It is simply an advantage of the trend. Traditional computer users still use their keyboards to navigate scroll bars and drop-down lists and form elements. However, most of that functionality is already taken care of for you by the web browser.
  3. Eventually, this trend of touch-based devices getting bigger will end with everyone utilizing computers with phone features being a standard add-on service, and screen size will be even more varied, so supporting touch-based devices now and allowing your sites to be flexible will benefit you in the future, as well.

Methods to handle both types of design

  1. Utilize a different subdomain or subdirectory for each type of device or interface. Perhaps use m.domain.com to handle your mobile site and www.domain.com or just domain.com for the regular version of the site. You could utilize the same database and basic logic for both interfaces but build the pages in a different way.
  2. Design an interface that looks different at different resolutions using clever CSS tricks and possibly some JS effects. The key to accomplishing this is to use more than one style sheet. You could have a mobile style sheet and a non-mobile style sheet. The problem with this is there is not a reliable way to check what kind of device the visitor is using.
  3. Design a generic layout that scales appropriately for any resolution and looks practically the same on all devices. Do not rely on hover effects to signify that something is clickable, because mobile devices and touch-based devices will not support such functionality. You could include hover effects as an extra effect for traditional viewers, though.

Cautionary tales of web design

  1. Use JavaScript sparingly. A lot of web sites not only utilize JS but rely on it for practically everything, meaning that they may appear to be blank pages to some users, especially those users who like to disable JavaScript or use NoScript or some kind of ad blocker. You should design your web interfaces to only rely on JavaScript where it is necessary, if at all.
  2. Try not to design for fixed widths. Make your designs flexible. Refrain from maximum widths unless you are concerned for readability of paragraphs, in which case I suggest scaling the font size and line height with CSS.Minimum widths are useful for certain types of elements but should be avoided as well, because mobile devices tend to have very small resolutions. I recommend using percentages to control the width of almost all screen elements.
  3. Remember to make a print-friendly version of your design. Many sites do not do this, but it saves on ink when visitors want to print out your articles or whatever other data you may provide. The trick is to have a separate CSS file for print. Most browsers support print versions of your CSS. Alternatively, you could make an RSS feed.