Introduction

If you haven't gotten your hands on an iPhone yet, you owe yourself some tinkering time even if you don't plan to blow your hard earned paycheck on such an expensive device.  Keep in mind that - like all technology - the prices will come down relatively rapidly.  It's a virtual certainly that eventually everybody will either have one or they'll be using similar copycat devices that are bound to join the competition in time.   The touch sensitive interface means you may want to think a bit differently about software development.  The future is a place where mice and physical keyboards may become scarce.  Read on to find out how software is developed for the iPhone and learn about the major implications that the iPhone has for the future of web and software development.

The Big Picture

The iPhone is always connected to the World Wide Web.  When it's not taking advantage of local WiFi hotpots for a full throttle experience, it falls back to AT&T's respectably fast wireless EDGE network.  This means that developing for portable devices no longer has to mean building occasionally connected, miniature, underpowered user interfaces.

Instead, developing software for the iPhone is essentially the same process as building a web site.  The iPhone's built-in web browser is not only an amazingly fun and useful way to surf the Internet, it's also the gateway for all custom iPhone applications.  It is so good at displaying standard web pages that you may never need to develop an application specifically for the iPhone.  Your iPhone users can likely use your pre-existing web applications with few, if any, problems.

Figure 1: The iPhone displays real, complete web pages in all their original glory.  Zooming, scrolling, and navigation are easy.

Going on Safari

Just when Microsoft's Internet Explorer team thought they had their hands full with the increasing competition from Firefox, along comes Safari with a stunning blow. 

The Safari web browser used to be largely ignored by web developers. It was generally considered a high priority only if the web site specifically targeted Mac users.  With the recent release of Safari for Windows and the Safari browser that's built into the iPhone, Safari is suddenly a major player in the browser market and can no longer be ignored. 

Most web pages display flawlessly by default on the iPhone. I've surfed countless web sites with few problems.  Nevertheless, if you want to develop an application specifically for iPhone users, then it can certainly be done with carefully crafted HTML output.  Feel free to continue using your current web development tools such as Visual Studio and ASP.NET for iPhone development since they emit the standard HTML that the iPhone craves.

Another approach is to enhance your existing web applications with iPhone support.  With a couple lines of code you can sniff out the iPhone users and present a modified user interface to them. The following VB.NET function returns true if the current user is surfing your site using an iPhone:

As you might expect, there are a few Safari features that couldn't make it into the iPhone version, mostly as security precautions.  There are also some sizing issues worth contemplating when designing apps for the iPhone's uniquely small (yet sometimes seemingly huge) user interface.  Luckily Apple has provided some custom browser extensions that developers can use to help massage any kinks that may pop up.

Size Matters

The iPhone's native resolution is 320x396 pixels when held upright in portrait mode.  But that doesn't necessarily mean you need to develop your iPhone pages at that resolution since the iPhone scales pages amazingly well.  You can embed meta tags in a page's HTML to give the iPhone clues about how the page is sized and how its viewport should be allowed to scale:

To gain a little extra vertical space, you can scroll the browser's address bar off screen upon page load with a line of JavaScript such as this:

To detect when a user has rotated their iPhone from portrait to landscape (or vice versa) you should be able to use the window.onresize event.  However, a bug currently prevents that event from being fired reliably.  So for now, the only known workaround is to repeatedly poll the window.innerWidth property from JavaScript to see if it's changed.

Look Matters

One of the biggest things you can do to make a web page more usable for iPhone users is to make input elements larger.  For example, a standard sized button works fine for a mouse click, but the relatively fat size of a person's fingertip benefits from a larger target.

Elements can be made more attractive and usable in other ways.  For example, the iPhone will automatically convert hyperlinks that contain telephone numbers into hot spots that automatically dial that number when clicked.  This assumes the iPhone recognizes the link as a phone number.  To ensure the iPhone will recognize the link as a phone number, format it like this:

For an input field that is intended to accept phone numbers, zip codes, or any other numeric input, you can ensure that the iPhone's numeric keypad automatically appears when that field gets focus instead of the usual text entry keyboard.  This is done by putting the strings "phone" or "zip" somewhere within the input element's name attribute, like this:

Safari also supports a variety of custom CSS extension tags that are not currently part of the HTML standard. These webkit styles allow unique effects such as the ability to render checkboxes that look like buttons, glowing effects, and a wide variety of other experimental abilities that you may wish to tinker with.

What's Supported?  What's Not?

While the iPhone version of Safari does have a few limitations of which you should be aware, these limitations are surprisingly few and far between when compared with the capabilities of other so-called ‘internet enabled' devices.  Most notable is the iPhone's lack of support for Adobe Flash.  This is due to the fact that plug-ins and downloads of all kinds are prohibited on the iPhone.  Unfortunately this also rules out Silverlight as a development option.  The iPhone's included PDF support is a notable aberration.

Most standard JavaScript events are supported. However, there is no support for drag or hover events since there is no mouse.  For the same reason there are also no tooltips.

My initial tests of ASP.NET AJAX found that it worked perfectly for the iPhone, allowing me to create cutting edge Web 2.0 applications.  However, when I installed Apple's first update for the iPhone - containing security updates for the embedded Safari browser - the ASP.NET AJAX UpdatePanel stopped working.  This frustrating development broke much of the code I'd written.  I hope Microsoft or Apple will fix this problem soon.  I've notified Microsoft of the problem and they are currently looking into it.

Summary

The iPhone's ultra-rich, always connected browser environment is destined to redefine the way mobile device applications are built.  A few touches of an iPhone is all it takes to convince virtually anyone that they are experiencing the future of user interfaces.  A new wave of web application software is forming, so I suggest you hop on and surf it to success!

References

• 10 Tips for Developing iPhone Applications
• Optimizing Web Applications for the iPhone
• iPhone sample code (a puzzle game)
• Webkit CSS styles
• Safari for Windows download

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 ... View complete profile