CyberTube

Conventionally, our project implementation can be split into two parts: server side development and front-end development.  This post is devoted entirely to front-end development (interface design). In particular, we will talk about current RIA technologies for mobile Web and benefits which these technologies can bring to our project.

In order to provide a user with an interactive and rich interface we considered many GUI frameworks for mobile browsers and, finally, stopped our selection on “jQuery mobile”, “jQTouch” and “Modernizr”.

jQuery Mobile

jQuery mobile javasript library claims to be the most flexible and widely compatible with all “mobile browsers that are sufficiently-capable and have at least a nominal amount of market share”. It provides a lot of nice features as progressive techniques and an opportunity to build a rich graphical user interface on the base of a clean, semantic HTML what enhances the web page compatibility. In addition, jQuery mobile contains WAI-ARIA features in order to provide support for screen readers and other assistive technologies. However, jQuery mobile is not a stable, ready product as its current framework version at the moment of writing is Alpha 3.

Key features

1. Compatible with iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo with baseline support for all devices that understand HTML;
2. HTML5 Markup-driven configuration of pages and behavior for fast development and minimal required scripting;
3. Lightweight size (12k compressed for all mobile functionality);
4. Availability of WAI-ARIA accessibility features;

Advantages

1. Simple and expressive, does not involve a lot of script coding;
2. Highly compatible;
3. Speed loading;

Disadvantages

1. No stable release;

Materials about jQuery Mobile

1. jQuery Mobile: What Can It Do for You?
2. 5 Excellent jQuery Mobile Tutorials

Modernizr

In contrast to jQuery mobile, Modernizr (latest version 1.7) cannot be considered as a purely mobile GUI framework. In fact, this lightweight library oriented on use with HTML 5 as it allows to style and print new HTML 5 elements. In particular, it detects whether the browser support HTML5 features as Geolocation API, HTML5 Audio, HTML5 Video, Drag and Drop, X-window Messaging, CSS 2D Transformations, etc. In the other words, the key feature of this library is an ability to recognize web browser capabilities and form the page according to them (for example, old browser do not support new HTML5 elements, thereby these elements should not be rendered in order to maintain a fine level of control over your site). This library is successfully used in many web projects as Twitter and Burger King, for example.

Key features

1. Compatible with Opera 10.5, older Safari versions, Nokia and Blackberry mobile browsers, and Konqueror via the -khtml- prefix;
2. HTML5 oriented;
3. Provides facilities for analysis of a web-browser capabilities and further integration of an interface markup with browser capabilities;

Advantages

1. Simple and expressive, does not involve a lot of script coding;
2. HTML5 oriented;
3. Lightweight and speed loading;
4. Provides facilities for analysis of a web-browser capabilities and further integration of an interface markup with browser capabilities;

Disadvantages

1. Not mobile oriented;

jQTouch

jQTouch is another jQuery-based product for mobile web browsers. This plugin allows to build animation, automatic navigation, and supports themes for mobile WebKit browsers like iPhone, Nexus One, and Palm Pre.

Key features

1. Easy to install. Get up and running in a few minutes;
2. Entirely customizable with selector options;
3. Theme support, including default Apple and jQTouch custom themes;
4. The power of jQuery to build AJAX applications;

Advantages

1. Simple and expressive, does not involve a lot of script coding;
2. Speed loading;

Disadvantages

1. No stable release;
2. Limited compatibility (iPhone oriented);

Summary

Considering presented frameworks it can be seen that jQuery Mobile and Modernizer are winners as they oriented on the use with native HTML5 elements (initial plan is to use HTML5 for our implementation) and provide better compatibility with all kinds of browsers and devices. However,  from these two jQuery Mobile is more preferable as it supports WAI-ARIA features and is designed specifically for mobile Web.