A powerful usability enhancement available to websites displayed on an iPhone/iPod Touch is their ability to access native application services such as Mail, Phone, YouTube, iPod audio/video controls, Google Maps and the iTunes Wi-Fi Music Store. The iPhone’s OS supports passing data from your website to these applications, resulting in a rich user experience which is available exclusively to visitors browsing your website using these devices.

Phone and Mail
Some applications, such as mail, allow you to format your content the same way regardless of whether your visitors are browsing your site from a desktop browser or MobileSafari. In each case, the environment’s OS is capable of properly rendering the mailto: tag and taking the appropriate action.

In the case of Phone support, MobileSafari on the iPhone automatically converts any phone number on your webpage to a phone link. When the user taps a phone link, a dialog appears prompting the user to dial the phone number. If the user taps the call button, the Phone application launches and the phone number is dialed.

If your webpage contains numbers that could be mistaken for a phone number, you can turn off telephone number detection by using the format-detection meta tag, as follows:

<meta name = "format-detection" content = "telephone=no">

Note that when using this capability you can still format phone links using tel: links; however this combination could pose a usability issue to your users.

For example, with format detection disabled, your iPhone visitors can now tap the specially formatted phone number to instantly contact you. However, that same link will throw an error when clicked from a desktop browser. To solve this issue in the event format-detection is necessary, you may consider updating your page to reformat the link using syntax appropriate for each group of users. When using this approach, the traditional desktop viewer will see your phone number formatted as text only, while an iPhone visitor will be able to tap on the linked phone number to call you.

One benefit of the aforementioned interaction is that the OS returns the user to your website when they are done contacting you.

Google Maps
On devices where the native Google Maps application is installed, MobileSafari does not render map links the same way as when viewed from a desktop, though the support is fairly seamless. Properly formatted Google map hyperlinks are automatically passed to the iPhone’s Google Maps application. You can pass location information and directions directly from a link on your website.

This could be highly useful in the near future if combined with the GPS capabilities of the iPhone 3G, for example, allowing your visitors to plot a course from their current location to your store or office simply by tapping a link on your contact page. To illustrate, the following hyperlink will send the Google Maps application on your iPhone directions from Brooklyn to our offices in Manhattan.

<a href="http://maps.google.com/maps?saddr=Brooklyn+NY&daddr=1133+
Broadway,+New%20York,+NY">Getting here from Brooklyn>/a>

Tapping a map link from a device that does not have the application installed redirects the user to the Google Maps website. See this link for more information on formatting google map links.

iTunes Wi-Fi Music Store
The iTunes Wi-Fi Music Store allows iPhone users to preview and purchase songs and albums directly from their iPhone. You can leverage this capability from your website by supporting interaction with the iTunes Wi-Fi Music Store in much the same way content is linked to the iTunes store from a desktop. The iPhone OS supports passing song, artist and album information from your website via specially formatted hyperlinks. This capability can be a very powerful sales tool for musician and artist websites. We’ve written an article, available here, which covers this topic in more detail.

YouTube
The iPhone can also playback H.264-encoded YouTube content, however MobileSafari is unable to render this content when embedded in a webpage (*Edit-This is now supported). When browsing a webpage with embedded YouTube media, MobileSafari instead displays the default blue question mark, representing a non-supported media type.

However, either adding alternate content such as images or text, or passing the data to an application capable of rendering it, the iPhone’s native YouTube application in this case, can be a viable workaround for this usability issue. In order to accomplish this, simply format your content as a hyperlink, as shown below. When an iPhone visitor taps this link on your website, MobileSafari will pass the request to the native YouTube application to render the file.

<a href="http://www.youtube.com/watch?v=QR0oMdUTeUc">Watch the
video in YouTube from your iPhone</a>

To make your current site more iPhone friendly, you could extend this example to check for iPhone/iPod touch visitors and swap out any embedded YouTube videos for the link to the actual file.

With a little planning and minor code adjustments, you’ll be able to seamlessly present this media to iPhone/iPod touch users or other mobile devices, allowing each user to receive the version of the file most appropriate for their platform.

The enhancements of iPhone OS 2.0 will provide many new capabilities for websites built with iPhone viewers in mind. By considering the display of unsupported media and native application support, you will not only solve critical presentation issues, but also enhance your user’s experience in the process.

-Shaun Mackey

(2 votes)

 Loading ...