HTML5 is most widely used language for developing website & mobile applications, the main reason HTML5 is used for mobile apps for cross-platform portability & low cost of development.

It’s very easy to convert any rigid design in html and that’s best part of HTML5 & CSS3 which provides the ease of developing apps. Here are some best practices I follow to develop high performing applications.

You must have some knowledge of basic technologies as below HTML5, CSS3, Javascript, Cordova

User Experience / User Interface
The key elements of any Mobile Application is UX / UI. I am not going to talk much about the UI Design as it is depends on case to case, But sure I’ll talk on UX we can achieve great user experience by following certain basic rules as provided by respective Platform eg. Android, iOS, Windows etc.

Image Source:

  • Clickable area of all buttons & links should be size of finger tip, I usually follow 32px * 32px. You can follow respective platform guidelines eg. Android Design Guidelines.
  • Valid types for Input’s e.g. type must be email for email field. in this case when user taps on email field he will get @ on keyboard screen.
  • Semantic Markup All form’s should be wrap with <form> tag as it will provide user to submit using keyboard enter button, and also it’s better to write one event in “submit” rather handling enter and button click separately.
  • Font Size Body font size should be readable eg. 16 is the readable font size.
  • Touch Feedback It is always beneficial to add Feedback for every button touch, so that user will understand something is clicked on screen e.g. Changing color of button on tap.

Remove Touch Delay
There is quite delay of 300ms in hybrid apps to fire touch events, e.g. as you touch on any call to action button, It wait for the 300ms to fire that event.  FastclickJs removes that delay response time.

Android comes with many flavors and from various vendor e.g. Samsung, Asus etc. Hence the different UI / Functionalities dose not consistently on different devices. Crosswalk uses Chrome Webkit Engine on all android 4.0+ devices with all the updates result all the UI / Functionalities works same across devices, Also it save majority of Testing & Implementation time.

Templating: Template engine give you freedom to decouple views from js, this way your code will be more manageable. There are couple of other javascript template engines are available but I used EJS.
It decouples all the html from javascript, ejs uses the *.ejs for the templates and all data can be get from javascript and ejs will process entire data and render the view.

Light weight HTML & CSS
I personally recommend don’t go for any third party UI library e.g. Kendo, jQuery UI etc. Most of the UI frameworks comes with heavy in size and most un-wanted functionalities, Maximum we can you Twitter Bootstrap for UI but it is highly recommended to remove all the CSS & Javascript functionality which are not required for your project. e.g. If you are not using Tooltip in your project remove the required less files and javascript files and compile javascript and css again.

Handling Touch Events
Most of the apps require touch, slide events for application to open hamburger menu, Pull down Refresh or Advanced menus as shown in Image. Hammer JSprovides all the required Touch Events eg. tap, double tap, pan, pinch etc.

Image curtsy:  Jeff Broderick

Test on Real devices
device testing is most important in mobile development, You will be always surprise by results of device testings..

Image credit: Testdroid

Educate User
Educate your users, It will help them to understand how to use your app, you can create Introductions screens for apps which you can launch it on mobile at the time of initial setup or If you have lot many functionality you can educate them on periodic intervals.

This is my first attempt writing something on linked, will be back with some more interesting tricks and tips in near feature. Please feel free to write your suggestions or queries Ill be happy to help you..

Example of Best Hybrid Mobile Applications
Twitter, Yalp, Picasa etc…