Developers have been buzzing since Jobs’ announcement at WWDC to make Safari the unofficial SDK for the iPhone. Many have voiced (or screamed) their disappointment, while others have rejoiced. But despite the variety of opinions on the matter, everyone has questions about how to develop and optimize content for the iPhone.
Fortunately Apple has released a handy guide on the Developer Connection outlining some high level concepts on how to optimize content for the iPhone. Topics such as user iPhone interaction, audio and video experience, and Safari’s supported media (in case you haven’t heard, Flash Player didn’t make the cut) are covered. Here’s a few points of interest:
The finger is not a mouse
Perhaps the easiest to remember and forget. The finger doesn’t have the same precision as a mouse (which I think is painfully obvious right off the bat), and the iPhone handles it’s own special sets of events and gestures that are NOT equal to the desktop. The guide outlines all of the gestures and results as well as supported events.
The iPhone doesn’t have a resizable window like a desktop browser, it has a viewport which it scales content to fit. Once a user double taps on the page, Safari looks at the closest block level element (div, ol, table, etc.) and zooms to fit.
Optimize readability & images
Even though Safari automatically scales text to a “comfortable” size after a double tap, you can feed it an iPhone specific stylesheet to optimize the readability of your site or application on the iPhone. Safari also has a unique user agent string so you can track iPhone’s Safari separately from its big brother.
GIF, PNG & TIFF images can be up to 8mb. Animated GIF images can only be up to 2mb. Anything larger and Safari will only display the first frame of the animation.
Whether you’re a web developer or not, this guide is an interesting read, especially if you haven’t been able to play with an iPhone yet. But if you are, this is a must read. It was obvious to me during the 5 minutes I got to play with an iPhone in the store that web content needs to be tailored to the device. This guide should make things alot easier.