Sunday, February 17, 2008

Some Design Considerations When Building A Web App for iPhone/iPod Use

I recently finished a small project that involved optimizing some simple web applications for use on an iPhone/iPod Touch. I won't bore you with the specifics of the project (unless someone asks) but here are some things I learned during the experience:

  • There is no touch analog for click-and-drag (probably because dragging is an action reserved for moving around the page), so drag-and-drops will not work and you cannot select text for copying, cutting or pasting. This means the dragging tools/effects implemented in the various JavaScript libraries (jQuery, Yahoo YUI, etc.) won't work.
  • There's really no way to "hover" over an element with your finger, so any CSS style initiated by hovering will not come into play.
  • Because fingers are less precise than a mouse cursor, you have to make sure there is enough space between different clickable elements (links, checkboxes, etc.) so that the user can easily click only on what they want to click on. So if you have a vertical list of hyperlinks, you may want to put at least one line of space between them.
  • When you click on a text field, textarea, or select box, the page zooms in and either a keyboard or a list of drop-down choices appears at the bottom of the screen. Once you make your choice/enter your text and tap the "Done" button, the zoom doesn't reverse, so you end up still focused on the input element. That means if you have a submit button off to the left or right, you have to tap and scroll the page to it in order to tap it. If your application is designed to be viewable in the iPhone/iPod without the need for zooming, you might be able to negate this effect by disallowing all zooming (haven't tried this yet).
  • Selecting a choice from a drop-down box does not fire off the onChange JavaScript event for that box, probably because the action is intercepted in order to allow the iPhone/iPod to do the actions described in the previous bullet. The onChange event for text boxes might be similarly affected.

No comments:

Post a Comment