Safari Reference Library Apple Developer
Search

Content on iPhone: Is It a Webpage or an Application?

As you prepare your web content to display successfully on iPhone, you face a decision. Should you modify your webpage (if necessary) so that it looks great on iPhone or create an iPhone web application? Before you make this decision, you need to understand what distinguishes a webpage and an iPhone web application. This chapter defines three types of third-party content that users can access on iPhone and outlines some of the steps you take to develop them.

You should read this chapter if you’re considering how to display your web content on iPhone. After you decide what type of iPhone content you want to deliver, be sure to read “Design for Your Users” to gain insight into this first important step in the user experience and user interface design process.

Types of iPhone Content

When is a webpage an iPhone web application? It may be that the best answer is “when the user thinks it is.“ But when it comes to design and development and the choice of appropriate metrics, guidelines, and techniques, that answer isn’t very helpful. In a document that provides material help to developers, such as this one, definitions are required for clarity and disambiguation, even if they might seem a bit arbitrary.

As described in “Safari on iPhone,” Safari on iPhone provides the interface for all web content on iPhone. Not surprisingly, therefore, the way a webpage works in Safari on iPhone determines how the page is defined.

This document distinguishes three types of webpage. The first type is a W3C (World Wide Web Consortium)–compliant webpage in which all elements display and operate as designed, with the exception of any elements that rely on unsupported technologies, in particular, plug-ins, Flash, or Java. This type of webpage is referred to in this document as compatible with Safari on iPhone. Webpages that are compatible with Safari on iPhone display successfully on iPhone, even if some content is missing or the missing plug-in icon is displayed (Figure 2-1 shows this icon). However, the user interface of a webpage that is compatible with Safari on iPhone does not necessarily take into account the iPhone user interaction model (described in “The iPhone User Interaction Model”) and may require users to pan and zoom extensively.

Figure 2-1  Safari on iPhone displays the missing plug-in icon when third-party plug-ins are present

The second type of webpage is a W3C compliant–webpage that displays and operates as designed, correctly scales content for the iPhone screen, and has no elements that rely on unsupported technologies, in particular, plug-ins, Flash, or Java. Often, this type of webpage is designed to detect when it is being viewed on iPhone and adjusts the content it provides accordingly. This document refers to this type of webpage as optimized for Safari on iPhone. Webpages that are optimized for Safari on iPhone may integrate with built-in iPhone features and services, such as email and phone, where appropriate.

In addition to meeting the requirements for a webpage that is optimized for Safari on iPhone, the third type of webpage provides discrete functionality to users and is often implemented using modern web technologies, such as AJAX. This type of webpage is referred to in this document as an iPhone web application. An iPhone web application emulates built-in iPhone applications by providing a focused solution to users, integrating with iPhone features and services where appropriate, and minimizing the user’s awareness of the browser experience.

Even though, at the implementation level, all three types of iPhone content are webpages, it’s helpful to be able to discuss an iPhone web application as something different from a webpage that is compatible with, or optimized for, Safari on iPhone. This is because users have expectations of an application that are different from those they have of a webpage, which means that some user experience and user interface design guidelines are better suited to an application than they are to a webpage.

Decide How to Position Your Content

If you followed standard website design and implementation best practices when you developed your web content, it’s likely that your content is at least compatible with Safari on iPhone. Now, you need to decide if you want to optimize your webpages for Safari on iPhone or use your content to create an iPhone web application. To help you make this decision, this section elaborates on the main attributes of an iPhone web application, as defined in “Types of iPhone Content.”

Most importantly, an iPhone web application provides a focused solution to a well-defined problem: Users prefer an application that performs one task perfectly to an application that tries to perform many tasks but excels at none of them. This is especially true for iPhone web applications, because users expect to accomplish things quickly on iPhone and they don’t want to waste time either figuring out what an application does or wading through unnecessary functionality. For example, the built-in Weather application (shown in Figure 2-2) displays a focused, easy-to-understand answer to the question “What's the weather forecast for my chosen location?“.

Figure 2-2  The built-in Weather application focuses on a single task

