Easy Mobile Sites with Drupal + Mobile Plugin

Let's talk Drupal mobile sites.

Some Background

Mobile device use on the web is increasing rapidly and two things are very clear: this isn't going to change and websites aren't keeping up. This particular article on consumer dissatisfaction about mobile browsing was just posted today. So this weekend I did some research on methods of making a mobile site with Drupal.

A couple things that sparked my interest: Tom Deryckere (twom) did a session on making mobile sites in Paris that included some talk about the Siruna project, but sadly I was too jetlagged on Day 2 to attend. It looks interesting, but the only info currently on the project page is that it "will be relaunching" soon, so there was nothing to test at the time of this writing. The Mobile Web Blob (http://www.mobiledrupal.com/) also had some good info, but the free, easy solution I used wasn't the obvious one.

Mobile Plugin + mobile_garland

Mobile Plugin uses WURFL, a FOSS project that collects information on mobile devices and their capabilities, then compiles all this info in an xml file. Easier-to-understand info can, as always, be found on Wikipedia. Mobile Plugin isn't the only drupal module to utilize WURFL, notable projects are the WURFL module, which is mostly an API for developers, and Mobile Tools, sponsored by Siruna. Essentially, there are a lot of Drupal modules that can handle device detection. But Mobile Plugin is paired with a nice-looking, easy-to-use theme to work off of, which is a huge bonus to someone who has never worked with mobile themes before.

The good stuff:

  • Mobile Plugin is easy to setup and has clear documentation (http://drupal.org/node/458912).
  • The mobile_garland theme worked beautifully out-of the box and only required light css, mostly color and font changes, to customize.
  • The included Youtube module turns embedded Youtube videos on the site into thumbnail images with links to the video on Youtube, making it easy for mobile devices to view videos.
  • It uses device groups, which means you can have a mobile theme for all wireless devices, or separate themes for iPhones, G1s, Blackberries, etc. And you can do all this from a GUI in the Drupal admin pages.
  • Optionally scale images and add max resolution on a per-theme basis.
  • Included "Switch between full/mobile site" block.

The 'needs work' stuff:

  • If you don't follow the install instructions, you can get a WSOD and/or error out on install. Specifically, I forgot to add write access to the WURFL config file on install and had to un-/re-install to make everything happy again.
  • The Garland color-picker in theme configuration doesn't work. Actually, changing the color set at all breaks the theme. With how few changes I had to make to the css, though, this is a very minor complaint. However, if this gets fixed you could have a customizable stock mobile theme without touching css, which could really appeal to new users and increase mobile_garland's userbase.
  • Mobile_garland is very simple. Okay, this one isn't really a problem so much as such as a discussion. On one hand, it makes a lot of sense to keep mobile themes very stripped-down to maximize usability on devices with small screens and limited hardware. But hardware is improving tremendously, and there are some really nice-looking mobile sites out there. So hopefully with all these awesome device-detection modules we'll start seeing an influx of new themes to go along with them. But mobile-garland is a great start.

Go ahead! Read this blog post on your smartphone and tell me what you think!