Today Apple released official documentation to develop AJAX web applications for iPhone. Most interesting tips is about understanding the User-iPhone interaction and knowing the input device.

iPhone users supply their own input device — two fingers. Fingers come in all sizes and shapes, from the thin, pointy model to the thick, rounded one. Yet, webpages are designed to receive mouse events, not finger events. Existing pages need to continue to work as expected even with the finger as an input device.

The gesture available are Double Tap, Touch and hold, Drag, Flick, Pinch open and Pinch close. There is some notes accordingly that there are no gestures for cut, copy, paste, drag-and-drop, and text selection. The links on a page should not be too close due to finger width which limits the link density on page. f the links are too close, your users won’t be able to choose a single one.

No Scrolling on iPhone

The windowless version of Safari on iPhone make it resize page automatically to fit with screen width, then user can zoom in and out. That’s why there is no scrolling on the device, so don’t even think about it !

Double Tapping

The zoom in and center for a block of content feature works with Double Tap. When the user double-taps a page, safari looks for the closet block (identified by elements like DIV, OL, UL, TABLE). That’s why it’s interesting to make simple pages with content organized in simple blocks structure, preferably one that uses columns and that organizes content into digestible sections.

Integration with Phone and Mail

Integration with Mail is pretty simple using the classic mailto: in the href, while calling feature could be wraped using a link like :

<a href="tel:1-408-555-5555">1-408-555-5555</a>

Page Size and keyboard

You can specify a stylesheet for iPhone only without affecting other devices like :

<link media="only screen and (max-device-width: 480px)"

 href="iPhone.css" type="text/css" rel="stylesheet" />

The max screen width as known is 480 px, just be sure if you have inputs that the keyboard and form assistant require 260px and so will keep just 140px shown for your form if we count in the top the status bar (20px) and the URL text field (60px).

Conclusion

Overall the document provides a great introduction to make better web applications for iPhone. Always be sure to use standards HTML 4.01, XHTML 1.0, CSS 2.1 and partial CSS 3.xx, JavaScript 1.4, including DOM support, and AJAX technologies including XMLHTTPRequest.