IPhone optimized web application development

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

Advertisements

10 Responses to IPhone optimized web application development

  1. […] unknown wrote an interesting post today onHere’s a quick excerptIphone 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. … […]

  2. […] – IPhone optimized web application development saved by cat000012008-08-09 – Who sending more accidents saved by […]

  3. This is without doubt the most wonderful most informative website I’ve seen yet,I am happy I discovered sushantp.wordpress.com

    people with scrambled thoughts think like this:
    Bravo, this magnificent phrase is necessary just by the way

  4. The valuable articles & websites will be read by tons of readers, web content creators and webmasters…

    […]IPhone optimized web application development « Sushantp’s Weblog[…]…

  5. pay per download…

    […]IPhone optimized web application development « Sushantp’s Weblog[…]…

  6. Gibson Les Paul Supreme Purchase…

    […]IPhone optimized web application development « Sushantp’s Weblog[…]…

  7. Website Design and Web Development Company | Bluewire Technologies Bangalore…

    […]IPhone optimized web application development « Sushantp’s Weblog[…]…

  8. After checking out a handful of the articles on your web
    page, I honestly appreciate your way of writing a blog.
    I book marked it to my bookmark webpage list and will be
    checking back soon. Please visit my website as well and tell me
    your opinion.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Who am I what am I doing?

Who am I what am I doing?

%d bloggers like this: