Four classes of website support of iPhone

[Christopher Allen]

It seems to me that there are four classes of support of the iPhone by web sites:

iPhone compatible: Most websites should just work with the iPhone, however, websites that require the use of Flash, SVG, or other plugins will not work. Also, it looks like from the WWDC keynote demonstrations and iPhone ads that media do not play inside the webpage, but instead are played from their own page, so this means that many embedded media players will likely not be supported (this has particular implications for web sites that offer advertising outside of the media). But if your websites don't have any of these problems, it is iPhone compatible.

iPhone friendly: There are a variety of hints that a website can give the iPhone about how it should be displayed. Informing the iPhone of the viewport size of the overall page, not having columns wider then either the 320px width when held upright, or 480px when held sideways, breaking columns up into more appropriately sized blocks, offering the iphone some tips on font size handling, use of the appropriate links that the iPhone supports, optimizing Quicktime files, etc. are possible and are relatively easy. Websites that offer these are iPhone friendly.

iPhone optimized: It is possible to have a different CSS file for use by the iPhone, or detect the iPhone in the http headers and offer completely different web pages. The iPhone supports 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 320x480px 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 320x480px (or 480x320px), make extensive use of Canvas, and use a lot of AJAX functionality. These web pages should be called iPhone webapps.

These are not official Apple designations for types of iPhone support by web sites, but I think are a useful convention when talking about the iPhone and websites.

-- Christopher Allen

[Dylan]

This is a good summary of the classes of iPhone apps, thanks for
writing it up!

>From everything I have read, native SVG is supported in the iPhone. I
guess we'll see for sure in two weeks...

-Dylan

On Jun 14, 12:24 pm, "Christopher Allen"

<christoph...@iphonewebdev.com> wrote:
> It seems to me that there are four classes of support of the iPhone by web
> sites:
>
> iPhone compatible: Most websites should just work with the iPhone, however,
> websites that require the use of Flash, SVG, or other plugins will not work.
> Also, it looks like from the WWDC keynote demonstrations and iPhone ads that
> media do not play inside the webpage, but instead are played from their own
> page, so this means that many embedded media players will likely not be
> supported (this has particular implications for web sites that offer
> advertising outside of the media). But if your websites don't have any of
> these problems, it is iPhone compatible.
>
> iPhone friendly: There are a variety of hints that a website can give the
> iPhone about how it should be displayed. Informing the iPhone of the
> viewport size of the overall page, not having columns wider then either the
> 320px width when held upright, or 480px when held sideways, breaking columns
> up into more appropriately sized blocks, offering the iphone some tips on
> font size handling, use of the appropriate links that the iPhone supports,
> optimizing Quicktime files, etc. are possible and are relatively easy.
> Websites that offer these are iPhone friendly.
>
> iPhone optimized: It is possible to have a different CSS file for use by the
> iPhone, or detect the iPhone in the http headers and offer completely
> different web pages. The iPhone supports some of the special graphic
> capabilities that both Safari 2.0 and 3.0 support (called

> Canvas<http://developer.apple.com/documentation/AppleApplications/Reference/...>).

[Christopher Allen]

Is any webartist up for doing 4 icons for these?

* iPhone Compatible
* iPhone Friendly
* iPhone Optimized
* iPhone Webapp

-- Christopher Allen

[AwayBBL]

They left one out... iPhone Incompatible... it could be an icon of
someone throwing their iPhone into the toilet :) (just kidding folks)

On Jun 18, 3:53 pm, "Christopher Allen"