An overview of Mobile modules for Drupal

Submitted by Tom on Fri, 02/13/2009 - 11:04

Update 24/03/2009: dotgo module

In march ~~I will be presenting a~~ I was planning to give a session on DrupalCon dealing with Drupal and its relation to mobile devices. Currently no real big effort has been done to port Drupal to the mobile space and their is still a lot to learn. So I hope my session will have some impact on these efforts!

In my preparation for this session I have been looking a bit closer at the current activities in the Drupal community and to what is already available in order to get your site properly displayed on mobile devices, or at least to interact with your mobile users. So this blog will summarize the Drupal 'mobile' modules!

As you will see, during the last years, there where many attempts in the Drupal community to provide tools that help in making your site mobile. It is too bad that most modules are not really maintained anymore and don't have high adoption... Probably they where too innovative at the time of conception (this happens with all those smart people playing with Drupal). Since the last year we have seen a big increase in usage of the mobile web, so these modules will probably become more and more attractive.

I'll try to give an overview with the current state of Drupal modules targeting the mobile world! I will do my best to not forget any module, so feel free to add your comments, new modules or your own experiences!

The categories

When you look at the modules, you see some typical categories, namely:

Theme switching modules: These modules detects if a mobile device is accessing the sites, and loads a mobile theme for the mobile devices. There are two approaches: User Agente detection or just detection of the URL. See .mobi_loader, Accessibility, Mobit, Mobile Theme, Mobile Devices
Redirection modules: these modules redirect the mobile user to a mobile url. No module currently does this, but I would like to promote this buggy module.
Mobile theming: these modules (or themes) provide a mobile friendly version of the site. See .mobi theme, iUI, bluemobi (with accessibility), Mobile
SMS modules: some modules are targeted towards an integration with SMS gateways. See SMS framework
Mobile publishing: modules helping getting content on your site originating from a mobile phone. See Mobile Media Blog and dotgo
Mobile payments: modules enabling paying from a mobile device. See Mobillcash

So let's start (in no order of importance ;))

.mobi loader and .mobi theme

Category: Theme switching, Mobile theming
Project: http://drupal.org/project/mobi and http://drupal.org/project/mobi_loader
Versions: .mobi loader - 5.x-1.2 ; .mobi theme - 5.x-1.1
Demo: No demo found
Description: These two modules help you in creating a mobile version of your site without having to worry about the theming and the device detection. It is a combination between a mobile theme (= stripped down destkop theme) and a theme switcher that switches themes based on the presence of the .mobi extension in the URL. So sites that use the .mobi extension are loaded with the .mobi theme. In order to use this module you need to setup your domain name with a .mobi extension.

The essential code is located in the hook_init(). The code speaks for itself.

function mobi_loader_init() {
  if (isset($_SERVER['HTTP_HOST'])) {
    if (substr($_SERVER['HTTP_HOST'], strrpos($_SERVER['HTTP_HOST'], '.')) == '.mobi') {
      global $conf;
      $conf['theme_default'] = 'mobi';
    }
  }
}

If you want to detect m.* or something else, you can change this code on line 4.

Next to the detection of the URL, the module allows you to make a mobile version of the site based on the .mobi theme and some simple configurations. This is really the fast way to create your mobile site. The .mobi theme can be a good starting place if you want to build your own mobile theme without too much effort.

Some extract of the page.tpl.php file:

<body>
<div class="header">
  <?php if ($logo) { ?><img src="<?php print $logo ?>" alt="logo" /><br /><?php } ?>
  <?php if (isset($primary_links)) { ?><?php print theme('mobi_loader_primary_links', $primary_links) ?><?php } ?>
</div>
<?php if ($sidebar_left) { ?><div class="sidebar-left"><?php print $sidebar_left ?></div><hr /><?php } ?>
<div class="content">
  <?php if ($breadcrumb) { print $breadcrumb; } ?>
  <?php if ($mission) { print $mission; } ?>
  <?php if ($title) { print '<h2>'. $title .'</h2>'; } ?>
  <?php if ($tabs) { print $tabs; } ?>
  <?php if (isset($tabs2)) { print $tabs2; } ?>
  <?php if ($help) { print $help; } ?>
  <?php if ($messages) { print $messages; } ?>
  <?php print $content ?>
  <?php print $feed_icons ?>
</div>
<?php if ($sidebar_right) { ?><hr /><div class="sidebar-right"><?php print $sidebar_right ?></div><?php } ?>
<div class="footer">
  <?php print $footer_message ?>
</div>
<?php print $closure; ?>
</body>

This is mainly a printout of the drupal objects that are passed to the theming engine.

However, there are some drawbacks (but this module, with only two commits in april 2007 does not have the intention to give a superior solution):

you need manual coding if you are not using .mobi, but some other form such as m.*
You cannot apply your own theming (except for changing colors)
There is no adaptation of content (navigation, disabling blocks, disabling content, resizing images, ...).
You can also use a multi-site installation to swith themes, based on the domain url to get the same switching effect

Currently I don't find a lot of demonstrations... someone can comment with an example?

iUI

Category: Mobile theming
Project: http://drupal.org/project/iui
Demo: http://iui.mobiledrupal.com (not working very well), http://www.robloach.mobi/#_home
Description: This is a very interesting theme that aims at creating an iPhone experience from your Drupal site. It does this by extracting content from your drupal site (mainly menu items) and by adding CSS and javascript to make smooth transitions. Most work is done by the "famous "iUI framework.

You need a theme switcher module in order to switch this theme.
Drawbacks of this module are that it only targets javascript enabled phones (iPhones) and that you loose the theming / branding of your mobile site. There is also no support for adaptation of content. Since there is still some activity going on around this module, there will be some bug fixes.

There will a presentation on this module and integration with iPhone on drupalcon: http://dc2009.drupalcon.org/session/android-and-iphone-integration-drupal

Accessibility module

Project: http://drupal.org/project/accessibility, http://skiffie.com/mobile/theme-files/v6/1, http://skiffie.com/mobile/theme-files/v6/1
Category: Theme switching, Mobile theme (bluemobi)
Version: 5.x-1.x-dev
Demos: http://bluemobi.mobiledrupal.com/

This module provides a way for switching themes based on the detected browser. This is in contrast with the .mobi loader, where the module only looks to the URL. Since browser lists should be updated periodically, I prefer the method of Mobile Theme that uses the Browscap module.

The accessibility module comes with several options:

enable / disable the module for certain pages
break up content by using a "page break character" in your text
automatic paging of your nodes

The modules is partly inspired by the .mobi_loader module in order to overwrite the formatting of the primary links into a simple formatting suitable for a mobile device.

/**
 * Override formatting of primary and secondary links
 * Taken from 'mobi_loader.module' by David Kent Norman <http://deekayen.net/>
 *
 * @return string
 */
function theme_accessibility_primary_links($links) {
  $output = '';
 
  if (count($links) > 0) {
    $num_links = count($links);
    $i = 1;
 
    foreach ($links as $link) {
      $html = isset($link['html']) && $link['html'];
 
      $link['query'] = isset($link['query']) ? $link['query'] : NULL;
      $link['fragment'] = isset($link['fragment']) ? $link['fragment'] : NULL;
 
      if (isset($link['href'])) {
        $output .= l($link['title'], $link['href'], array_merge($link['attributes'], array('accesskey' => $i)), $link['query'], $link['fragment'], FALSE, $html);
      }
      else if ($link['title']) {
        if (!$html) {
          $link['title'] = check_plain($link['title']);
        }
        $output .= $link['title'];
      }
      $output .= ' | ';
      $i++;
    }
  }
  return empty($output) ? '' : substr($output, 0, -3);
}

For paging, the module duplicates code from the Paging module.
The module gives several options and is a real good attempt. In my demo I only used the theme of the module that has been made available for D6

