Design Considerations
The original SR web page was an HTML form that presents an array of drop-down menu elements, along with several text fields where you can enter information, as in Figure 1. Other fields display explanations that help guide users. The form relies on CSS to provide some styling, and it uses the display property to reveal or hide form elements, depending upon the choices the field engineer makes. The page gathers the information entered (such as the MCU type and the team assigned to the problem) and massages the data into a text-formatted e-mail that the company's CRM system can read. All the engineer does to complete the report is inspect the e-mail for errors, then send it to our CRM system, where the SR is logged into a database and the selected team notified.
My plan was to overhaul the SR's UI because the layout of the web page's elements were made for a large laptop screen, and not for a mobile phone. The iPhone has a 320×480-pixel screen, which is large by mobile phone standards, but still much smaller than a laptop screen. Rather than try to pack everything onto the small screen, I would instead display the array of choices as a list, where each list element serves as a link to a separate page. I wanted the web page's iPhone-based front end to gather the SR information into the same Javascript variables used by the original SR form's back-end scripts. I could then re-use the field-tested back-end functions to reformat the data for the CRM system. Along the way, I expected to contend with the changes in the browser's event behavior, plus any quirks Mobile Safari threw at me.
Some initial tests with simple HTML forms showed that Mobile Safari could present the required text fields and drop-down menus that the SR page used. However, the layout of these forms on the iPhone's screen looked like something you'd see on a desktop browser and not at all like an iPhone app. For the sake of consistency, Apple promotes the idea of having your web page resemble regular iPhone applications as much as possible. Oddly, the company doesn't offer any framework to help you do this.
Because I didn't have the time or expertise to write such a framework, I did the next best thing—I did a Google search for one. It turns out that there are several: the iPhone UI (iUI), originally written by Joe Hewitt and now maintained by Google code (code.google.com/p/iui), the iPhone UI Universal Kit written by Diego Lafuente (www.minid.net/iphone), and WebApp.Net, written by Chris Apers (webapp.net.free.fr). I chose iUI because it's fairly simple, and its creator wrote Firebug, a FireFox add-on that lets you debug Javascript code in the browser (www.ddj.com/architect/196802787).
