Your options

Responsive Theme

Mobile Theme

Native App

Responsive Theme

Your ideal option.

• Omega Theme
• Zen Theme 7.x-5.x

Mobile Theme

Difficult to maintain multiple themes.

• Mobile Theme
• Mobile jQuery Theme

Native App

Only use if you need device features!

• Apache Cordova (AKA Phonegap)
• Titanium
• Mobile App Generator
• Drupal iOS SDK

Apache Cordova

• Uses a UIWebView
• Access native functions via JavaScript
• Somewhat OS independent
• Implement your own plugin

Example Call to Method

navigator.camera.getPicture(onSuccess, onFail, {
  quality : 50,
  destinationType : Camera.DestinationType.DATA_URL
});

function onSuccess(data) {
  $('#myImage').attr('src', "data:image/jpeg;base64," + data);
}

function onFail(message) {
  alert('Failed because: ' + message);
}

Pull up the camera, and put the contents into an image.

But...

• Testing sucks, sort of
• jQuery Mobile is a PITA
• Mobile Browsers have quirks
• UIWebView is missing Nitro

Services

• Endpoints for external apps to talk with drupal
• Accepts many different formats (i.e. JSON, SOAP)
• Exposes basic CRUD actions
• Implement your own action/operation

Example Login with Services

var user = {
  username : 'test',
  password : 'password'
};

$.ajax({
  url : "http://localhost/api/user/login.json",
  type : 'post',
  data : $.param(user),
  dataType : 'json',
  error : function() {
    console.log("Failed to login");
  },
  success : function(data) {
    console.log("Logged in!");
  }
});

Here the end point name is api.

jQuery Mobile

• Built on jQuery & jQuery UI
• Markup based system using data attributes
• Wide range of supported platforms

Example Page with jQuery Mobile

<div data-role="page">
  <div data-role="header">
    <h1>My Cool App</h1>
  </div>
  <div data-role="content">
    <p>Your Content or listviews go here</p>
  </div>
</div>