You will notice that the secundary links are not displayed and that all blocks are removed, except for the login block.

Mobile

Category: Mobile theming
Project: http://drupal.org/project/mobile
Versions: 6.x-4.x-dev, 5.x-1.x-dev, 4.7.x-1.x-dev
Demos: http://mobile.mobiledrupal.com

This theme is intended to return only clean HTML with no styling (images and styling in content is maintained). The links and sidebars are placed in such a place that mobile- or handheld-devices can display just the content.

This is a very basic and simple approach and can be applied if nothing else is possible. You can't say it's pretty, but it's very effective.

Mobile Theme Selection (Mobit)

Category: Theme Switching
Project: http://drupal.org/project/mobit
Version: 5.x-1.x-dev
Demo: none
Description: Mobit switches the theme when a mobile device is detected. The administrator has to provide a mobile theme himself. This can be for example the iUI or mobile theme.

This code snippet contains the device detection algorithm:

function mobit_check_is_mobile() {
  $uAgt='';
  $acpt='';
  if (isset($_SERVER['HTTP_USER_AGENT'])) {
    $uAgt = $_SERVER['HTTP_USER_AGENT'];
  }
  if (isset($_SERVER['HTTP_ACCEPT'])) {
    $acpt = $_SERVER['HTTP_ACCEPT'];
  }
  // Check if it is a moblizable client (make sure any updates here go to mobilize.php as well)
  if (strpos($acpt,'wml')    || strpos($uAgt,'PDXGW')      || strpos($uAgt,'portalmmm') || 
      strpos($uAgt,'DoCoMo') || strpos($uAgt,'Windows CE') || strpos($uAgt,'PPC')       || 
      strpos($uAgt,'Palm')   || strpos($uAgt,'BlackBerry') || strpos($uAgt,'Symbian')   || 
      strpos($uAgt,'dopod')) {
    return true;
    }
  else
    return false;
}

And here the theme is being switched:

function mobit_init() {
  global $_mobit_use_ext_rendering, $_mobit_rendering_url, $_mobit_is_mobile, $_mobit_default_mobile_theme;
  global $custom_theme;
 
  $set_mobile=false; // little helper
 
  if (mobit_check_is_mobile()) {// if we are called from a mobile device
    if ($_mobit_use_ext_rendering) { // external rendering needs a reload
      if (!isset ($_SERVER['HTTP_CMS'])) {
        $location = sprintf ($_mobit_rendering_url, 'http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']);
        Header('Location: '.$location);
        exit; // no need to stay
      }
    }
    $set_mobile = true;
  }
  else {
    if ($_mobit_use_ext_rendering && isset ($_SERVER['HTTP_CMS'])) { // this is a rendering engine reload
      $set_mobile = true;
    }
  }
 
  if ($set_mobile) {
    $_mobit_is_mobile = true; // set global var, we are in mobile mode
    if (isset ($_SESSION ['mobit_theme'])) { // set user setting
      $custom_theme = $_SESSION ['mobit_theme'];
    }
    else { // set anonymous default
      $custom_theme = $_mobit_default_mobile_theme;
    }
  }
}

This is a very efficient method to redirect mobile users to a mobile URL. The downside is that there is no choice for the mobile user in choosing what version he wants to see.

Mobile Devices

Category: Theme switching
Project: http://drupal.org/project/mobile_devices
Version: No code released yet

This module is not released yet, but promises to do theme switching by using a third party API from http://www.handsetdetection.com

Mobile Theme

Category: Theme Switching
Project: http://drupal.org/project/mobile_theme
Versions: 6.x-1.x-dev
Demo: none
The Mobile Theme module uses the browser detection capabilities of the Browscap module.

See this essential part of the module:

/**
 * Check to see if the user is running on a mobile browser.
 */
function mobile_theme_init() {
  $browser = browscap_get_browser();
  if (isset($browser['ismobiledevice'])) {
    if ($browser['ismobiledevice']) {
      $theme = variable_get('mobile_theme_selection', 'default');
      if ($theme != 'default') {
        global $custom_theme;
        $custom_theme = $theme;
      }
    }
  }
}

The beauty is in its simplicity!

The browscap module is dependent on a configuration file that is periodically downloaded. The updates are provided by Gary Keith.

The configuration is also very simple:
Mobile Theme configuration

Here, there is also no option for the mobile user to choose if he want to see the desktop site on his mobile phone.

SMS Framework

Category: SMS
Versions: 5.x-1.1 - 6.x-1.0-beta1
Project: http://drupal.org/project/smsframework

This module does not help to make your site mobile. It allows you to integrate your website with people sending sms message to your shortcode. These can be nodes, comments, etc ... The module interfaces with different gateways modules.

The SMS Framework allows you to:

* Send SMS messages using any supported gateway
* Collect, confirm, and store mobile information for Drupal users
* Send batch messages to Drupal users
* Allow users to send nodes or portions of nodes to mobile phones

See http://www.developmentseed.org/blog/2009/jan/29/parsing-and-storing-data... for a practical use case.

Mobillcash

Category: mobile payements
Project: http://drupal.org/project/mobillcash and http://drupal.org/project/ec_mobillcash
Version: 5.x-3.0, 6.x-1.x-dev
Demo: http://www.dublindrupaller.com/mobillcash_demo
Micro-payments is a very suitable way to monetize your website. This modules makes it very easy to let users pay with their mobile phone. This happens by sending an SMS to a short code or to enter your mobile number in a web form and receive a payment code.
This is easier then Credit Card, Paypal, etc ... plus, you can target a young generation who doesn't possess credit card. But still there is some controversy around the pricing and the role of mobile operators.

The module is dependent on the eCommerce module for Drupal.

Maybe a second mobile payment system is on the way, based on Zong: http://drupal.org/node/277090

See http://www.techcrunch.com/2009/01/13/mobile-payments-getting-traction-on... for some interesting discussions.

Mobile Media Blog

Category: Mobile publishing
Project: http://drupal.org/project/mmb
Versions: 5.x-1.x-dev
In a previous blogpost I posted about ways to upload content to your drupal site by using your mobile phone.

This module actually helps you in doing this and integrates with
http://drupal.org/project/mailhandler
http://drupal.org/project/inline:
http://drupal.org/project/mailalias

In short, you can mail pictures or text coming from your mobile phone to you Drupal site. Mailhandler is in charge of intercepting your mails and publishing them as nodes.

dotgo

Category: Mobile publishing
Project: http://drupal.org/project/dotgo
Versions: 6.x-1.x-dev

Dotgo (www.dotgo.com) is an SMS service that allows you to interact with your domain for free through the use of the short code for your top level domain (DOTCOM, DOTEDU, etc). By entering your domain as the first line of your text, dotgo routes the remainder of the request to that domain, looking for an index.cmrl file.

This module enables consuming web content trough sms communication.

Mobile Codes

Category: Varia :)
Project: http://drupal.org/project/mobile_codes
Version: 5.x-1.x-dev, 6.x-1.0
Demo http://www.mobiledrupal.com

Mobile codes is a module that allows you to create a so called 2D-code. It is like a standard product code, but then 2-D. These codes can contain a lot of information that can be read by a mobile phone with a photo camera and special software.
The information contained in this code can be a url, text or a vCard with your contact information.

The reason why these 2D-codes can be handy is that the user doesn't has to manually put in information, but just can take a picture. You can print these barcodes on your business cards, flyers, folders, etc ... I suggest to take a look at the Nokia Mobile Codes site.

This drupal module lets you create these custom 2D bar codes.

Nice to have ;)

The end

If you see other modules that are related to Drupal and display on mobile devices, just let me know, I can add them to the list.

Stay tuned for more Mobile Drupal later :)
(and see you on Drupalcon!!)