Mobilize Your Drupal Site With Mobile Tools

Posted by Kathryn on May 24, 2010

Mobile is big and getting bigger. Unfortunately, there’s not a one-size-fits-all approach for mobilizing Drupal. Today, a plethora of modules and services exist to help developers create new iterations of traditional site interfaces. We chose Drupal’s Mobile Tools to help us mobilize McMillin Homes and create a custom user experience for their mobile visitors. Here's an overview of our process:

Mobilizing, at a Glance

Set up a mobile subdomain and configure its virtual hosts.
Adapt the site’s current theme for mobile devices.
Move from a single-site to a multi-site installation.
Configure redirections, session cookies, and theme switching.

Subdomains and Virtual Hosts

By convention, typical subdomains for a mobile site are "i" and "m." After adding m.mcmillinhomes.com to our DNS entries, we needed to verify the virtual host for our main domain (mcmillinhomes.com) would accept requests at m.mcmillinhomes.com as well. This configuration ensures both content and data are shared across the two sites and is necessary if you want to reuse the existing Drupal installation.

Theming for Mobile

The whole purpose of creating a mobile version of a website is to enhance the user experience for visitors accessing a site from a mobile device. A site like McMillin Homes may be perfectly effective on a modern monitor, but after it's scaled by a high percentage to fit on a smart phone, it becomes significantly less usable.

McMillin requested a mobile-based version of their site to streamline the process of finding a home from a mobile device. With this goal in mind, we designed a stripped-down version of the site's existing theme. There's little difference between coding a mobile and a desktop theme.

When you begin to build a mobile theme, however, be aware of your use of jQuery. Some mobile browsers are incapable of running javascript. To alleviate this situation, offer an alternative, non-scripting solution if the user agent is not supported. Here's an example of iPhone-specific detection:

template.php

<?php

	  class template {

	    public static function supported() {

	        $user_agent = $_SERVER['HTTP_USER_AGENT'];

	      if(preg_match('iphone',$user_agent)) {

	         return 'supported';

	      } else {

	         return FALSE;

	      }    

	    }

	  }

	?>

Transitioning to a Multi-Site Installation

When we first redesigned and deployed the new McMillin Homes site in 2009, we didn’t have the foresight to structure our sites directory to accommodate for a multi-site installation. Our original folder structure was that of a typical Drupal installation: sites → default → files, sites → all → themes, sites → all → modules, etc.

Usually, subdomains don't require a multi-site configuration, but in our case, m.mcmillinhomes.com needed to share files and a database with the main domain, mcmillinhomes.com. They also needed to cache simultaneously, as one.

We transitioned to a multi-site installation by adding two new directories inside our sites directory: sites → mcmillinhomes.com and sites → m.mcmillinhomes.com. After creating those, we moved the original themes folder, housing one contributed and two custom themes, into the themes folder in the new mcmillinhomes.com directory. Here's an example of how things look now, after the modifications:

New, Multi-Site Folder Structure

sites → all → modules
sites → default
- sites → default → files
- sites → default → settings.php
sites → mcmillinhomes.com
- sites → mcmillinhomes.com → settings.php
- sites → mcmillinhomes.com → themes
  - sites → mcmillinhomes.com → themes → mcmillin
  - sites → mcmillinhomes.com → themes → mcmillin_green
  - sites → mcmillinhomes.com → themes → mcmillin_mobile
  - sites → mcmillinhomes.com → themes → zen
sites → m.mcmillinhomes.com
- sites → m.mcmillinhomes.com → settings.php

Because our files and modules weren't moved, the integrity of the site wasn't compromised. Functionality remained intact and uploaded images to the files directory continued to be correctly called.

Configuring Mobile Tools

Once the steps above are completed, configuring Mobile Tools is a breeze. The module is highly configurable and the UI is straightforward.

We enabled automatic redirection of the mobile user to m.mcmillinhomes.com when navigating to mcmillinhomes.com on a mobile device. The theme switches based on the URL. We included a link to the non-mobile version of the site at the bottom of the mobile theme so visitors can still access the desktop version of a site from their mobile device, if they wish. To achieve this result, append ?nomobile=trueto the URL.

Helpful Resources

Mobile Tools - supplies Drupal developers with tools to assist in making a site mobile
- Make your site mobile with Mobile Tools - Mobile Tools documentation
- Switching between Desktop and Mobile - forum thread in Mobile Tools support queue
BrowsCap - provides a replacement for PHP's get_browser()function
iPhoney - a free iPhone web simulator for designers & developers

MONTHLY MARKETING INSIGHTS.

Get thought-provoking and actionable insights to improve how your firm makes a connection with your customers.

Submitted by Guest on Tue, 05/25/2010 - 1:57am

A few thoughts on your code examples. eregi is currently depricated (not to mention slow) and will not exist at all in PHP 6. preg_match() or strpos(strtolower()) would be the better way to go.

Also page.tpl.php should generally not contain if statements. A preprocess function in template.php would be the better choice.

cheers
dalin
Advomatic LLC

Submitted by Kathryn on Tue, 05/25/2010 - 11:32am

Thanks for the clarification, Dalin. I've updated my code samples from eregi to preg_match, a quick fix. And yes, you're correct — a page template should be used explicitly for markup and printing variables, not logic.

Submitted by Guest on Fri, 05/28/2010 - 3:45pm

I found your approach very interesting, all the examples (Mobile + Drupal) that I have seen usually employ the domain access module. Can you please provide more information on how you configured your settings.php? For example, what tables did share? etc.

Submitted by Guest on Fri, 09/17/2010 - 10:48am

I followed your instructions until the multi-site folder creation. I'm not sure how to go to the mobile site (m.mcmillinhomes.com). I tried in my own one but it keeps going to the one in the "all" folder. And when i type the exact link to the new created folders, i got the permission denied.
Can you help me please? I'm totally new to Drupal.

Thank you very much
Max

Submitted by Guest on Wed, 11/17/2010 - 3:59pm

I'm interested in that, too -- and I'm also wondering why you put the mobile theme in the other site's directory instead of the mobile site's directory?

Submitted by Kelly Hays on Sat, 04/30/2011 - 11:32pm

Thanks for a great tutorial. I have been searching drupal.org for a while on how too do this but I didn't find anything useful there. Your guide is informative and easy to follow.I wish drupaldocs had this info.

Submitted by Amy Peveto on Mon, 05/02/2011 - 9:33am

Thank you, Kelly! We're glad you found this post helpful. Feel free to share it with other Drupal developers/themers.

Submitted by artesweb on Mon, 06/20/2011 - 6:21pm

very good article about mobile web to me went very well for corporate web design project.

Submitted by tim on Fri, 07/15/2011 - 10:00am

iBBdemo is another option for iphone/ipad emulation.

Nice article!

Submitted by JD Collier on Fri, 07/15/2011 - 10:17am

Thanks for the tool suggestion, we'll check that one out. I like that it uses AIR and is cross-platform.

We'd also love to hear if anyone has seen a good Android emulator (other than the SDK). Something simple for mobile web would be great! Sometimes I just need a quick emulator without going through the full SDK.

Mobilize Your Drupal Site With Mobile Tools

Mobilizing, at a Glance

Subdomains and Virtual Hosts