The introduction of the iPhone and subsequent unveiling of the iPod touch revolutionized the way people interacted with handheld... more

The introduction of the iPhone and subsequent unveiling of the iPod touch revolutionized the way people interacted with handheld devices. No longer did users have to use a keypad for screen navigation or browse the Web through “dumbed down” pages. These Apple devices brought touch screen input, a revolutionary interface design, and a fully functional Web browser right into the palms of people’s hands. However, the question in the developer community in the months leading up to the release of the iPhone was: Will Apple allow third-party developers to develop custom applications for this new mobile platform? Apple’s response was one that made Web developers happy and Objective-C programmers sad—iPhone and iPod touch applications would be Safari-based apps that are built using standard Web technologies. Apple opted for this solution as a way to provide developers with the freedom to create custom apps, all the while maintaining control of the user experience of these two devices.

... less

User interface design has been evolutionary rather than revolutionary over the past decade. Most would argue that Mac OS... more

User interface design has been evolutionary rather than revolutionary over the past decade. Most would argue that Mac OS X and Windows Vista both have much more refined UIs than their predecessors. As true as that may be, their changes improve upon existing ideas rather than offer groundbreaking new ways of interacting with the computer. Web design is no different. All of the innovations that have transpired—such as AJAX and XHTML—have revolutionized the structure and composition of a Web site, but not how users interact with it. Moreover, mobile and handheld devices offered a variety of new platforms to design for, but these were either lightweight versions of a desktop OS or a simplistic character-based menu.

Enter iPhone and iPod touch.

An iPhone/iPod touch interface (I’ll refer to it as an “iPhone interface” for short) is not a traditional desktop interface, though it is has a codebase closely based on Mac OS X. It is not a traditional mobile interface, though iPhone and iPod touch are mobile devices. Despite the fact that you build apps using Web technologies, an iPhone interface is not a normal Web application interface either. iPhone is clearly the first groundbreaking UI platform that many developers will have ever worked with.

Because the underlying guts of iPhone applications are based on Web 2.0 technologies, many Web developers will come to the iPhone platform and naturally think they are just creating a Web application that runs on a new device. That’s why the biggest mindset change for developers is to grasp that they are creating iPhone applications, not Web applications that run on iPhone. The difference is significant. In many ways, iPhone applications are far more like Mac or Windows desktop applications—users have a certain look and feel and core functionality that they will expect to see in your iPhone application.

On the Web, users expect every interface design to be one-offs. Navigation, controls, and other functionality are unique to each site. However, when working on a platform—be it Windows, Mac OS X, or iPhone—the expectation is much different. Users anticipate a common way to do tasks—from application to application. Operating systems provide application program interfaces (APIs) for applications to call to display a common graphical user interface (GUI). Since the iPhone does not have such a concept, it is up to the application developer to implement such consistency.

This chapter will provide the high-level details and specifications you need to consider when designing a UI for iPhone. Chapter 4 continues on by diving into the actual code needed to implement these user interfaces.

... less

The previous chapter surveyed the UI standards and guidelines that you need to keep in mind as you design an application... more

The previous chapter surveyed the UI standards and guidelines that you need to keep in mind as you design an application that works well on iPhone and iPod touch. With these design principles in hand, you are ready to apply them as you develop and program your application.

In order to demonstrate how to implement an iPhone interface, I will walk you through a case study application I am calling iRealtor. The concept of iRealtor is to provide a mobile house-hunter application for potential buyers. The current pattern for Internet-based house hunting is to search MLS listings online, print out individual listing addresses, get directions, and then travel to these houses. However, with iRealtor, all of those tasks can be done on the road with an iPhone-based application. The design goals of iRealtor are to provide a way for users to:

• Browse and search the MLS listings of a local realtor.

• Get a map of an individual listing directly from its listing page.

• Access information about the realtor and easily contact the realtor using iPhone phone or mail services.

• Browse other helpful tools and tips.

As you look at these overall objectives, an edge-to-edge navigation design looks like an obvious choice given the task-based nature of the application. Joe Hewitt’s iUI (code.google.com/p/iui/) will serve as the underlying framework for the user interface. iUI is designed to retrieve and format HTML fragments and automatically handle many application events, such as phone rotation. The realtor information will be relatively static, but the MLS listings will need to be database-driven. Therefore, you will take advantage of the AJAX capabilities of iUI to seamlessly integrate listing data into the application.

Note

The initial version of iUI should be used only in iPhone and iPod touch–specific applications. It is not compatible with Internet Explorer, Firefox, and earlier versions of Safari for Mac.

Here’s an overview of the technologies that will be used for iRealtor:

• XHTML/HTML and CSS for presentation layer

• JavaScript for client-side logic

• AJAX for loading data into the application

• PHP or other server-side technology to serve MLS listing data (not included in case study example)

