7+ Best free HTML5 Mobile UI framework you should know

What is HTML5 Mobile UI framework ?


HTML5 Mobile UI framework

HTML5 along with JavaScript is increasingly being used for developing mobile applications.There are many tools available in market which help you create mobile apps using HTML5 and JavaScript.In fact I myself developed mobile apps using one of such tool called Intel XDK.Intel XDK allows you to create cross platform mobile apps using HTML5 and JavaScript.

With increasing popularity of HTML5 for mobile development need for UI frameworks was felt.You can think of UI framework as libraries.You can include them in your mobile app.After including You can use the controls (User Interface elements) provided by them.

One of the major advantage of using HTML5 for mobile app development is cross platform support.You can easily migrate or use same code base for Android App development or iPhone App development.So mobile UI frameworks were created with aim to give consistent look on all platforms or give native look on all platforms.These libraries make development easier and faster.

You do not have to write CSS yourself.You can customize them to suit your needs.Below I will present the list of HTML5 mobile UI framework which you can use for your app development.The list is not in any order.But this should not impact your decision making.You can go through the details and choose the one which fits in your requirement.

HTML5 Mobile UI framework list

HTML5 CSS only Mobile UI framework

Topcoat

Topcoat is the UI framework which impressed me more than the others in the list.It is open source library backed by Adobe.The best part is that it is JavaScript free and does not have an outside dependency.It is only CSS library.Including Topcoat in your project is as simple as including a CSS file and the resources used by it.Since it does not have any JavaScript library dependency it is light weight and fast.

I have used this to create few of my cross platform mobile apps (Android,Windows and Facebook). I have not ported app to iOS but it does support it as well.It works well on all the platforms.It is simple and easy to customize.I have also written detailed review of Topcoat at this post. You can read my experience and about features of this library before making a decision.But it is certainly one to look into.

It is worth mentioning that they support Android version 4 and above.So on older Android phones they may not work.I tried it on device running Android 2.3.3 version.The display was fine but controls were not responsive.So if you are aiming at older Android version this may not be a choice.

HTML5 Native looking Mobile UI framework

App Framework

The brilliant people of Intel are behind App Framework.It is open source.App Framework is developed for mobile apps only.This makes it fast and less bulky.The best part is the wide range of platforms supported and native look it gives to your apps on each of the platform.

The single code base without any customization or parameter setting from your end will adapt itself to Android,Windows Phone,iOS,Tizen,Firefox OS and Blackberry.On Android,Windows and iOS the app will look like a native app.

The App Framework version 3 which is the latest version as of now supports Android 4 and above,iOS 7 and above,Tizen,Firefox OS,Blackberry 10 and Windows Phone 8 and Windows 8. If you want support for Android version less than 4 then you can use App Framework 2.3.

I have used App Framework in my app.It has JavaScript files in the library.It also comes with API’s as well.Though I did not use API’s.I have written detailed review of App Framework in this post.

HTML5 jQuery Independent Mobile UI framework

Ionic Framework

Ionic is both CSS framework and JavaScript UI library.Many components of Ionic depend on JavaScript.So it is bulky than Topcoat or App Framework.The learning curve for Ionic is more than other options like Ratchet,Topcoat and App Framework.On Official website Ionic says about Android and iOS but not much about other platforms.

I have not used Ionic in my apps due to the learning involved. My requirement was fulfilled by other simple to use frameworks.But in case you are building complex app then it is worth checking out this framework.It is built specifically for mobile devices.It is jQuery independent and is optimized for AngularJS.

The latest Ionic framework version 1.0.0 supports Android version 4.1 and above,iOS version 7 and above.Currently the Windows phone and other platforms are still not supported.Support for these platforms are planned in future release.

HTML5 JS only Mobile UI framework

Famo.us

We have seen pure CSS based HTML5 UI framework above.Now this time it is different.Famo.us is pure JavaScript based UI framework.You can use it with AngularJS as well.The library can be used alone or with Phonegap like tools.It has extensive list of browsers support.Almost all browsers which support HTML5 and CSS3 are supported by Famo.us.

It is very new framework.As of writing the framework had only one release.So you may want to wait for sometime before giving a try.On website small example codes and documentation is provided.It may be good library to look ito for Game developers.

HTML5 Mobile UI framework with maximum browser support

jQuery Mobile

The list can not be complete without mention of jQuery mobile. This is by far the most popular HTML5 mobile UI framework.The documentation is overwhelming which sometimes can make a beginner nervous.Feature wise and browser support wise it is the top framework.It still supports Android version less than 3 not to mention 4.

It is bulky library similar in lines with Bootstrap and ZURB (may be more meaty than the other two). You can learn it and create all your apps with it without any issues.Though the learning curse is there.While considering UI framework for my apps I did look into this.But the learning curse,size and slowness of the framework made me not to go for this.

HTML5 Mobile UI framework jQuery Mobile competitors

BootStrap

Bootstrap is one of the most popular HTML5 UI framework out there.It is tested framework and used by large number of apps.You may have seen many WordPress themes using it as well.It is also used to create responsive websites.So the amount of documentation available for it is huge.Bootstrap supports most browsers including Internet Explorer 8 and above.

Intel XDK also has support for BootStrap 3. I have not used it in any of my app but you can safely use it in your app.The number of controls provided by BootStrap are incredible.Only jQuery mobile can match the huge number of controls provided by it.Bootstrap JavaScript components require usage of jQuery.

So size of Bootstrap is more than some of the frameworks mentioned in this post.It is also less fast than some of the options mentioned above like App Framework,Topcoat and Ratchet.

ZURB Foundation

ZURB foundation is becoming popular in WordPress theme developers as well as mobile web app developers.It was originally developed keeping responsive web in mind but can safely be used for web apps.The documentation is detailed and easy to follow.You can also use AngularJS along with it.

The motion UI support is also present which allows you to create beautiful animations.Feature wise ZURB is right up there competing with Bootstrap and jQuery mobile.Some learning curve is there as well.It supports most of the modern browsers.So support wise you will not have a road blocker.But if you are looking to support Internet Explorer 7 or 8 then you can consider using Bootstrap or jQuery mobile.But for mobile apps I do not think Internet Explorer 8 support is a road blocker.

HTML5 Mobile UI framework Emerging players

Ratchet

Ratchet is new player in HTML5 mobile UI framework field.It is based on Bootstrap.It has JavaScript dependent components as well.It is also open source library.The library have separate files for iOS and Android but not Windows.So officially they do not support Windows platform.

So you need to check out if they work well on Windows devices.Ratchet is new player.They have not yet decided the base Android version and browser component to support.So you need to check it out yourself.Using Ratchet in your application is easy.They also have decent sized documentation in place on their website.

Onsen UI

Onsen is also new player in this area.I have not yet used as current version of Intel XDK does not support it.But this one is worth checking out.It is based on Topcoat.Along with Topcoat it includes HammerJS,AngularJS and Font Awesome.These JavaScript libraries are included to provide more functionality in it.It also supports jQuery.

Onsen UI officially supports Android version 4 and above iOS version 7 and above.It also supports Google Chrome and Safari browsers.So Windows phone is not officially supported or other browsers like Firefox.It is also simple to use.I found the documents easy to follow and learning curse is less.I may consider using them in my next project.

They also have web based CSS generator.On that page you can change look and feel of your components.This makes customizing the controls easier.I would like to see official support for Windows mobile phones in near future.You can also try using them on Windows as Topcoat does works well on Windows.Since it is based on Topcoat so it may also work on it.

ChocolateChip-UI

ChocolateChip-UI is dependent on jQuery.It officially supports Android,iOS and Windows phone platforms.It is also open source library.It comes with default themes for above platforms.You can customize the themes using web interface and download the resulting CSS file.Then in your app you can replace the default file with this one.

So customizing ChocolateChip-UI is simple task.The default themes are designed to make apps look native on the platforms.So if you want native looks for your app then you can go with the default layout.It does not reveal about version support for different platforms so you may have to manually test your apps on different version to find out.The dependency on jQuery does make it bulky library.AS you have to include compatible version of jQuery to use it in your app.

Conclusion

Above I have tried to mention different kinds of frameworks.From the less known ones to more established players.The simple new frameworks to complex ones.You can use any of them for simple app development without any issues.I choose the ones which have less learning curve and fit in my requirement out of box.I do not have to customize them much.

Sometimes the choice of framework depends on app needs so you can go through the list and browse the websites to get a feel about them.I would be writing individual review about these frameworks going forward describing my experience with them and pros and cons of them.

I would also like to hear from your about any new player out there or your opinion about any of these frameworks.

3 thoughts on “7+ Best free HTML5 Mobile UI framework you should know

  1. Nice strategies for UI framework.

  2. Recently I use a free framework called shieldui-iite, check it out here, it has loads of options!

Leave a Comment