Native vs Web with PhoneGap – which to use

I’ve been talking to people about native vs web for years, and don’t fall down on one single answer. I thought it was time to get these thoughts down on paper. I’ve framed the discussion around a series of questions you might ask about an app you are developing.

Are you designing an app which could be composed of native interface elements?

If you are designing an app for a phone, I would strongly consider using native UI components where possible.

METAR reader for iPhone was built as a packaged web app, and does not use standard UI elements.

It looks very nice, it could be for Android as much as iPhone, but could also easily be created using well styled native UI elements which would make it easier for users to know what to do and give the app a more familiar feel. What are those bottom 3 tabs for?

Some apps don’t really need to use native interface elements…

Apps with neutral designs

If you are designing a tablet app you may find yourself designing something which is neutral, more like a website, which doesn’t use native UI components. On tablet devices apps tend to follow less of a standard UI look, so there is less consistency anyway.

The FT web app looks the same on all devices, and doesn’t lend itself to using native UI elements.

This app can look like this on any device, it uses no common interface elements.

Recreating native interface elements with web technologies is a bad idea

Recreating standard UI components in web can lead to the ‘uncanny valley‘ effect, where the app looks native but doesn’t feel quite right, as this discussion describes.

At the moment you will never get a PhoneGap app with fake UI elements working as well as a native app with real UI components. There is an unobtainable final 5% of performance that can’t be gained.

A native app can work as well any on the device and feels solid and well produced.

Native interface elements differ between platforms

Each platform has a different standard look and feel.

Facebook on iPhone:

Facebook on Android:

Facebook on Windows Phone:

Each version of the app is consistent with the platform running it, and facebook lends itself to this. You certainly couldn’t put the iPhone design onto an Android device without it looking fake.

If you want to develop an app with a consistent UI on the platform running it (and in most cases you should), you need to redesign the app for every platform.

There will therefore be additional CSS work to do on every platform you want the app to run on, but with web you can share the core code. Even if you don’t redesign the app for other devices, browser differences mean you may have inconsistencies which will need to be tested for and worked out.

Neutral designs work well as packaged web apps

If your app doesn’t contain any native UI elements (like the FT app) it can easily be produced with web technologies without feeling fake.

The user has no expectations related to the UI elements you are using, so performance issues are reduced.

It will be easier to create custom UI elements with web technologies than using native tools to do so, so the project can be delivered quicker.

No redesign will be needed when putting the app on other devices, so minimal effort will be needed to target multiple platforms.

To conclude…

Don’t recreate native experiences with packaged web apps.

Use packaged web apps to create platform neutral experiences that can run across many platforms, none of which resemble the native experience on any single platform.

1 Comment

Kripper

I agree.
Latest windows apps abandoned native look and feel for web apps styles, so there is no need to be a fake. Lets better optimize JQuery?
Think also on touch apps, where native is less than web.
Maybe native touch UI layers could improve and add cool 3D UIX effects.
Nice. Thanks.

Leave a comment: