Drupal:Mobile site Creation

Recently, I was asked to create a mobile version of an existing Drupal website. Ideally, the two sites would run off the same database so that the same content could be used. There are a number of ways of approaching this, but the trick in this case was that the desktop site was already complete and in production.  So whatever method I used needed to be able to work with the existing configuration.

I decided to use a separate sub-domain for the mobile site: m.<domain name>.edu

Next, I needed to allow two different themes based on which version of the site a user was visiting.  This could be accomplished by creating two site directories in the multi-site installation with two settings.php files with the default theme set in the mobile settings file.  However, I decided to use the mobile tools module which provided theme-switching as well as redirects based on user agent.

The next problem I needed to solve was how to display panels, views, and nodes in a much more narrow screen size. For panels, this was incredibly straightforward.  Panels allows you to create panel varients with conditions that decide what varient is displayed.  In this case, I had two varients: one for the desktop theme and one for the mobile theme.  Panels also allowed me to create overrides for the node views of specific node types.  As an additional (and poorly labeled) feature, it is possible to have mobile CCK display settings (mis-labeled as a 2nd RSS tab under the display settings).  These mobile display settings are only used if the panels override is being used.  (Very strange, but it allowed me to create custom imagecache sizes for photo fields that I wanted to still display in the mobile version.)

Views were the trickiest.  A grid view really wouldn't look good on a 320px screen no matter what.  There were two options.  I could create custom theme preprocess functions for each view and somehow make all of them more mobile-friendly - smaller image sizes, no grids.  Or I could redirect folks from those view URLs to other pages of my choice in the theme page preprocess function.  To make this slightly less ghetto, I created the alternative pages using panels.  The alternative mobile URLs would only exist if the current theme was the mobile one, otherwise it would return a 404 error.