Web page restrictions for use on iphone / smartphones

Question

I want to allow our main application to generate document files that can be easily read on the iphone, or other smart phones. The easiest way to do this, I think, is to create a simple HTML file and use javascript to show / hide different bits of it. For example, when the user clicks / touches "section 1", the section expands to show its full details; otherwise, it will remain collapsed to save space.

What guidelines should I follow when creating this file? I've done a little research and arrived at the following:

• The iphone has a native resolution of 320x480, but only about 320x400 is visible for a web page.
• Other smartphones have resolutions from 160x120 (probably not high enough to bother with) up to 320x240 and some even have 480x640.

These are useful for deciding how to style and arrange the HTML output, for example. Are there any other useful guidelines to work with? For example:

1) How big / small should I make things to let the user have a large enough 'target area'?

2) How can I get the file onto the iphone? Would the user have to drag and drop it via USB?

3) What size of fonts can I use before it gets too small to read?

etc etc. I don't actually have an iphone to test on, which makes this a little more problematic.

Thanks for your help!

Answer 1

I don't know about other smart phones, but the only way your file is going to get onto the iPhone is via the web browser, email, or a custom application that you write. There is no general mechanism for uploading files to the iPhone.

It's surprisingly easy to read even fairly small text on the iPhone, and the gesture-based zooming makes it very easy to zoom in and out.

Answer 2

If you're going to provide your documents through ASP.NET you might want to check this out: http://mdbf.codeplex.com/. It allows you to detect what kind of smartphone did the request, you can then check out the capabilities (screen-resolution, color-display, screen-pixels height... etc.)

Answer 3

Most mobile browsers render XHTML-MP (XHTML Mobile Profile). You can get away with rendering that.

iPhones (and other WebKit phones like Android) support the viewport meta tags which can make the experience more tailored to that phone screen size. You can learn about these in the iPhone web page creation docs from Apple.

If you are really interested in supporting a wide range of handsets, you should look at a "multi-serving" technology like WURFL, which will let you abstract a lot of the complexity away from supporting hundreds of handsets. It's sort of yesterday's technology though, since modern mobile browsers render most web pages just fine.

Answer 4

I'm not sure how current this is, but Yahoo says that one of the restrictions for an iPhone is that it won't cache files larger that 25k uncompressed. This doesn't affect your display necessarily, but it could affect your performance and so you may want to take it into consideration for your design.

Answer 5

Use http://51degrees.codeplex.com/. It is an ASP.NET open source module which detects mobile devices and provides auto redirection to mobile optimized pages when request is coming from mobile device. It makes use of WURFL mobile device database. For redirection there is no need to modify existing ASP.NET web application pages.

Apart from this it also gives upto-date mobile capability information like manufacturer, model, screen height & width, image formats supported and MANY MORE...... which helps to customize pages for best mobile output.