Building mobile web apps already became pretty easy with user-friendly and high quality frameworks

Mobjectify is a free web application which makes it so much simpler by offering an awesome web-based mockup builder.

The application enables us to create pages and add various web elements (like forms, buttons, content areas, footers, etc.) with few clicks.

It also offers multiple themes to choose from or you can create new themes. There is a live preview and results can be exported as a single HTML file anytime.

Mobjectify powers the mobile web pages with jQuery Mobile + its theme engine and only leaves the custom coding to you.

Swipe JS is a lightweight (3.7kb minified) mobile slider with 1:1 touch movement (sliding content based on exact touch position).

It can display any HTML content and offers a native-like experience with features like:

• resistant bounds (increased resistance to slide when there are no items to display next or before)
• smart resizing on rotation as the slider resets to make sure the sliding elements are sized right
• the size of each slide is set with the width of the container which is useful for passing different widths on responsive designs
• detecting if you’re trying to scroll down the page or slide the content left to right

Swipe is a standalone slider which doesn't rely on any JavaScript library and has few configuration options like:

• the slide to be displayed on initial load
• speed of transitions
• auto slideshow to be on/off
• and callback fired after successfully displaying a slide

Also, it has API methods for custom interactions including the display of prev-next items and getting the current position.

Spine Mobile is a JavaScript framework, built on top of SpineJS, for building mobile web apps that look and feel native.

The framework comes with specialized controllers, panel layout, hardware accelerated transitions and touch events.

Apps are developed with HTML5-CSS3 and the easiest way of building Spine Mobile apps is with Hem, Spine.app, GFX and jQuery. Also, you'll need Node.js.

It is well documented and there are open sourced examples to easily get started.

There are several awesome and feature-rich frameworks out there for building mobile web apps which can handle almost any scenario.

For complicated apps, they are usually the best option to go with. However, if you are building a simpler app that requires the most standard UI features, Zoey can be for you.

It is a HTML5-CSS3-powered framework for creating mobile apps, built on top of Zepto.js and weights only 6kb (gzipped).

Zoey has the UI components like navigation, lists, buttons, control groups, forms and grids.

The framework is compatible with iOS + Android and comes with an app skeleton that covers all the features.

iUI is a mobile web framework that has been around for a long time (since 2007) compared to many other mobile resources.

It was mentioned in a previous WRD article (iPhone Application And Website Development: All Tools And Tutorials You Need) and evolved much since then.

The framework includes a JavaScript library, CSS and images for developing touch-enabled web apps.

User interfaces to be created are iPhone-like yet compatible with most smartphones and tablets and has support for menus, forms, lists, image galleries and more.

Also, there are built-in extensions for caching, getting system information, HTML5 videos or theme switching.

iUI is well-documented and has tutorials to get you started easily.

appMobi, a popular platform for creating HTML5-powered mobile apps and websites has recently open sourced several useful resources for mobile developers.

JavaScript Bridge API

In order to access the device APIs of iOS and Android, creating native apps is not a must. The JavaScript Bridge API brings this functionality to mobile web apps.

The API has support for accessing the camera, notifications, player, display, geolocation and more.

aUX.js

This is a mobile web framework for quickly creating touch-enabled interfaces that run equally good on iOS and Android.

It has on-device caching, offers block-based architecture rather than page based (only necessary block are updated during browsing), supports fixed headers/footers and includes several workarounds for known bugs on mobile web development.

Others

appMobi has also open sourced mobiUs, a mobile browser that offers a native-like experience when browsing web apps.

It enables web apps to access all of the hardware features of a smartphone, has a good game performance with DirectCanvas technology, comes with built-in caching and much more.

And, there is Direct Canvas/Box2D/Sound which helps running web apps (mostly games that require calculations) much faster, play multiple audio files at the same time (HTML5 normally supports 1 at a time), etc.

If you are developing mobile web applications, you already experienced the difficulty of debugging them.

iWebInspector is a free tool for debugging, profiling and inspecting web applications that run on iOS Simulator (iPhone or iPad).

The tool simply attaches the Web Inspector to any tab opened in Safari for iOS, to a chrome-less web app (full screen) or to a PhoneGap application.

It enables us to:

• see and browse every element on your HTML element. You can change attributes, content and styles and see how they apply on Safari
• see all the resources involved in this page, including Databases, Local Storage, Cookies and ApplicationCache
• check all the network traffic on your website
• see all your scripts, create breakpoints, watches and debug your JavaScript code.
• record a timeline showing you rendering, scripting and loading times while you browse on Safari
• profile your JavaScript code
• audit your code, showing you a report on performance and other stuff
• see and use the JavaScript console

Simply, a great addition for mobile developers.

Many designers/developers were excited to see the launch of the jQuery Mobile ~a year ago and waited for the stable release to start building for mobile.

With an announcement yesterday, the project officially reached to its first stable release.

jQuery Mobile already supports a huge set of mobile browsers, has the ThemeRoller for mobile and it is very well-documented with guides + examples for an easy start.

The framework includes many widgets for (touch-optimized) mobile layouts: toolbars, buttons, pages/dialogs, content formatting, list views and forms. All built on jQuery core for a familiar and consistent syntax.

It is always good to know the cons and pros of tools we are using before starting a new project with them in order not to be disappointed later on.

A frequently-updated chart by Markus Falk does this for the mobile frameworks as there is a detailed comparison of their capabilities.

The chart displays the rendering engines supported, target platform, hardware, development languages, UI features and license for each framework.

Also, if you already have strict requirements for the project, a wizard helps filtering the frameworks and fastens the process of choosing the right one.

Lungo.js a framework, powered with HTML5, CSS3 and JavaScript, for creating mobile web apps.

The applications created with it works in all of the popular platforms (iOS, Android, Blackberry and WebOs).

It has support for touch events like tap, double-tap or swipe and doesn’t use images (including the icons) as everything is vectorized.

HTML5 features like WebSQL, geolocation, history or device orientation can all be used.

A well-documented JavaScript API has methods for handling all the major stuff and Lungo.js is modular + completely customizable.