Creating web apps and sites for the Mobile Web has its own sets of challenges and techniques. From UIs optimized for fingers instead of mouse cursors to the bandwidth limitations that most portable personal devices have, developing for mobile devices requires a paradigm shift for those of us who’ve traditionally created products aimed at desktops.
- Optimized for touchscreen devices: Fingers as input devices instead of mouse cursors provide an extra set of challenges in user interface design. Mobile web development frameworks provide standard UI elements and event-handling specifically for mobile device platforms.
- Cross-platform: Support for multiple mobile device platforms such iOS and Android allows you to get your app to a wide range of users.
- Lightweight: Because of current bandwidth limitations, a stronger emphasis on lowering file weight is placed into mobile web development frameworks.
- Uses HTML5 and CSS3 standards: Most mainstream mobile devices have web browsers that support HTML5 and CSS3, and so mobile web development frameworks take advantage of new features available in these upcoming W3C specifications for a better user experience.
1. jQuery Mobile
jQuery Mobile, a framework that will help you rapidly and confidently develop mobile app user interfaces across popular mobile device platforms like iOS and Android, is perhaps the most popular project out there.
The framework boasts a lightweight code base (weighing in at 20KB when minified and gzipped) and a huge bevy of standard user interface elements that mobile device users are accustomed to, such as switches and sliders.
See jQuery Mobile in action by going to its demo page (it doubles as the framework’s official documentation).
If jQuery isn’t your thing, check out MooTools Mobile, a MooTools plugin by MooTools core developer Christoph Pojer and Dojo Mobile, which leverages the Dojo API to help developers rapidly build apps for mobile platforms.
2. Titanium Mobile
As one of the bigger mobile web development frameworks out there — with over 300 APIs and an active developer community — you know you’ll often find help and support from peer developers.
Titanium Mobile supports native UI elements for iOS and Android like table views, tabs, switches and popovers. It also has features that enable you to interact with the mobile devices’ camera and native file storage system.
The framework follows the popular model-view-controller (MVC) software architecture pattern, which is a huge selling point for many developers.
It has offline support so that your users can continue working without an Internet connection (they can then sync up to the server next time they’re online) and excellent documentation (the project has a Getting Started guide for new users of the project).
To witness The-M-Project in action, check out their showcase, which includes items like the ToDo App and KitchenSink (a showcase of all the UI elements included in the framework).
Jo is a framework aimed at developers working on HTML5-capable mobile devices such as those the use the iOS, webOS, Android and Chrome OS platforms.
It has standard, native-like UI elements such as the web form widget for your login screens and the popup widget that you can use for providing extra information when a user clicks on an interface element.
See the demo page on their site, which includes a screencast displaying Jo in action on multiple devices and mobile platforms.
If you need something super lightweight and you only need features for standard client-side development tasks such as DOM manipulation, event-handling, Ajax and a few animation effects, check out xui.js. xui.js packs a punch in such a tiny package (4.2 KB when gzipped).
xui.js provides targeted builds for specific mobile browsers such as WebKit and IE mobile for when you’re developing apps strictly towards a particular mobile device operating system.
What’s great about EmbedJS is that it has multiple builds for specific platforms and browsers such as iOS, Firefox, Android, etc., which translates to an optimal user experience and less code to serve to your users. And if you’d like to customize your build, the creators provide you with the EmbedJS Build tool.
EmbedJS is based on Dojo, so if you’re familiar with the Dojo API syntax, you’ll be able to use EmbedJS right away.
The zepto.js syntax borrows from, and is compatible with, jQuery — a welcome plus for many developers.
To learn more about this framework, see developer Thomas Fuchs’ presentation of zepto.js.
8. DHTMLX Touch
The DHTMLX Touch UI Designer is a visual editor for building mobile user interfaces, and it’ll help you construct top-notch UIs with minimal coding.
Check out samples of DHTMLX Touch in action, which includes a menu app for the iPad (perfect for restaurants) and Book Shop (a proof-of-concept demo for an e-store offering books).
WordPress users might want to check out the Mobilize.js WordPress plugin.
10. ChocolateChip Mobile
The resemblance to jQuery doesn’t stop at the syntax — for example, like jQuery, it can handle events through binding and delegation, and has methods such as
You can grab ChocolateChip Mobile’s source code off GitHub.
- jQTouch: a jQuery plugin specifically for Android and iOS devices.
- jqpad: a web development framework built and optimized for iPad development.
- iUI: a user interface framework for making iPhone-like web apps.
- Sencha: an HTML5 mobile web development framework (suggested by Steven Roussey)
- Building Mobile Web Apps the Right Way: Tips and Techniques
- Mobile Web Design: Is It Worth It?
- Mobile Web Design: Best Practices