Web page for IPhone - Large fonts instead of scrolling?

Question

I'm planning the layout of my web page, which should also be usable on the IPhone. I don't really have much experience with the IPhone yet - I just installed the IPhone Simulator on my Mac.

The page's contents are flexible, so I think it would be better to use this flexibility to avoid that the user has to scroll around the entire page. Especially I have

• A header and a sidebar that will be used all the time to perform several actions.
• A main content area with a number of elements (e.g. images). The UI would stay usable pretty well, if the number of elements shown at one time is reduced for a small screen (e.g. by JavaScript). It would also be okay to make the main content area scrollable (as opposed to the entire page).

The problem: If I simply display the page on the IPhone, it uses an extremely small font size, so that users must zoom in first, and then scroll around - so that they can't see the header and sidebar all the time.

What's the best way to deal with this situation?

• Just leave it this way (very small fonts), because users expect that behaviour on the IPhone?
• Increase the font size (by specifying it in em or px or with xx-large, or what would be the best way?), if I detect - somehow - that it's being displayed on the IPhone.
• Or is there some way to restrict the viewport size to the screen size, and make it zoom in automatically? I think that would be the easiest solution in my case.
• Or ...?

Answer 1

This article from Craig Hockenberry is worth a read:

• http://furbo.org/2007/07/24/one-line-of-code/

For a bit more detail, here’s a two-parter he wrote for A List Apart:

1. http://www.alistapart.com/articles/putyourcontentinmypocket
2. http://www.alistapart.com/articles/putyourcontentinmypocketpart2/