Just the other day, I was introduced to yet another addicting Internet game. I have no idea – and quite frankly don’t want to know– how many hours I spent playing this incredibly simple game. I found myself craving this game at all hours of the day – and unfortunately I don’t bring my computer everywhere I go. I can browse the web on my phone, which is always in my pocket, but as we are all aware by now, mobile phones don’t support flash.
In an effort to get my fix, I set out to build a phone-friendly version of the game in JavaScript. In the process of developing my version, I discovered a lot of very interesting things specific to developing for mobile browsers and touch screens.
Some Basic Differences
Phones don’t run Flash. However annoying that is, it is really quite simple to overcome. Nearly everything that is done in Flash – at least in terms of UI design – can be done with the same efficiency in JavaScript. There are a number of other differences between mobile and standard browsing that are equally easy to overcome. Screen size, load times, and another one are among these simple differences.
What really sets mobile browsing apart is the concept of the touch screen. Touch screens can provide a fantastically simple, intuitive UI experience – but things can become extremely convoluted when trying to design for both touch screen and point-and-click devices.
The Finger vs. The Mouse
JavaScript provides a number of event listeners that handle mouse actions:
- onClick – calls JavaScript whenever the mouse button is clicked. This is a combination of onMouseDown and onMouseUp.
- onMouseOver and OnMouseOut – calls JavaScript whenever the mouse hovers (but does not click) over and object.
- onMouseDown and onMouseUp – calls JavaScript when the mouse button is down but not yet released or when the mouse button that is already down is released.
- onMouseMove – calls JavaScript when ever the cursor is moved.
These listeners are everything that you need to build an interactive UI for a mouse, but only onClick translates to a touch screen, and even that is comes with an awkward second or-so delay. This can create some interesting problems interactive content. For example, imagine an animated drop down menu that opens on an onMouseOver event. Touch screens have no cursor, so there is no way for a user on a touch screen to access the sub-menu. This is an all to common problem that I’ve notices while browsing on my phone.
JavaScript has since provided some event listeners specific to touch screens:
- ontouchstart and ontouchend – Registers when a finger touches or is removed from the screen.
- ontouchmove – Calls when a finger that is already touching the screen is moved.
- touches – gathers information about any finger placed on the screen.
- targetTouches – registers finger touches on the same node.
- changedTouches – registers finger touches that call an event.
- ongesturestart and ongestureend – Calls JavaScript when a (multi-finger) gesture is performed.
- ongesturechange – Calls on a finger movement once a gesture has already been initiate.
For more detailed information on registering touching and gesturing in JavaScript, check out this article.
There could be any number of ways to solve the case of the onMouseOver drop down. One of the first possibilities that came to me is to use the time between ontouchstart and ontouchend to differentiate between a click and a hover. If the time was less than, say 2 seconds, the click function would execute, but if it was greater than 2, the hover event would execute. I really have no idea how that would work in practice, but it serves as an example of the kinds of things developers should be thinking about to ensure the best possible UI experience.