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 ;))
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?
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
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.
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.
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.
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
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.
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.
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.
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 ;)