Five Kinds of iPhone Web Support
Wednesday, July 11th, 2007 by ChristopherAIn considering how web sites can interact with the iPhone, I’ve created five broad definitions for levels of support:
iPhone 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. These sites are totally incompatible with the iPhone and can not be accessed, even via painful methods like constant zooming and scrolling. Other incompatible sites have one very wide column, and thus without a viewport tag are very difficult to read, even with zooming and scrolling (see example).
iPhone 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. Nonetheless, we call these sites iPhone Compatible because they are at least usable.
iPhone 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; and optimizing Quicktime files. Websites that offer these features are iPhone Friendly.
iPhone 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. Web sites that do this I call iPhone Optimized. Note, however, that a website does not have to be 320px wide to be iPhone Optimized—the iPhone supports very powerful scaling features that even iPhone specific web sites should offer. We don’t want to limit our users to a 320×480px narrow tunnel when we can give them a much larger overview by appropriately using scaling.
iPhone 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. These web pages should be called iPhone Webapps.A current discussion on the list on the topic of iPhone Webapps relates to standards and compatibility. 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. To quote iPhoneWebDev member Randy Walker in a discussion on the list on this topic:
“Each category of programming is going to have its own rules/ideals for what is the overall good for that category. However, for clarity and sanity, the debating of those rules/ideals needs to be restricted to their individual categories. The thing that’s going on here is a cross category debate of rules/ideals. As soon as the ‘compatible with’ camp starts telling the ‘made for’ camp how to do things, both camps start spinning their wheels and chasing their tails. If ‘compatible with’ is your thing, or what your client will hire you for, GREAT! I wish you all the best. But if ‘made for’ is your niche, then do not hesitate to pull every CSS trick/hack out of the book to elevate the experience of your iPhone app as high as possible. Don’t ‘pump the bass’ just to make it compatible with other phones or desktop browsers as that would lessen the iPhone experience of the app. I’m not talking in absolutes here, i.e. yes, you can adjust code so it does similar things on other devices… So don’t flame me or start any sort of device wars. That’s not what this is about at all.”
These five categories are not official Apple designations for types of iPhone support by web sites, but I think they are a useful convention when talking about developing websites for the iPhone.
