In considering how web sites can interact with the iPhone, we can consider five broad definitions for levels of support:

Incompatible: These are sites that do not work on the iPhone because they require the use of Flash, SVG, or other plugins that are not supported, or because they rely on certain embedded media players.

Compatible: Most websites should just work with the iPhone. Thus, If a website doesn’t have any of the incompatibility problems noted above, it is technically compatible though it may look awful, have fonts that are too small to read except at high zoom, or have other issues.

Friendly: There are a variety of simple techniques that a website can use to help an iPhone display them. These include:

  • Informing the iPhone of the viewport size of the overall page.
  • Having columns no wider then either the 320px width (for upright view) or 480px (for sideways views).
  • Breaking columns up into more appropriately sized blocks.
  • Offering the iPhone some style tips on font size handling.
  • Using the appropriate links that the iPhone supports.
  • Optimizing Quicktime files.

Optimized: It is possible to have a different CSS file for use by the iPhone, or to detect the iPhone in the http headers and offer completely different web pages. The iPhone supports CSS3 and some of the special graphic capabilities that both Safari 2.0 and 3.0 support (called Canvas). There are a lot of other features that probably can be offered when you know you are running on a webkit browser.

Webapp: The final category are those web sites that try to emulate the functionality of the built-in iPhone applications. These web pages limit the size of the page to 320×480px (or 480×320px), make extensive use of Canvas, and use a lot of AJAX functionality.
Some developers are happy to use iPhone specific functionality, producing apps (or at least UI branches) which only work on that platform, while others are more interested in producing apps that will work on a variety of mobile platforms, including the next-generation webkit-based webphones which will likely follow the iPhone to market. When designing an iPhone webapp you should be aware of the advantages and disadvantages of either approach.

Resources to make a friendly or optimized site for iPhone

There are different techniques which we can improve the iPhone user experience on our site, the first one is to define the size of the Viewport of the page. The Viewport refers to the area where it will be shown the document (in the case of iPhone, the display of 320 × 480px).

The Viewport is typically used for the iPhone will be:

<meta name="viewport" content="width=320; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=1;"/>

The next step we will be to detect if the user agent is an iPhone and edit the page or the CSS that we have generated. For do this, we get from the HTTP headers, as this example in PHP:

if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
/* iPhone user */

or in eBDML (eBD Platforms):

<eBD:IF EXPR="#[eBDRequest.UserAgent] =~ /iPhone/">
 /* iPhone user */

We may also use an expression for the iPhone CSS3 use another style sheet:

<link media="only screen and (max-device-width: 480px)"  href="iPhone.css" type="text/css" rel="stylesheet" />

By sending a special CSS for the iPhone, we think that our style is quite simple and readable, avoid saturating the elements, and make links large enough so that the user does not have trouble following them. Always take into account the size and the actual area of content available on Safari.

Our next step is to learn to use some special links that the iPhone recognizes javascript events we can use the fonts available, and probably MobileSafari file types can handle, for example:

Fonts on the iPhone:

  • American Typewriter
  • Arial
  • Arial Rounded MT Bold
  • Courier
  • Courier New
  • Georgia
  • Helvetica
  • Helvetica Neue
  • Marker Felt
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Zapfino

See web development for the iPhone page  for more information.

iUI: a framework to develop a webapp

If our interest is to develop a webapp, the best tool we can use is iUI a free framework that allows us to mimic the interface and functionality of the native applications on iPhone.

The big advantage is that this IUI is in charge of the styles to the page, handle AJAX requests and events that happen while the user browses, the only thing we do is generate HTML code necessary to recognize iUI different parts of your webapp.

Basically we need to generate some DIVs and ULs structures, together with certain class names the styles that will allow the iUI necessary and decide what action to take.

There are 2 examples that demonstrate the capabilities of iUI, a mockup of Digg and a music player to show us how to load additional pages via AJAX requests, to create the navigation from a list and the toolbar, use dialogue and forms.

Developing and designing sites for the iPhone is not complicated if you know the basics, with a little time and effort we can make a site look good on the iPhone, or even develop a webapp to use all the features of the iPhone.