Loading ...

Focus on User Experience & Performance to create Great PhoneGap Apps

When we talk about the developing a mobile app on PhoneGap platform, the most common question you’ll encounter is about its performance. But, many mobile apps build on PhoneGap platform are working fine and also get featured in app stores. While judging the performance of the mobile application built on this platform, you should consider the experience of the end-user, what was their ultimate experience and response.

In order to build great mobile applications on PhoneGap, you need to focus on the end-user experience and performance. PhoneGap applications are based HTML & Web views, and web view could not perform well in certain applications.  If you feel that the web view is not faster as your taste, use the PhoneGap as the subview and leverage certain interface elements as per your need and navigation. Make the changes in the HTML/JS user interface in the app and you can use the Cordova’s native-to-JS bridge in certain elements to make it faster.

Here are some tips to for a faster web view of PhoneGap Apps.

Hardware Acceleration: If you are encountering with the issue of the HTML & web views in your mobile application, consider to check the hardware acceleration.  You need to focus on the rendering of the GPU as over rendering could use all the memory and make it slower.  This could be most common factors for the slow web views. In order to get rid of this, you can make the changes with regard to the rendering of the GPU. Look for the texture size of the GPU and HTML DOM elements, for the better performance of the application while doing animation or scrolling. Use the HTML DOM elements as per the GPU for better performance.  Depending on the slow issues, you can use Translate3d as per the requirement after proper testing.

Use Simple Graphics: Heavy use graphics could impact the performance of mobile apps. It is good to have great design, but you need to consider the implementation of the design and its performance on different platforms and bowers.  You can limit the use of CSS shadows and CSS gradients for better and faster web view depending on the OS.

Use Touch Events: You can use touch events instead of mouse events while developing the mobile application on PhoneGap. It is true that touch events are faster than the mouse events. You can use the touch events – ‘touchend’, ‘touchstart’ and ‘touchmove’ instead of the mouse events.  You can consider iScroll, Hammer.Js, Zepto and Fastclick to work on the touch events.

Optimize JavaScript: You need to take care of memory usage and performance of the application and the JavaScript engine. You can optimize the JavaScript for better performance. Use decent code to make the application faster.

User Experience (UI/UX): Your application will suffer if you don’t focus on the user experience. Try to give the exact ‘look and feel’ to the application on all the platforms, but also consider the standards of the OS as any changes in the OS will have an impact on your application. While you’re developing the mobile app on PhoneGap, don’t try to give the exact look and feel of a native app following all the aspects. Rather, you can try to give a unique identity to your mobile app – having an own set of style for navigation, content, buttons, etc.

Testing: While doing testing target it on old devices and it your application is faster on the older devices, it will be faster on the newer one.  Try to test the mobile app on all the devices as many as possible. You can come to know the issues while testing the app on various devices.