Posts Tagged ‘iPhone’

Web App for iPhone and Android

Sunday, November 15th, 2009

Some screenshots of an web-based iPhone app I’ve been working on. I downloaded the Android SDK recently. The screenshots here are from the Android emulator. It’s awesome that Android and iPhone web apps are completely cross-platform. Obviously there are some advantages to using a native API, like Cocoa Touch, but for companies looking for a mobile presence a web app is the natural choice. I feel that a mobile version of a site is really not enough. The best approach is to mimic the behavior of native apps as much as possible. That means building AJAX user interfaces and controls meant for fingers rather than cursors.

Anyway, some screenshots.

list view

iphone list view

android list view

android list view

iphone list with sortable columns

iphone list with sortable columns

iphone company details

iphone company details

android company details

android company details

As you can see, there are only some styling difference between the two platforms. The behavior is essentially identical in each.

results from search

iphone results from search

contact details

iphone contact details

You may have noticed that the browser chrome and location bar is not visible in these shots. That effect is easy to achieve and contributes to the look and feel of a native app.

Obviously this app allows for data entry and search as well.

Full Screen in Mobile Safari

Friday, August 28th, 2009

Here’s how Facebook and other iPhone web apps manage to look just like native applications. Add this meta tag to your header:

<meta name="apple-mobile-web-app-capable" content="yes" />

Then use Mobile Safari’s “Add to Home Screen” feature:

IMG_0323sm.jpg

You’ll get a proper button on your iPhone to launch your web app. One caveat – any link in your app, including internal links will open a new browser window and close your application. You need to design your application entirely in AJAX. This actually makes a great deal of sense as it’s the only way to get a native application feel anyway. (The look is another matter.)