Josh Bavari's Thoughts

Thoughts on technology and philosophy

How to Be a Good Imitator in PhoneGap/Cordova

about a 1 minute read

If you found your way here, then you’re probably seeking knowlege about Phonegap/Cordova. I want to first remind you what the purpose of the PhoneGap / Cordova project is:

The ultimate purpose of PhoneGap is to cease to exist.

What this means is – you should really start getting ready to make Native-like apps regardless of what technology is used.

How can we give native apps a better feel from PhoneGap / Cordova? Or stated another way, what are some tricks we can use to make the application feel more native?

The answer then, is to be a better imitator, you must first understand what you are imitating.

The chameleons change color to their surroundings

Simply stated – you adapt to what your surroundings are.

Our surroundings for PhoneGap / Cordova are quite wide:

  • iOS
  • Android
  • Windows Phone
  • BlackBerry
  • Firefox OS

That is a lot to adapt to. It may take a little time to familiarize yourself with each platform. If you do though, your users will thank you.

Some suggestions

  • Put navigation items near the top in Android, for iOS put them near the bottom. Users are used to having their navigation in the same place.
  • In Android / Windows Phone – mind the Back button! Users use their phones natively, and if you try to change this, they will hate your app.
  • Dont use the same button styles for each platform! Buttons on iOS do not look like buttons on Android – if you try this though, your users will notice and find it odd. See these great examples from Ratchet.js (look for the Base/iOS/Android buttons near the top)
  • Use Native-like loading animations. iOS generally has a small circle – if you try using this instead of your own custom loading icon, users will most likely blame their phone over your app. See this study by Facebook for loading animations
  • Test on actual devices. You cant get a native feel from clicking on a simulator.

References:

Performance UX Considerations for successful PhoneGap apps

Tips for getting that native feel

Comments