Introduction

Let's delve into advanced iPhone development tips and techniques that go beyond the basics of my first iPhone development article.

Once you've decided to ensure your content is accessible via iPhone (and thus the iPod Touch) you'll need to contemplate the different ways this can be done. Essentially there are 3 different levels of iPhone support to which you could aspire:

Compatible: Test an existing web site on the iPhone and make any minor tweaks necessary for basic display.

Optimized: Create an alternate user interface (for some or all of an existing web site) that has been created with the iPhone in mind.

Application: Create a new web application intended specifically for iPhone users.

Each level is more challenging to implement than the one before, and each provides a better iPhone user experience than the one before. Let's delve into each level in more detail.

Compatible

If you have an existing web site, you might first decide to ensure it is simply iPhone compatible. This is generally an easy bar to reach since most web sites developed using modern web development techniques and standards (such as HTML 4.0.1 and XHTML 1.0) are already iPhone compatible. The iPhone with its built-in Safari web browser is clearly the best handheld web surfing device ever created. Users can easily zoom in & out, and scroll around intuitively to view virtually every web site on the Internet.

To ensure your site is iPhone compatible, obviously you'll need to test it with an iPhone - or at least an iPhone simulator.

Some issues you may run into are the iPhone's lack of support for plug-ins such as Flash, ActiveX controls, and Silverlight. The iPhone also has only limited support for various file types. Aside from the supported image file types (GIF, PNG, JPG, & TIFF) the iPhone supports the display of only QuickTime, PDF, Text, Excel, and Word files. (Word and Excel files are automatically converted to HTML for display.) The old fashioned WAP/WML cell phone standard is not supported (or needed) on the iPhone.

Once you've ensured your pre-existing web site is iPhone compatible, you might choose to take the extra step of optimizing some of all of its content for improved display on the iPhone.

Optimized

While users can view large web pages by zooming & scrolling, it's preferable to display content to iPhone users in ways that do not require them to do so. To accomplish this goal you may want to design user interfaces that fit nicely within the iPhone's native resolution of 320x480.

Sites optimized for the iPhone often detect iPhone users (via the browser's user agent string) and apply alternate CSS or even redirect users to a completely different (iPhone optimized) version of the page.

For example, the standard home page of the popular movie site Fandango displays just fine on the iPhone, but the iPhone optimized version is even more convenient since it is sized in a way that does not require users to zoom or scroll at all. If you navigate to Fandango's home page with an iPhone you'll automatically be redirected to their iPhone optimized version of the site, as shown below:

Figure 1: Fandango has an iPhone-optimized version of their popular movie web site.

The iPhone's built-in Safari web browser has rich JavaScript support and responds to most of the standard client side events as well as a couple extras. For example, the body element may respond to the iPhone's onOrientationChange event, which is fired whenever the user rotates their iPhone (e.g. from portrait to landscape.) The related window.orientation property will be set to 0, 90, -90, or 180 to represent each of the 4 orientations a user may hold their iPhone. An iPhone optimized site may take advantage of this event to rearrange content appropriately whenever the user rotates their phone.

Sites that aspire to be iPhone-optimized should also take available bandwidth into consideration. While iPhones are often connected to blazingly fast WiFi connections (up to 54 Mbit/second) there are other times when remotely located users may only have a trickle of EDGE network access (which normally varies from 70 to 135 Kbit/second and bursts up to 200 Kbit/second.) Considering that the iPhone also has limited memory available for caching, it is clear that unnecessarily large page resources should be avoided. For example, if your page uses only a few functions from a large JavaScript library file, it may be better to extract those functions into their own (smaller) JavaScript file and reference that instead. Similarly, an 800x600 resolution image will never be displayed at that size on the iPhone so it's best to shrink it and reference the smaller version of the image. Better yet, get rid of the image completely if it is reasonable to do so. Also be sure to enable server side compression in IIS (or whichever web server you're using).

Application

Web Applications that have been designed specifically the iPhone typically implement cutting edge technologies such as AJAX to improve usability responsiveness. (If you plan to use Microsoft's ASP.NET AJAX development platform, you should ensure that your iPhone users have upgraded to at least version 1.1 of the iPhone firmware.)

Since such applications usually don't have to worry about being cross browser compatible, they are free to take advantage of Safari-supported CSS styles that are not yet part of the HTML standard. These webkit styles can be used to display rounded corners, shadows, and colorful buttons so that bandwidth (and memory) hogging images can be avoided.

Common user interface patterns also tend to be implemented to display standard looking lists that iPhone users will find familiar. When users select an item in the list, standard looking animations are implemented to slide content into place (often using JavaScript timers for the animation.)

Applications designed for the iPhone also tend to take advantage of the client side Canvas object to implement advanced animation techniques. The Canvas object is supported by every major browser except Internet Explorer (although a plugin is available to add Internet Explorer support.) This can be a reasonable alternative to Flash and Silverlight.

Apple has assembled a showcase of iPhone applications that were created by developers from around the world.

Conclusion

I encourage you to explore iPhone applications that others have made to give you a better idea about what is possible. I also encourage you to explore the development resources listed below to learn further details about advanced iPhone development techniques.

References

• Developing for the iPhone
• iPhone Simulator
• My iPhone Applications
• Apple's iPhone Applications List
• Apple's iPhone Development Tips
• iPhone Dev Center
• Webkit Reference

About Steve Orr

Steve C. Orr is an ASP Insider, MCSD, Certified ScrumMaster, Microsoft MVP in ASP.NET, and author of the book “Beginning ASP.NET 2.0 AJAX” by Wrox press. He’s been developing software solutions for leading companies in the Seattle area for more than a decade. When he’s not busy designing software ... This author has published 9 articles on DotNetSlackers. View other articles or the complete profile here.