Introduction

This tutorial is a description of how to setup the mobile version of a Drupal site with theme switching and automatic redirection to the mobile site that works with static page caching mechanisms (Boost module). Redirection is done on Apache's level instead of the PHP level (.htaccess instead of php code).

Notes:

• A nice alternative to this approach would be Cache by theme for mobile sites, but it's not yet 100% functional
• Using a separate url for the mobile site (m.example.com) will make Boost cache the mobile site separately
• Static page cache (Boost) blocks PHP level redirects, like those of the Mobile Tools module Boost and Mobile Tools.

This document presumes you already have a working Drupal site (www.example.com) with a mobile subdomain (m.example.com) that points to the same installation and that you know how to administer themes in Drupal.

Instructions

Step 1: Install and enable your mobile theme

Here's a list if you need something to start with:

• Nokia Mobile
• Fusion Mobile
• Mobile
• .mobi
• iUI

Step 2: Set up theme switching and an alternate mobile frontpage

Theme switching is done in the settings.php file, usually located at /sites/default/settings.php.
_{If you have assigned the $base_url variable within your settings.php you need to set up a different settings file for your mobile site. Move /sites/default/settings.php to /sites/example.com/settings.php, and create a copy at /sites/m.example.com/settings.php and set $base_url = 'http://m.example.com' and add the theme switching code to this file. You can skip the if conditional in this case.}
Add this code to the bottom of your settings.php file _{(/sites/default/settings.php or /m.example.com/settings.php)}:

$parts = explode('.', $_SERVER['HTTP_HOST']);
if ($parts[0] == 'm') {
  $conf = array(
    'theme_default' => 'mobile_theme_name',
    'site_frontpage' => 'mobile_frontpage_address'
  );
}

Replace mobile_theme_name with your mobile theme name (nokia_mobile, fusion_mobile, ...) and mobile_frontpage_address with the address of a page you would like to use as the frontpage on your mobile site (node/2, mobile-home-page, ...).
Set $cookie_domain = '.example.com' in settings.php for cross site authentication (shared user sessions between the two site versions).

Test by browsing to m.example.com, you should see your mobile frontpage using the new mobile theme, while www.example.com should still work just like before.

Step 3: Redirecting the mobile visitors and storing preferences

Add these lines into your .htaccess file BEFORE the boost cache instructions (it's located in your Drupal installation's root directory). This will detect and redirect mobile visitors based on user agent. Browsing to
www.example.com/?device=mobile or www.example.com/?device=desktop will set a cookie used to automatically redirect the user in the future to the version of his choice.

  #set cookie (in the client's browser)
  RewriteCond %{QUERY_STRING} ^(.*)device=desktop(.*)$
  RewriteCond %{QUERY_STRING} !^(.*)device=mobile(.*)$
  RewriteRule .* - [CO=mt_device:desktop:.example.com:1440:/]

  #redirect to desktop site based on url or cookie
  # don't apply the rules if already in the desktop site, infintine loop
  RewriteCond %{HTTP_HOST} !^www\.(.*)$
  #use this instead if the site is accessed WITHOUT the 'www.' prefix
  #RewriteCond %{HTTP_HOST} !^example\.com$
  RewriteCond %{QUERY_STRING} ^(.*)device=desktop(.*)$ [OR]
  RewriteCond %{HTTP_COOKIE} mt_device=desktop
  RewriteRule ^(.*)$ http://www.example.com/ [L,R=302]
  #use this instead if the site is accessed WITHOUT the 'www.' prefix
  #RewriteRule ^(.*)$ http://example.com/$1 [L,R=302]

  #no redirect to mobile when cookie=desktop and user agent is mobile
  RewriteCond %{HTTP_HOST} !^m\.(.*)$
  RewriteCond %{QUERY_STRING} !^(.*)device=mobile(.*)$
  RewriteCond %{HTTP_COOKIE} mt_device=desktop
  #skip the next two rules
  RewriteRule .* - [S=2]

  #set cookie (in the client's browser)
  RewriteCond %{QUERY_STRING} ^(.*)device=mobile(.*)$
  RewriteCond %{QUERY_STRING} !^(.*)device=desktop(.*)$
  RewriteRule .* - [CO=mt_device:mobile:.example.com:1440:/]

  #redirect to mobile site based on url, cookie or device type
  # don't apply the rules if already in the mobile site, infintine loop
  RewriteCond %{HTTP_HOST} !^m\.(.*)$
  RewriteCond %{HTTP_HOST} ^www\.example\.com$ [NC]
  #use this instead if the site is accessed WITHOUT the 'www.' prefix
  #RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
  RewriteCond %{QUERY_STRING} !^(.*)device=desktop(.*)$
  RewriteCond %{QUERY_STRING} ^(.*)device=mobile(.*)$ [OR]
  RewriteCond %{HTTP_COOKIE} mt_device=mobile [OR]
  #http://ohryan.ca/blog/2011/01/21/modern-mobile-redirect-using-htaccess/
  RewriteCond %{HTTP_USER_AGENT} "android|blackberry|ipad|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile" [NC,OR]
  # http://ohryan.ca/blog/2009/02/18/revisiting-mobile-redirection-using-htaccess-rewrite-rules/
  # if the browser accepts these mime-types, it's definitely mobile, or pretending to be
  RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC,OR]
  # a bunch of user agent tests
  RewriteCond %{HTTP_USER_AGENT} "sony|symbian|nokia|samsung|mobile|windows ce|epoc|opera mini" [NC,OR]
  RewriteCond %{HTTP_USER_AGENT} "mini|nitro|j2me|midp-|cldc-|netfront|mot|up\.browser|up\.link|audiovox"[NC,OR]
  RewriteCond %{HTTP_USER_AGENT} "blackberry|ericsson,|panasonic|philips|sanyo|sharp|sie-"[NC,OR]
  RewriteCond %{HTTP_USER_AGENT} "portalmmm|blazer|avantgo|danger|palm|series60|palmsource|pocketpc"[NC,OR]
  RewriteCond %{HTTP_USER_AGENT} "smartphone|rover|ipaq|au-mic,|alcatel|ericy|vodafone\/|wap1\.|wap2\.|iPhone|android"[NC]
  #iPad user agent has "Mobile", but we treat it as desktop
  RewriteCond %{HTTP_USER_AGENT} !ipad [NC]
  #status code 301 would stop future switching between desktop/mobile bcs. browsers cache that status code
  RewriteRule ^(.*)$ http://m.example.com/$1 [L,R=302]

One last SEO tip

Duplicate content, Canonical URLs and robots.txt

That's it, time to adapt your content for your mobile site.
Happy mobile browsing!

References

• Murray Woodman: Mobile Drupal, a very detailed writing in four parts
• Modern Mobile Redirect Using .htaccess
• Revisiting Mobile Redirection Using .htaccess ReWrite Rules
• Apache Module mod_rewrite
• Cache by theme for mobile sites.
• Boost and Mobile Tools