Cross-Platform Mobile Website Development – a Tool Comparison


Gartner says, in 3 years, mobile application development projects will outnumber PC projects by 4-1 ratio and in 4 years, 50% of the people will primarily access their emails from a mobile device. So, the necessity of establishing a mobile channel for your customer is – well a no-brainer. However, should you just build a mobile website or should you also invest in building native application is not easy to decide. There can be no doubt that you need to have a website optimized for mobile devices.  What is the best way to build and maintain that website is not a simple decision.

There are many tools of different type available in the market but it is not strictly necessary to use any of them as each mobile platform comes with its own tool-set.

The cross-platform tolls can broadly be classified into five categories. They are:

(1) Mobile Web (JavaScript-CSS library),

(2) Visual Tool (Hosted – limited access to Code),

(3) App Generator (Native application for multiple platform),

(4) Hybrid App (Leverages embedded browser control) and

(5) Game Builder

[Here is an overview of the five categories of tool]

Should you use any tool to create mobile website for smartphones? Why can’t you directly code in HTML5 – after all most mobile browsers now support HTML5.

Well, there are 6 things you can expect from a tool:

  1. UI component and widget library to give you a head start with AJAX features.
  2. Style-sheet and skin to make the site look like a native application.
  3. Simplified touch event handling.
  4. Provide simplified mechanism for data manipulation, local storage and caching.
  5. Create an abstract layer for client-server interaction.
  6. Visual design and debugging tool.

You can, off course, decide to write the framework yourself, but that will require effort.

How to decide which tool is right for you?

There are many tools available and there is no clear market leader. Each tool has its own strength and weakness – you need to match them with what is important for you and what you can live without.

Here are some criteria that you need to consider:

  1. Do you want a toolkit which has already established itself as an RIA tool or are you looking for a tool which is optimized for mobile?
  2. Are you willing to consider an evolving product which looks promising?
  3. Do you want a lightweight tool or a tool with comprehensive features?
  4. Do you require full documentation?
  5. Are you planning to modify / extend the library?
  6. To you, how important is an active user base?
  7. Do you require only UI library or do you need a complete framework?

Here are 10 tools – the ordering is alphabetic.

1. DHTMLX Touch

  • Home page: Link
  • Genesis: From AJAX tool – full feature
  • Version: 1.0 Released on 14 Nov 2011
  • Licensing: GNUv2 or Commercial
  • Download: Link on home page
  • Documentation: Available
  • Sample application: Available
  • Implementation: No reference
  • Wikipedia: Yes
  • Additional: Skin builder and visual designer (sluggish)
  • Article on how to use: How to build a login screen  on netmagazine.com

2. iUI

3. jQTouch

4. jQuery Mobile Framework

5. Sencha Touch

6. Sproutcore

  • Home page: Link
  • Genesis: Targeted for all HTML5 site – uses a Ruby engine
  • Version: 1.6
  • Licensing: MIT – also available of GitHub
  • Download: Here
  • Documentation: Available
  • Sample application: Not Available
  • Tutorial: Here
  • Implementation: No reference
  • Wikipedia: Yes
  • Article on how to use: Build mobile applications by IBM

7. WebApp.net

  • Home page: Link
  • Genesis: Mobile only framework – full feature
  • Version: 0.5.2
  • Licensing: Beta
  • Download: Link on home page
  • Documentation: Available
  • Sample application: Here
  • Implementation: No reference
  • Wikipedia: Yes

8. Wink Toolkit

9. XUI

  • Home page: Link
  • Genesis: Started in 2008 to complement PhoneGap – primarily a DOM library – does not have components for UI
  • Version: 2.3.2
  • Licensing: MIT – also available in Google Code
  • Download: Here
  • Documentation: Available
  • Sample application: Here
  • Implementation: No reference
  • Wikipedia: Not available

10. Zepto.js

  • Home page: Link
  • Genesis: Mobile only – lightweight – full feature
  • Version: 0.8
  • Licensing: MIT – also available on GitHub
  • Download: Link on home page
  • Documentation: Minimal on GitHub
  • Sample application: No reference
  • Implementation: No reference
  • Wikipedia: Not available

Do let me know if there are any errors or omissions in the details I have provided.

[Update: Here is one more from Dojo]

Link to homepage

<<Previous (Mobile cross-platform tool classification)

Next>> (Mobile Visual Tools)

Udayan Banerjee on Google+
Comments
11 Responses to “Cross-Platform Mobile Website Development – a Tool Comparison”
  1. Hi
    I need to develop a mobile website. Could you please guide what frame work should be used so that it can be accesible via smart phones and as well as symbian or java me hand sets.

  2. Steve says:

    you can also use Jaemobi mobile website builder / content management system. there is a free try option check it out folks http://www.jaemobi.com

  3. Max says:

    A new kid on the block is Application Craft (http://www.applicationcraft.com)

    It’s a cloud-based dev platform that does mobile (all important platforms) and desktop on an equal footing. It’s got an IDE that does drag-and-drop / wysiwyg UI building as well as code editing. I guess you could describe it as Visual Basic in the Cloud, but Javascript not Basic. Widget based like VB was and extensible. It’s Open Source with a free platform offering.

    Phonegap did a case study with them called ‘Pain free mobile app development’ here:
    http://phonegap.com/case_study/phonegap-application-craft-pain-free-mobile-app-development/

Trackbacks
Check out what others are saying...
  1. [...] So, if you do not want to present a sub-optimal view of your website to half of your customers, you will have no choice but to redesign your website to make it mobile friendly. Many libraries are available to help to achieve this and here is a compilation of Mobile Website Development Libraries. [...]

  2. [...] (1)    Mobile Web (JavaScript-CSS library), (see this) [...]

  3. [...] (1)    Mobile Web (JavaScript-CSS library), (here is the detail review) [...]

  4. [...] (1)    Mobile Web (JavaScript-CSS library), (here is the detail review) [...]

  5. [...] Mobile Web: These tools are primarily JavaScript libraries which in combination with suitable HTML 5 and corresponding CSS render you mobile website on different types of devices. Some of these tools can work in conjunction with Hybrid tool and the result can be packaged as a native application. (iUI, jQuery, jQTouch, Sencha Touch, Sproutcore, XUI etc.) [Here is a detail comparison of 10 such tools] [...]



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 985 other followers

%d bloggers like this: