By Andrew Smith
In response to the growing market for mobile apps several HTML5 Mobile UI Frameworks are now available to help developers create attractive and responsive apps. These libraries enable Web developers to create great user experiences for their apps using technology and skills that they are familiar with. The best of these UI/UX frameworks include App Framework, Twitter Bootstrap 3, jQuery Mobile, Sencha Touch, Kendo UI, and TopCoat. Each one provides a unique set of features to help Web developers make great apps.
What are UI Frameworks?
Why would I want to use one for mobile?
There are a lot of great reasons why Web developers would choose to use an HTML5 Mobile UI Framework for their next app. Developers who learn how to use frameworks save a lot of time and effort styling and animating their app experiences. All the frameworks listed in this article provide the tools to create a great app for both tablet and phone form-factors, but some even adapt to add support for desktop browsers. HTML5 Mobile UI frameworks can give developers’ apps a unified look and feel to make the software much more “professional” than a home-grown solution can. Some HTML5 Mobile UI frameworks even adapt depending on the platform they are running on to present users with an experience customized for the operating system they are running the software on.
How are they all alike?
These frameworks have a lot in common to help developers make great mobile apps.
All these frameworks are also designed to work on a variety of platforms. There is a panoply of mobile devices in the market, and these frameworks aim to support as many of them as possible. They do that by using the technique of Responsive Design or a combination of Responsive Design and Reactive Design. For those keeping score at home, Responsive Design is a process of laying out Web UI elements so that the UI can be resized at will with a minimum of redrawing on all form factors while Reactive Design is a process where UI elements are turned on or off depending on the platform the application is running on.
These frameworks all include methods for loading data from the Web dynamically using asynchronous techniques to grab data in XML or JSON format. By providing access to resources on the Internet, these frameworks accelerate development and extend the capability of what is possible with HTML5 Mobile Apps.
There are a variety of HTML5 user interface elements that all these libraries provide. Buttons, menus, forms, lists, toolbars, tabs, modal overlays, and a variety of other controls are available from these frameworks. Most of these UI frameworks use font files to deliver icon images to the screen. Font files are a superior solution to flat files for icons because they consume less bandwidth and are naturally resizable.
All these frameworks take advantage of touch events as well as click events, allowing them to be used by mobile devices as well as desktop mouse-driven devices. Many frameworks make sure HTML elements are sized appropriately for touch activation as well.
How are they different?
Although the examples of HTML5 Mobile UI Frameworks mentioned earlier are very similar in a lot of ways, there are still significant differences as well. Here is a brief comparison of the strengths of App Framework, Twitter Bootstrap 3, jQuery Mobile, Sencha Touch, Kendo UI, and TopCoat.
Twitter Bootstrap 3
The first and perhaps most commonly used HTML5 Mobile UI Framework is jQuery Mobile. Although jQuery UI was originally not created for the mobile space, jQuery Mobile has done an admirable job at providing a mobile user interface that reflects the same aesthetic and usability of its desktop product. The jQuery Mobile HTML5 Mobile UI Framework is very easy to use, and is programmed using HTML elements like the previous two frameworks. It has good documentation for a free product, and has a large installed base that can provide help and sample code for new projects.
Kendo UI is a commercial venture based on jQuery, which helps support the outstanding documentation and tools that are available for developers who use the tool. For example, Kendo UI’s theme builder can help developers cook up a custom color scheme for their UI quickly. Kendo UI’s Mobile HTML5 library uses HTML with class tags to run “widgets” that provide a set block of functionality. It is able to change its UI based on the platform to emulate the native aesthetic of an iOS, Android, Blackberry, or Windows Phone 8 device depending on which platform it runs on. Kendo UI us used by the Hybrid App builder Icenium.
Where can I find all these great HTML5 Mobile Frameworks?
If all this technology sounds great, developers can try them out for themselves by following these links.