Work Collaborate About Contact Blog
Work Collaborate About Contact Blog

Load a Different Theme on Mobile Devices in Drupal 7

Submitted by chris on Fri, 12/30/2011 - 09:10

I recently finished a project and soon after the customer asked that the site load a different theme if the visitor was on a mobile device such as an iPhone or Android phone. The site is in Drupal 7 and the mobile version needed to load the same content as the main site. I came up with these requirements:

  • Detect if the user is on a mobile device.
  • Redirect the user to a different url.
  • Load a different theme.

Modules

Mobile Tools
This module took care of the requirements above. There are other options for mobile browsers such as loading another front page page, loading themes depending on device (for example you can load another theme for BlackBerry devices), and many more. I didn't need the numerous options but it's good to know they're there if I ever need them.

Project Setup

First I created a subdomain to take care of the mobile url. This was easy - I simply created a subdomain (for example mobile.domain.com) in the hosting panel and made its document root the same as the main site.

I then created and enabled a mobile theme. It was agreed that we use the jQuery Mobile framework because it has a unified theme skinned in CSS, handles page transitions, and it uses the familiar jQuery syntax. All good reasons since the mobile site had to be up asap.  We also added a fun effect on one of the pages where page content changes if the user shakes the phone. This was accomplished using WKShake.

It was then time to configure Mobile Tools.  In the module configuration page under the tab Notification/Redirection I enterd the subdomain in Mobile URL, the main site url under Desktop URL, and under Redirect Options check off automatic redirection of the mobile user. In the 3rd tab Theme Switching I selected Switch theme based on the URL and selected my new theme in the theme dropdown. In the 4th tab External Modules I selected Mobile Tools as the detector.

Result

After a couple weeks of tinkering a mobile site was up and running for the eg Conference website. Have questions, comments, or have a better method? Please post in the comments below.