As I walk you through the application, I’ll examine both the custom code I am writing for iRealtor as well as the underlying iUI styles and code that power it. Therefore, even if you decide not to use iUI, then you at least will have a solid grasp on the key design issues you will need to consider.

... less

Like its Mac and Windows cousins, Mobile Safari provides some of the best CSS support of all Web browsers. As you develop... more

Like its Mac and Windows cousins, Mobile Safari provides some of the best CSS support of all Web browsers. As you develop iPhone and iPod touch applications, you can utilize CSS to make powerful user interfaces.

Mobile Safari provides support for several of the more advanced -webkit- styles that are not part of the W3C CSS standard. (A -webkit- prefix is added to the names of these properties.) For a normal Web application, developers will typically stay away from these experimental properties or at least not rely upon them for their application's design. However, because you know that an iPhone and iPod touch user will be using Mobile Safari, you can safely use these more advanced styles as you create your UI.

... less

An essential part of any Web 2.0 application is the ability to respond to events triggered by the user or by a condition... more

An essential part of any Web 2.0 application is the ability to respond to events triggered by the user or by a condition that occurs on the client. The clicking of a button. The pressing of a key. The scrolling of a window. While the user interacts with an HTML element, the entire document, or the browser window, JavaScript serves as the watchful eye behind the scenes that monitors all of this activity taking place and fires off events as they occur.

With its touch screen interface, iPhone is all about direct interactivity with the user. As a result, you would expect any iPhone/iPod touch application you create to be able to handle the variety of finger taps, flicks, swipes, and pinches that a user naturally performs as they interact with their mobile device. However, because of the current capabilities of Mobile Safari browser, you have to work with these interactions differently than what you might expect.

... less

The unique platform capabilities of iPhone and iPod touch enable developers to create innovative applications inside of Mobile... more

The unique platform capabilities of iPhone and iPod touch enable developers to create innovative applications inside of Mobile Safari that go beyond the normal “Web app” fare. Mobile Safari's support for the canvas element opens drawing and animation capabilities in an ordinary HTML page that was previously available only by using Flash or Java. What’s more, deep inside the heart of these two Apple devices lies the best portable audio and video media player that money can buy. As an application developer, you can take advantage of these iPod capabilities by seamlessly integrating multimedia into your mobile applications.

However, once you begin to open up these capabilities of Mobile Safari or the device itself, you need to be sure that you are working with an iPhone and iPod touch rather than a desktop browser. So, I'll start by showing you how to identify the user agent for iPhone and iPod touch.

... less

One of the most intriguing ideas when creating a Web 2.0 application for iPhone is integrating the application with core... more

One of the most intriguing ideas when creating a Web 2.0 application for iPhone is integrating the application with core mobile services, such as dialing phone numbers or sending e-mails. After all, once you break those inside the browser barriers, the application becomes more than just a Web app and extends its functionality across the mobile device.

However, iPhone service integration is a mixed bag; it’s a “good news, bad news” situation. On the upside, perhaps the three most important mobile functions (Phone, Mail, and Google Maps) are accessible to the developer. On the downside, there are no means of tapping into other core services, such as SMS messaging, Calendar, Address Book, Camera, Clock, iPod, and Settings.

In order to demonstrate the integration with iPhone services, you’ll be working with a sample application called iProspector, which is a mocked up contact management system that emulates the iPhone Contact UI. To create the UI, you will be starting with Joe Hewitt’s iUI framework, which is discussed fully in Chapter 3. However, because it does not provide support for the specific controls needed for the Contact UI, this chapter will show you how to extend iUI as service integration is discussed.

Because iPod touch does not provide support for Phone and Mail services, any iPhone-specific integration should degrade gracefully when running on iPod touch.

... less

Oh, the irony. On the same day that I began writing a chapter on enabling Web sites for iPhone and iPod touch, I would realize... more

Oh, the irony. On the same day that I began writing a chapter on enabling Web sites for iPhone and iPod touch, I would realize firsthand the frustration of browsing sites that just don’t work with my iPhone. My boys and I were watching the third quarter of a Monday Night Football game when the electricity suddenly went out because of a town-wide outage. Because my son’s favorite team was playing, he was frantic. What’s happening in the game? Are the Titans still winning? I immediately pulled out my iPhone and confidently launched Mobile Safari in search of answers. But upon going to NFL.com, I discovered that its live updating scoreboard is Flash only. I was left with a gray box with a Lego-like block in its place. I then pointed the browser to the official Tennessee Titans site, only to discover useless Lego blocks scattered across its front page as well. We then spent the rest of the outage scouring the Web, looking for a site to help us.

