Drupal iPhone apps and mobile themes

Drupal iPhone mobile themes, special introduction: In this article I take a quick look at the existing Drupal iPhone themes. The reason I say this is a "quick look" is because none of the themes seemed to work very well out of the box. This is a bummer for me, not only because I have a lot of work to do, but because I normally like to share solutions to problems.

In the end, I ended up following some CSS and JavaScript instructions from a terrific book to theme my own "Drupal iPhone app", and was able to create a much better iPhone look and feel than these themes offered.

Creating a Drupal iPhone app

Over the last few days I've been developing a custom, mobile Drupal application, specifically a Drupal iPhone app. I was hoping to find an off-the-shelf Drupal iPhone theme I could just plug in and start using, but sadly, this has not been a pleasant experience.

I've tried all of the Drupal iPhone themes listed shown below, but as you'll see from those images, none of these mobile Drupal themes does what I hoped for out of the box. I hoped that if I just followed the normal Drupal form coding and theme standards and plugged in one of these themes some really good things would happen, but alas, that didn't happen at all.

Thinking I might have made a mistake in my programming, I also went back and looked at the standard Drupal login form and other simple web pages, but sadly the results were the same.

Drupal mobile iPhone themes - Screenshots

I could try to describe the problems I encountered, but rather than write about it, I'll just show you a screenshot of each theme after it was applied to my very simple, very standard, Drupal form.

Nokia Mobile Drupal Theme

Here's an iPhone screenshot of the Nokia Mobile Drupal theme. As you can see, I left the breadcrumbs on the form to see what they'd look like, and my simple Drupal form has only three textfields, two with help, a Save button, and a Cancel link:

Drupal iPhone theme - Nokia Mobile theme

iDrupal UI Theme

Here's an iPhone screenshot of the iDrupal theme using that same Drupal form:

Drupal iPhone theme - iDrupal theme

Fusion Mobile Drupal Theme

Here's an iPhone screenshot of the Fusion Mobile Drupal theme:

Drupal iPhone theme - Fusion Mobile Drupal theme

iWebkit Drupal Theme

Here's an iPhone screenshot of the iWebkit Drupal theme:

Drupal iPhone theme - iWebkit theme

iUI Drupal Theme

Here's an iPhone screenshot of the iUI Drupal theme:

Drupal iPhone theme - iUI Drupal theme

Drupal Mobile

Here's an iPhone screenshot of the Drupal theme named "Drupal Mobile":

Drupal iPhone theme - Drupal mobile app theme

Drupal Mobile Theme

Here's an iPhone screenshot of the Drupal theme named "Drupal Mobile Theme":

Drupal Mobile theme

As you can see, out of the box, none of these themes look like an iPhone app.

Drupal mobile iPhone themes - Documentation

A hard part of trying to work with these Drupal mobile themes (iPhone themes) is (a) they looked like this and (b) the lack of documentation with the themes. A few themes send you to websites that show that the theme should work, but as you can see, out of the box, none of the themes look very good, let alone look like an iPhone app.

(Theme developers: If I've done something wrong please let me know. All I did was create a very standard Drupal form, set the default to each theme, then took a screenshot of the theme. For the record, other pages like the Drupal login page, simple content pages, and simple UL/LI link lists don't look good either.)

Drupal iPhone app development

Once I struck out with each of these themes, I went to Amazon and started searching for books about creating iPhone apps with just HTML, CSS, and JavaScript. Fortunately I found a wonderful book titled Building iPhone Apps with HTML, CSS, and JavaScript, and that book has made a huge difference. In fifteen minutes I was able to use his CSS examples to make the menus for my Drupal app look much more like an iPhone app. With a few tweaks to my Drupal theme files (page.tpl.php and the CSS files), here's what my Drupal menu looked like:

Drupal iPhone app - Drupal mobile theme for an iPhone app

After some background information in the first chapter or two, the author also shares some tools that can really help with Drupal iPhone app development, things I wouldn't have learned if one of these themes had worked. While I'll have to do more work than I hoped for, the book demonstrates some terrific AJAX techniques that will help make my Drupal mobile app look and feel much more like a native iPhone app, which is what I really want.

Drupal iPhone themes and app development - Summary

While I struck out when trying to use the current group of Drupal iPhone themes, I've found some wonderful HTML, CSS, and JavaScript programming techniques that will help me create a Drupal iPhone app that will really look and feel like a native iPhone app. If there's anyway I can make this into a Drupal iPhone theme myself I'll be glad to share my work, but I don't know if and when that will happen.