An iPhone optimized web page

[UPDATE: Proof of concept no more, RssPaper is now in the store!]

The defacto way of making a web page "optimized for iPhone" is to slap on iUI (or variants) to simulate the look & feel of a native app (i.e. the UITableView). You can click on an item in the list, and the page slides sideways to reveal another list, or more details... etc.

However, the starting point of trying to mimic meant we're aiming for the web site's experience is to be worse-or-almost-as-good compared to if it was a native app. e.g. m.cnn.com Can aim to be different instead?

In trying to mimic a native app, the iUI approach locks down the browser's width & scaling capability. I actually liked that part of browsing on the iPhone -- its automatic zoom! To zoom-in, you simply double-tap on an area of the page. To zoom out, double-tap again. (There's pinching, but it is manual & I don't like tedious things)

Unfortunately, most layouts don't make it easy for iPhone to automatically zoom-in. The kicker is, a good & fluid CSS layout actually hinders! e.g. the text is still small after double-tapping on jnd.org

Turns out, the automatic zoom is controlled [only] by the width of the page segment.. meaning, the page's font size can be infinitesimally small -- it doesn't matter. As long as the containing width is also small (e.g. contains 5 words across 1 row), the user can still comfortably zoom in and get big text with sharp font of 5 words across the entire screen width!

Taking this to an extreme, we could have all our site's content render in tiny little font inside narrow columns on 1 single page and the iPhone visitor can still effortlessly zoom in and read everything! No click, ajax, network lag, read content, back, click another, .. etc.. i.e. instead of content hierarchy behind deep navigation, we could have it based on font sizes.

Sounds like a newspaper huh?

To try this out, I'd hacked up this proof-of-concept a few days ago, and have been using it to read my RSS feeds on my bus rides the past few days. While the app itself is not there yet, the zoom interface experiment has really been working out very well!

Have an iPhone/iPod touch? Try it and lemme know?

PS: A more extreme sell for a zoom-based UI is Microsoft's famous Seadragon demo.
PS: this whole experiment was sparked off when I tried to read the beautiful hacker-newspaper.gilesb.com on my iPhone.

Comments

[Kim Yong]

Wow! Keat, you still on the edge of technology. Do you have anything for diamond touch? i got a china iphone, not sure can use this or not hehe :)

[choonkeat]

hey hey :-) haven't heard from u in a long while!

unfortunately, i'm not too sure abt diamond touch. does it run mobile safari? can u try and lemme know? :-)

(sorry for some reason i didn't get a notice for this comment, hence the late reply!)

[vinay]

Safari doesnt run in Windows mobile, but there is Iris browser that has webkit engine which runs on WinMo. Rendering is quite bad and zooming capability is limited.

HTC phones comes with opera which has one of the best zooming capability. AFAIK it zooms all text in webpages, regardless of viewport width.

[choonkeat]

@vinay regarding opera's zooming on htc, actually safari on iphone behaves similarly (identically?) and can zoom anywhere (images scale brilliantly) regardless of viewport width.

I should've been more clear & indicate that for the purpose of reading an article, it is cumbersome to pan sideways + updown... hence this experiment explicitly make use of the more convenient double-tap-zoom feature.

[vinay]

While using zoom in opera, you dont have to pan sideways to read an article.

When u zoom in, what opera does it wrap the text in the zoom area, So you are still able to read the whole article without panning. :)

I think its one of the best mobile browsers i have ever used. Rendering is as good as safari

[Anol]

I was working on iPhone optimized web site/app few months back. Wrote a brief Web Content Development primer for iPhone here: http://incsub.org/soulsoup/?cat=9