dannyg.com logoSearch
 
iPhone Web Apps Developer Notes

The following are some notes off the top of my head about my experience designing the Tip Calculator for iPhone. I don't hand these down as precepts that everyone should follow because each application will have different needs and goals. We all have much to learn about developing Web-based applications for this incredible device.

  • What a difference a few days make at the outset of a new technology. The Apple Developer Connection iPhone developer's document, Optimizing Web Applications and Content for iPhone, is now well circulated. The information there is also well-known among iPhone Web app developers, who are communicating their experiences at online communities, such as iPhoneWebDev at Google Groups.
  • Most of my earlier frustrations (sans Apple docs) with scaling and such now seem like ancient history, all of one week later. I have made numerous incremental improvements to my Tip Calculator for iPhone. One of the biggest changes I had on my to-do list was to turn the numeric keypad into an HTML/CSS-only affair, and thus eliminate a many-tens-of-kilobyte download of an image. I went one step further, using some AppleWebKit CSS properties to help fashion more button-looking buttons in the numeric keypad without images and styled real radio buttons (helping remove two more images). Elsewhere, I cleaned up the UI a bit and straightened out the code so that it validates under the XHTML DTD I had chosen.
  • Using the app in real restaurant situations turned up some UI issues that I have addressed, as well. The entry fields are more forgiving of the errant tap, and data entry has accumulated some additional "smarts." There's nothing like testing, eh?
  • Typical form elements create UI problems. For example, in my first Tip Calculator design, I had the "No. of Diners" select element lower in the table. But because Safari/iPhone displays the thumbwheel selector at the bottom of the screen, I didn't like having the control hidden during selection. I moved the select element to the top of the form for the thumbwheely thing to be less intrusive. You can apply style sheets to adjust the dimensions of a select element and font size of text displayed therein. You want select elements to be conveniently tappable. Be aware, however, that these styles do not render in regular Safari—and thus don't appear styled in previews that show up at some sites listing iPhone widgets.
  • I explicitly avoided using text input elements for text input because I wanted only a numeric keypad to appear, rather than the iPhone's native keyboard at the bottom of the screen. Even the native numeric/symbol keyboard has more junk on it than is needed to enter just numbers. By creating my own keypad, I could limit the characters that a user could enter (reducing validation headaches), and be in more control over the experience.
  • Any app that has lots of text input fields will be a hassle for a user, IMHO. Especially in landscape mode, where the keyboard takes up a HUGE chunk of real estate.
  • At this point (version 0.7x), I'm pretty happy with the application, and will probably leave it alone, unless I hear about some specific bugs or a feature request that gets my juices flowing. Enjoy!

Google
Search dannyg.com*   Search WWW
*Search results are displayed on a google.com page, but links from search results bring you back to this site.
To Top of Page
Entire contents Copyright © 1996-2002 Danny Goodman. All Rights Reserved.

Valid XHTML 1.0!