In multi-platform application development, it is very important to ensure a responsive UI design. It is necessary to make your applications design responsive, for example in the case of optimal adaptive web design and an intelligent mobile responsive design.
The architecture below explains the working of cross platform mobile applications and can help in improving performance of cross platform apps:
The architecture showcased above demonstrates the performance of cross platform applications. Response time for the application increases with the hardware acceleration needed. In addition, increases in the script load imply more time to get a response from the application. .The user experience is therefore degraded if cross platform apps are not architected and developed according to the best practices of performance.
The below mentioned guidelines can be helpful in improving the performance of cross platform mobile applications and can achieve a better user experience:
- Optimize your HTML UI
- Do not add any script loader tags in HTML. When the required HTML is loaded, it will also load the script specified in the HTML UI component, resulting in increasing UI response time.
- Never have a ladder of multiple <DIV> tags. Use the minimum hierarchy of HTML DIV.
- Do not specify any inline CSS tags. Have all your CSS in a separate CSS file.
- Never load the generated UI components from the server. Instead, write a script to create the UI from server responses and append it on your HTML page.
- Always have a single HTML page (divided into subpages) in your application, instead of creating a separate HTML page for each application page.
4 Have your CSS optimized
- Create a reusable CSS classes for UI components.
- Use CSS gradients instead of images for the background, as the images require a large amount of application memory, and consume time to load.
- Never use fixed sized elements at the bottom of the page, as these take more time to move when mobile device orientation is changed. When required, specify absolute positioned CSS for elements at the bottom.
- Use as few fixed position elements as possible, as these elements require more time to move in case of orientations and causes UI flicker.
- Always load CSS files runtime using a loader script, as this will reduce the application response time.
5 Use customized UI components instead of jQuery mobile: jQuery mobile has a wide range of UI components. This, however, has its own drawbacks of flickering and low performance, and cannot be customized easily. Instead of jQuery mobile, create your own customized UI component with the help of CSS and HTML DIV. This can help in creating customized UI components as per application requirements, and one can create optimally performing UI components.
6 Hardware interaction: For hardware interaction, write a plugin to interact with the device’s API layer. Accomplish this with minimum script and optimized native code. Use PhoneGap 3.0 and include only required plugins as it will help in getting reusable plugins and these will have a better performance.