If you manage a Web site, Apple’s release of iPhone and iPod touch introduce a whole new way of thinking in the design and development of a site. In the past, you could design a minimalist, text-only style sheet for mobile users—fully expecting your normal Web site to be viewed only by desktop browsers. However, expectations of iPhone and iPod touch users are not so modest. They are expecting to view the full Web in the palm of their hands. Therefore, as you design and develop your Web site, you will want to consider the level of support you wish to provide for these Apple devices—whether to offer mere compatibility, device friendliness, or even a design specifically targeting them. This chapter goes over the four tiers of enabling your Web site for Mobile Safari:

• Tier 1: Compatibility

• Tier 2: Navigation friendliness

• Tier 3: Device-specific style sheets

• Tier 4: Dedicated alternative site

... less

Once Apple made the strategic decision to support Web-based applications for iPhone and iPod touch rather than native applications... more

Once Apple made the strategic decision to support Web-based applications for iPhone and iPod touch rather than native applications, optimization emerged as a front burner issue for application developers. With native applications, programmers can code in their personal style, efficient or not, because the actual performance hit is negligible, even on a mobile device like iPhone. What’s more, in a decade where broadband is now the norm, many Web developers have fallen into those same tendencies and allow their sites and applications to be composed of ill-formed HTML, massive JavaScript libraries, and multiple CSS style sheets.

However, when you are developing applications for iPhone and iPod touch, you need to refocus your programming and development efforts toward optimization and efficiency. What makes it different from normal Web 2.0 apps is that the developer can no longer rely on the fact that the user is accessing the application from a broadband connection. iPhone users may be coming to your application using Wi-Fi or a much slower EDGE connection.

Therefore, as you develop your applications, you will want to formulate an optimization strategy that makes the most sense for your context. You’ll want to think about both bandwidth and code performance optimizations.

... less

Because iPhone and iPod touch applications function inside of the Mobile Safari environment, there are two seemingly obvious... more

Because iPhone and iPod touch applications function inside of the Mobile Safari environment, there are two seemingly obvious restrictions for the Web developer: You must live with the built-in capabilities of the Mobile Safari browser; and you need a constant Wi-Fi (or, for iPhone, EDGE) connection in order to run any application.

The truth is that you can get around these limitations by taking advantage of two lesser-known technologies—bookmarklets and data URLs. These technologies have actually been around for years, but they have tended to exist on the periphery of mainstream Web development. However, developers are now reexamining these two developer tools to maximize the potential of the iPhone application platform.

Bookmarklets (short for bookmark applets) are mini JavaScript “applets” that can be stored as a bookmark inside of Safari. A data URL is a technique for storing an entire Web page or application (pages, styles, images, data, and scripts) inside of a single URL, which can then be saved as an iPhone/iPod touch Bookmark. This application-in-a-bookmark can then be accessed in offline mode.

... less

Throughout this book, you’ve focused on building iPhone and iPod touch applications that generally adhere to the edge-to-edge... more

Throughout this book, you’ve focused on building iPhone and iPod touch applications that generally adhere to the edge-to-edge navigation UI model. For example, Chapter 3 used the standard UI model for iRealtor, a home buyers application. Chapter 7 did the same for iProspector, a contact manager. However, not all applications that you wish to create lend themselves to standard navigation lists and destination pages. Just a quick scan of built-in applications on iPhone and iPod touch shows a variety of different UI design models.

This chapter walks you through two case study applications that offer new takes on extending the normal application models. The first application extends iRealtor to provide an iPhone-like photo viewer to display home photos. The second application, WYFFL Online, demonstrates more techniques on converting a standard Web site into an iPhone/iPod touch application. Both of these case studies show you how to extend the iUI application framework for your own custom needs.

... less

Get in, get out. That's the attitude that most developers have in testing and debugging their applications. Few developers... more

Get in, get out. That's the attitude that most developers have in testing and debugging their applications. Few developers look forward to these tasks during the development cycle, and so they want to efficiently get into the code, figure out what's working and what's not, fix any problems, and then move on.

Given the heterogeneous nature of Web applications, debugging has always been challenging, particularly when trying to work with client-side JavaScript. To address this need, fairly sophisticated debugging tools have emerged over the past few years among the developer community, most notably Firebug and other add-ons to Firefox. However, the problem is that most of these testing tools that Web developers have come to rely on for desktop browsers are not yet compatible with the iPhone and iPod touch platform.

Many iPhone developers, unsure of where else to turn, end up resorting to alert() debugging—you know, adding alert() throughout the body of the script code to determine programmatic flow and variable values. However, not only is this type of debugging painful, but it can also throw off the timing of your script, making it difficult or impossible to simulate real world results. While the number of debugging and testing tools are indeed limited right now for Mobile Safari, you still have options that either work directly inside Mobile Safari or emulate Mobile Safari on your desktop. You will probably want to incorporate aspects of both as part of your regular debugging and testing process.

... less