Alternative to the Mobile Tools Module for Drupal. Go mobile the easy way.

There is a great way to handle mobile devices for Drupal and it is not the Mobile tools module... If you are confined to one url, willing to turn off caching and like to forward users away from content then use the module tools module.

I have the basic criteria for my sites:

1, Full caching enabled, including page compression and combined files.

2, Intelligent redirects. If a user comes in via a outside link they should be redirected to that piece of content in mobile form.

3, Mobile home page and menus. I need to be able to serve up mobile optimized views via the sites main navigation and offer my mobile users a separate homepage.

The mobile tools module offers a easy point and click solution. It has the ability to handle a mobile url and theme switching. The problem is that theme switching on the same url does not work with Drupal's caching system. So I tried the mobile url approach. Even worse this just dumps users on the mobile homepage.

Easy solution:

1, Make a separate sub domain or url (mobile.yourdomain.com for example)

2, Add a settings file and folder for the new URL. (mobile.yourdomain.com/settings.php)

3, Set the theme & front page conf variables in the new settings.php files.

4, Switch the theme/url with JavaScript not PHP!!! This keeps drupal's caching in check and allows you to retain the requested page path.

Settings.php file for your mobile url

Uncomment out the $conf = array(). Now add the variables for frontpage and theme.

$conf = array(
'theme_default' => 'mobilewebkit',
'site_frontpage' => 'node/2140'
);

Javascript to switch URL's:

In your page.tpl file add this to your desktop theme and change the your domain.com variable to your site. You could probably get fancy and populate this with PHP if you needed more url flexibility. If you do do that keep the function client side (Java Script) for caching.

function MobileSwitch(){
	if((navigator.userAgent.match(/iPhone/i)) 
	||(navigator.userAgent.match(/Android/i)) 
	||(navigator.userAgent.match(/iPod/i)))
	{ 
		//switch for the three browsers above;
		var urlTofwd = "http://mobile.yourdomain.com" + location.pathname;					
		location.replace(urlTofwd);
	}
	
	else{
		//do nothing for desktop browsers;
		}
	}
MobileSwitch();

Now Inverse the switch for you mobile page.tpl files to send desktop browsers to the full version of your site:

function MobileSwitch(){
	if((navigator.userAgent.match(/iPhone/i)) 
	||(navigator.userAgent.match(/Android/i)) 
	||(navigator.userAgent.match(/iPod/i)))
	{ 
		//do nothing for these browsers;
	}
	else{
		var urlTofwd = "http://www.yourdomain.com" + location.pathname ;
		location.replace(urlTofwd);
 		}
	}
MobileSwitch();

The + location.pathname ; tacks on the requested page path to your new URL. This keeps the redirect as unobtrusive as possible to your user. A pet peeve of mine is getting dumped on a sites homepage after coming form a google result.

There you have it, four easy steps to go mobile for your drupal site.