HTML5 and CSS3 Frameworks for Mobile Website and Application Development

By Scott Clark

There has been a lot of buzz about HTML5 and the potential it has when combined with CSS3 and JavaScript. The use of frameworks which bring these three technologies together simplifies the development process and enables developers to create compelling web apps more quickly. In this article we will look at some HTML5 and CSS3 frameworks that can be used to create mobile websites and applications.

DHTMLX Touch & UI Designer

Just when I was thinking that the term DHTML was finally dead, along comes DHTMLX Touch, a free HTML5-based JavaScript library designed specifically for the creation of mobile web applications that work across platforms. As an HTML5-based framework, it comes with a complete feature set of User Interface widgets, as well as:

  • form widgets
  • grid widgets
  • video
  • Menu
  • Google Maps
  • Group List
  • Popup
  • Confirm

If you've ever worked with JavaScript and/or HTML frameworks before, you know that they don't usually come with a WYSIWYG tool that you can use along with the framework to create apps. They rely upon you working your way through the examples, taking bits of code that you like and editing it to suit your needs (i.e. old school hacking). That's the case with DHTMLX Touch, except that they also provide an online Visual Designer you can use to create your app by dragging-and-dropping components onto a mobile device layout, and setting each control's properties through the same visual interface. Don't expect a Dreamweaver-like interface here, but it's still much easier than hacking example code. Here's what it looks like:

Image 1

Landscape and portrait layouts are both supported for iPhone- and iPad-sized screens, as well as custom sized screens. Once you are done creating an app using the Touch UI Designer, you are able to save it to your computer so you can later move it to your web server, edit it, etc. Apps created with DHTMLX Touch (and the UI Designer) will work on the iPhone, iPad, Android and standard WebKit-based browsers such as Chrome, Safari and Firefox 3.6 and later.

Keep in mind that DHTMLX Touch, unlike other DHTMLX products, is completely free for both non-profit and commercial application development. You can use it in your own commercial apps without paying a cent.

The M Project

The M Project, which may be short for Multi-Platform, Mobile or MVC, is another open source HTML5 and JavaScript framework that allows developers to create cross-platform mobile apps. Unlike DHTMLX Touch, the M Project comes with Expresso, a build tool that is based on Node.JS. Installing Node.JS isn't a simple one-click process, but now that Microsoft is working to create a Windows version of Node.JS, there won't be a requirement to install it under Cygwin, a Linux-like virtual environment used to run Linux applications on a Windows OS. Until that comes to fruition, you'll have to work through the documentation and set it all up.

Here's what the M Project's sample ToDo List application looks like:

Image 2

You can test it yourself on a mobile phone here. They have a tutorial showing how to create the ToDo App, as well as the more traditional Hello World app.

52 Framework

The 52 Framework is an HTML5, CSS3 and JavaScript framework that was created by folks from the Enavu Network. It is a full-featured collection that allows developers to create web apps that include HTML5 video, shadows, rounded corners, that use CSS3 selectors, the HTML5 canvas element and local storage, and that feature HTML5 form validation.

Like the others, the 52 Framework is provided as a zipfile download that contains a directory structure that makes it easy to find specific examples and sample code. You can see the full demo to try out the features of the 52 Framework yourself. Like the others, you can try out the examples live on your computer once you have downloaded and unzipped it, and you can hack and edit the examples to suit your needs.

Conclusion

In this article we've looked at DHTMLX Touch, The M Project and the 52 Framework, and have provided you with the resources you will need to get started with each framework. In our next article we will look at Sencha Touch and the SproutCore framework.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •