Creating a Mobile Drupal Website with Mobile Tools, Nokia Mobile and Browscap - Part One

With a few handy contributed modules, creating a mobile version of a Drupal website can be surprisingly painless. In this series of posts, I'll run through one approach for doing so, using a few of those modules and themes.

Why create a separate mobile version?

You don't always need to create a separate version at all, of course. Using responsive web design techniques - including media queries - sites can be re-worked to display better on mobile devices; however to do so may not fully utilise the benefits of certain mobile features, has a number of key inefficiencies and a one-size-fits-all approach ignores the fact that mobile users might have different motivations for accessing and using your site. (I've written about this before.) Instead, it's relatively easy to channel your content to mobile devices without just using responsive design techniques - which might help you tweak how you're showing your site content, but not what you're showing.

The Theory

The idea behind the approach I'm going to take is to attempt to detect what device a user is using to access your Drupal-based site, and tailor it accordingly. In the most part, this is achieved by switching theme; this doesn't just allow you to change the way the site is displayed (which could potentially be achieved using responsive design techniques), but it also allows you to control what the user sees. The point is though, that you're not creating an entirely separate site, so the content can be uniform across all devices and managed in one place. (It should be pointed out, though, that whilst switching to the mobile version is fine in general, you should still allow a user to view the desktop site on their mobile device if they so wish - we'll look at how this can be achieved later.) You may also wish to have a mobile version of a site on a separate domain (e.g. acme.mobi) or subdomain (e.g. m.acme.com); such a set-up can be achieved using this method, whereby both domains are served from a single Drupal installation.

Drupal Modules and Themes for Mobile Development

I'm going to use a combination of modules and themes, outlined below. There are alternatives to all of them, of course - indeed, you can use some of these in combination with other modules. I'll briefly discuss some of the alternative approaches later, but also explain why I've used the modules I have. I should also point out that the approach is far from perfect. A lot of hard work has gone into this area, but there's no fool-proof solution, only a number of options which could be used as the basis for further work. Here's a quick run-down of the modules I'm going to use.

Mobile Tools

The primary function of the Mobile Tools module is to maintain separate versions of a website, typically switching the theme and optionally, by enabling us to use separate domains (typically either a simple subdomain - such as m.acme.com - or using a .mobi top-level domain). There are other useful features of Mobile Tools, too. There's an option to offer an alternative homepage for the mobile version, as well as the ability to alter the number of posts featured on the front-page for the mobile version (which is particularly useful if your site functions as a blog). Mobile Tools also allows you to create equivalent user roles for mobile users; for example alongside your standard anonymous user role you can configure an anonymous mobile user role, who might for example have a sub-set of the standard user's permissions. In this way we can strip out certain content or functionality for mobile users, where it's not appropriate or useful.

Notable alternatives to Mobile Tools include Mobile Plugin and Domain Access.

Nokia Mobile

Nokia Mobile is a Drupal theme which also incorporates some useful additional functionality. Most importantly it provides a solid basis for a mobile theme. One of the advantages of the Nokia Mobile theme is that it incorporates the notion of device groups - something also provided by Mobile Tools - which allow the theme to be re-used across varying "classes" of devices; from high-end smartphones down to more limited, older devices with significantly reduced capabilities.

Notable alternatives to Nokia Mobile include mobile_garland, Mobile and for iPhones, iUI.

Browscap

Fundamentally, the mechanism for customising a website for mobile devices over a desktop version - or tweaking a theme according to the capabilities of the device being used to display it - is based on browser detection; that is, examining your user agent string to try and determine what device you're accessing the site on. Browser detection is a far from foolproof process which is fraught with complications and difficulties - some historical, some come are down to variations (or lack of) standards, and are essentially a by-product of the sheer number of devices out there. Browscap is a store of information about the capabilities of various devices - of which there are a considerable number - which is updated regularly. This information is made available as a zipped-up text file, and the Drupal module populates the database with this information.

One notable alternative to Browscap is WURFL. Device Atlas offers a similar type of device information commercially, although there doesn't appear to be a Drupal integration (yet?).

In the next part, I'll look at the installation and configuration of the Mobile Tools module.