I’ve recently worked on an application that required a mobile (iphone/Android) to quickly search through data and do it in such a way that it fits the dimensions of the iPhone/Android Phone. One of the great things about Android and iPhone is the fact that both operating systems use safari webkit as their web browser. It is a slimmed down version however it has a lot of the same features as the full blown safari web browser. That being the case, building a web application for the iPhone is also building a web app for the Android phone too. iPhone and Android, however, suffer from the same ailment… Dimensions. Yes it’s true you can browse the web and see websites and it looks almost exactly the same as it does on your desktop PC (minus things like flash), but the problem you run into is that to see the entire website, the browser must shrink the webpage to the point at which you can no longer read the text until you zoom in. Then the content goes off in all directions off the viewable area of the screen and you must drag your screen in each direction to view the content. Fine for a regular website. Not so fine for an application in which you must interact with the content. Most native applications for the iPhone have a prescribed look and feel about them that does a great job making it easy to interact with the area of the screen that you have to work with on the iPhone. A great way of making an iPhone web app is to mimic that same look and feel in a web browser. So how do we do this?

(more…)