Web-based mobile apps

Web apps are HTML5, CSS, and JavaScript-based apps running in mobile browsers. There are two different ways of building mobile web applications that work with Drupal - integrated with Drupal at the theme layer, or a standalone mobile web app that talks to Drupal using web services. Either approach will work for building mobile web applications, but it is easier to get started by integrating the mobile web app into Drupal as a theme.

Mobile Web Toolkits

Several different mobile web application toolkits exist, with varying degrees of support for smartphones, tablets, and feature phones. The two general approaches to building a mobile web application toolkit are to work from HTML5/CSS (jQuery Mobile, jQTouch), and to work from Javascript (Sencha Touch, Enyo). The HTML5/CSS toolkits are somewhat easier to adapt to Drupal. The Javascript frameworks don't integrate with Drupal at the theming layer, so the process for development is similar to building a native mobile app.

• jQuery Mobile
• Enyo JS
• Sencha Touch
• jQTouch
• Jo
• jqMobi
• DrupalGap

jQuery Mobile and Drupal

jQuery Mobile is not only one of the most popular mobile web application frameworks, it's also the easiest to get integrated with Drupal, because there are several modules and themes:

• jQuery Mobile Theme
• jQuery Mobile UI module
• Google Analytics for jQuery Mobile - fixes Google Analytics reporting for jQuery Mobile projects, works with the Google Analytics module
• jQuery Mobile Views Integration - creates jQuery Mobile list markup from Drupal views
• DrupalGap - Application Development Kit for Drupal with jQuery Mobile

Additional Resources for jQuery Mobile and Drupal

• drupal.api.js - An object oriented JavaScript API library to interact with Services 3.x. Great for use within Drupal Mobile applications such as PhoneGap, etc.
• Building a mobile site in 45 minutes using Mobile Tools and Jquery Mobile - presentation by Michael Herchel at Florida Drupal Camp 2012
• jQuery Mobile - presentation by Jason Savino on the Mobile jQuery theme and the jQuery Mobile module at DrupalCamp New Hampshire 2011
• Building a mobile Drupal site - presentation by Mark Jarrell at DrupalCamp Nashville 2011
• Drupal on the go with jQuery Mobile - presentation by Tim Cosgrove and Brian McMurray at DrupalCon Chicago 2011
• 960.gs on jQuery Mobile - not a Drupal module, but still useful if you are planning to build web applications for tablets with jQuery Mobile
• jDrupal - JavaScript Library for Drupal REST (Services)

Converting D7's default XHTML to HTML5

The easiest way to convert Drupal 7’s default XHTML markup into HTML5 is to use a theme that is written in HTML5. If you are building your own custom theme for a site, consider using a HTML5 base theme as it will have done all the hard work to convert the default markup into HTML5 for you.

Search Drupal.org for HTML5 themes.

If you would like additional parts of Drupal to be converted to HTML5 (like Drupal’s search forms, etc.), you can try the HTML5 Tools module. This module should work with any HTML5 theme.