Let's delve into advanced iPhone development tips and techniques that go beyond the basics of my first iPhone development
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.
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.
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.
responds to most of the standard client side events as well as a couple extras. For example, the body element may respond to
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
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).
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
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.
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
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.
Please login to rate or to leave a comment.