I got a chance to work on a demo for an IPhone only web app and hence while working on it came to know how we can make optimal use of the screen and develop accordingly. Many a website use IPhone optimized pages and you can find them as iphone.websitename.com like flickr, bank of america etc. We can either play with our CSS to customize our present website to work optimally with IPhone or build a new page which is IPhone optimized.
With IPhone optimization I simply mean that we should be presenting only important informaiton and that too intelligently since we have a small screen with us to work on. IPhone comes with Safari browser hence you can get the same experience opening any website as you do on your pc\laptop. It is just that it is not build specifically for IPhone you normal see full page in the small screen which make you to use the multi touch zoom to expand the page and view the area which you are interested in. This generated the need of building pages which fit in this screen size.
Iphone can be used in both “portrait” and “landscape” mode where the screen dimension becomes 320X480 px and 480X320 px accordingly. We should take care of this orientation change too in our development.
Important points while developing a web app for IPhone:
1) Try running your application on full screen mode this give you more flexibility in terms of space. You need to call a small javascript function from body onload
function initFlow() {
window.scrollTo(0, 1);
}
call this from <body onload=”initFlow()”> in order to get you page opened in full screen mode.
2) Using IPhone specific stylesheet. There are several media types which can be used with CSS, including print, handheld, and screen. iPhone ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iPhone.
To specify a style sheet that is just for iPhone without affecting other devices, use the only keyword in combination with the screen keyword in your HTML file. Older browsers ignore the only keyword and won’t read your iPhone style sheet. Use device-width, max-device-width, and min-device-width to describe the screen size.
For example, to specify a style sheet for iPhone, use an expression similar to the following:
<link media=”only screen and (max-device-width: 480px)” href=”small-device.css” type= “text/css” rel=”stylesheet”>
3) Use Safari specifc (Web Kit) style keywords to take the best use of rendering and effects. You can find all the styles supported by safari at http://developer.apple.com/internet/safari/safari_css.html and http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW1
4) In case you have different content like you have in FAQ and help page then using fieldset or targeting the div id with # and then using relative and absolute position can make the bottom div not coming on main screen and once clicked will come on focus. You need to push the above content with padding in -110px etc to move it this much on the left side such that it is again not visible on the screen.
5) Use big buttons as people need to use fingers rather than mouse to click.
6) IPhone opens the number keypad if you use “zipcode” in the name field of a input text box rather than default text keypad.
7) Use the OnOrientatioChange event to catch the orientation change of IPhone and use the CSS accordingly.
Rest of the development can be done either wth HTML\JS\ASP.NET etc as you do regularly. You can use IUI library to use pre written javascript for page titles, page size setup etc.
Hope this helps in case you are planning to develop a web app targetting IPhone.
bye for now.
visit my team at http://india.rampgroup.com
Posted by sushantp 
Posted by sushantp 
, technical article, solution to business problem, process improvement proposals etc.
Posted by sushantp 