If you can easily identify the primary task your webpage performs, you should consider developing an iPhone web application that offers that functionality to users. For example, if the primary purpose of your webpage is to aggregate information on a single topic, you could design an iPhone web application that presents that information in a way that looks at home on iPhone.

If, however, your website includes a combination of different functions and types of information, you have two options: You can optimize it for iPhone or you can create an iPhone web application using only one feature of your content. For example, a website that displays an up-to-date list of bestselling novels, provides news about authors and book reviews, hosts book discussions, and allows users to order books has a unifying theme but no single purpose. However, an iPhone web application that allows users to order a book from a list of current bestsellers would be a focused and useful application. Another possibility using this example is an iPhone web application that allows users to keep track of a personal reading list, adding new books and checking off others when they’re finished.

If you’ve decided to design an iPhone web application, it’s worth revisiting the main attributes of iPhone web applications. Specifically, an iPhone web application emulates the look and feel of built-in iPhone applications in three ways:

Design for Your Users

Before you begin to work on your iPhone web application, be sure you know precisely who your users are. Although you may have defined the functionality you want to provide, if you don’t know who your users are and how they’re likely to use your product, it’s very difficult to deliver that functionality appropriately. Understanding your users is an important requirement for designing a successful website, but it is even more important for designing a successful iPhone web application. This is because, to be useful, an iPhone web application must deliver a focused solution to a well-defined problem.

As you begin to design your product, therefore, spend some time defining your user audience: Are they experienced or novice, serious or casual, looking for help with a specific task or looking for entertainment? Knowing these things about your users helps you customize the user experience and user interface to their particular needs and wants.

When you design a webpage or application for iPhone users, you already know a lot about them. For example:

If you’re designing a webpage (as opposed to an iPhone web application), this may be all you need to know about your audience. In addition to ensuring that your webpage is at least compatible with Safari on iPhone, you should concentrate on building in as many of the characteristics of great iPhone content as possible (see “Principles and Guidelines for Creating Great iPhone Content” for advice on how to do this).

If you’re designing an iPhone web application, it’s appropriate to go further in defining your audience and ask yourself what traits might set your users apart from all other iPhone users. Are they business people, teenagers, or retirees? Will they use your application at the end of every day, every time they check their email, or whenever they have a few extra moments? The more accurately you define your audience, the more accurate are your decisions about the look, feel, and functionality of your user interface.

For example, if your application helps business people keep track of their billing time, your user interface should focus on making it easy to enter times and rates, without asking for a lot of details that aren’t central to the task. In addition, you might choose a subtle color palette that appears professional and is pleasant to look at several times a day.

Or, if your iPhone web application provides entertainment to a target audience of teenagers, you might instead want a user interface that is exciting, language that imparts a feeling of exclusivity, and a color palette that evokes current fashions.

Finally, examine the set of features you intend to deliver. With the image of your user audience in mind, try to distill the list of features into a single statement, a product definition statement, that describes the most important functionality of your product and how it benefits your users. For example, the built-in Calendar application (shown in Figure 3-4) is an easy-to-use tool that allows users to see dates and associate events with specific days. The product definition statement for this application could be “A date and event tracking tool for all users.“

As you design your content, use your product definition statement to help you decide which features are critical (and should be prominent) and which are secondary. It’s especially important to eliminate those features that don’t support the product definition statement, because iPhone web applications have no room to spare for functionality that isn’t focused on the main task.

Imagine, for example, that you’re thinking of developing an iPhone web application that people can use when they shop for groceries. In the planning stage, you might consider including a wide range of activities users might like to perform, such as:

However, you believe that your users are most concerned with remembering everything they need to buy, they would like to save money if possible, and they’re probably in a hurry to get home with their purchases. Using this audience definition, you craft a product definition statement for your application, such as “A shopping list creation and coupon-finding tool for people in a hurry.“ Filtering your list of potential features through this product definition statement, you decide to focus primarily on making shopping lists easy to create, store, and use. You also offer users the ability to find coupons for the items on their list. Even though the other features are useful (and might become primary features of other applications), they don’t fit the product definition statement for this application.



Last updated: 2010-01-29

Did this document help you? Yes It's good, but... Not helpful...