Mobile Theme for Drupal CMS

Hello Website Owners!

While using my newest version of Long Tail Magic I discovered that more than 40% of traffic coming to my sites (including Raakesh.com) are cell phone users. My Browser Report on Long Tail Magic showed me that people using Androids, IPhone, Ipad, Blackberry, and Palm PCs are visiting my sites. Here's a raw snapshot:

BlackBerry8520/4.6.1.272 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/603
Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0_1 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Mobile/7A400
Mozilla/5.0 (iPod; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Mobile/8A293
Mozilla/5.0 (Linux; U; Android 2.1-update1; en-us; Droid Build/ESE81) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; en-us) AppleWebKit/531.22.7 (KHTML, like Gecko) Version/4.0.5 Safari/531.22.7
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/531.22.7 (KHTML, like Gecko) Version/4.0.5 Safari/531.22.7

So the first thing I did was to grab my Android G1, and point my Dolphin Browser to raakesh.com and I was disappointed to see the results. There was a never ending horizontal scroll on the site, and a huge vertical scroll. I had to move my cursor to right, and down to get to the first post. Totally disappointing. I have been getting a huge amount of mobile users to my sites since a few months. My Bad.

I could not do anything about the traffic that had come to my site in the past, but I could surely control the future. To fix the problem, I used two Drupal Modules and one Drupal Theme.

- Drupal Mobile (Theme) drupal.org/project/mobile
- Drupal Mobile_Theme (Module) drupal.org/project/mobile_theme
- Browscap (Module) drupal.org/project/browscap

So Here's how to make a Mobile (only) version of your Drupal site, and how to make the system auto-detect a mobile user, and use that theme.

Download the Modules and Themes
Download and upload the 2 modules (Mobile_Theme and Browscap) and 1 theme (mobile) into the module and theme directory of your Drupal installation respectfully.

Install Modules
Once uploaded, go to Administer > Modules, check the checkbox next to Mobile_Theme and Browscap and hit Save.
Go to Administer > Browscap and hit the "Refresh Now" button. This will update all the known browser files. You do not need to check the "monitor browsers" checkbox.

Configure Theme
Once that is done, go to Administer > Themes
a) Check the "enabled" checkbox to enable the mobile theme (do not make it default).
b) Then go to Administer > Themes > Configure
On the right (Mobile_Theme) select the Mobile theme from the dropdown and hit save.

You are done. Now when a visitor opens your site on their cell phone, they will see a mobile friendly version of your site.

Enjoy.

Comments