Using Mobile Theme Switcher For Drupal To Create A Mobile Optimised Website

Products Team

6/18/2013 2:01 PM

Device Detection Development Device Data

Developing a mobile optimised web experience has now become standard practice across the web. 71% of people expect a mobile website to load as fast as a desktop version, meaning performance is important to keeping your mobile audience.

51Degrees Mobile Theme Switcher for Drupal allows you to take existing content and offer it to mobile users with an optimised theme. You can quickly, easily and cost-effectively optimise your Drupal website for mobile performance by following these simple steps.

Install Mobile Theme Switcher for Drupal

  1. Download and install the Library API. This is used to link to the Detector without packaging it in the Drupal plugin. To install, you simply need to download either the tar.gz or the zip from the Library API page and install it from your websites module page.

    As the Libraries API is used by many other modules you may already have it installed.

  2. Download and install the Mobile Device Detector. Just like the Library API, the package needs to be installed via the module page.

  3. Before activating the plugin Device Data needs to be added to the installation. In your Drupal installation look for sites/all/libraries. If the libraries folder does not exist, create it (it must be at sites/all/libraries). Download and copy in the 51Degrees Detector (Lite or Premium) into a folder named 51Degrees. The filepath of the file should be /sites/all/libraries/51Degrees/

Install a Mobile Optimised Theme

Our test desktop website weighs in at 319kbs and takes 1.6seconds to load on a broadband connection. Mobile optimised themes can be installed to reduce page weight and to display content for different mobile device screen sizes and input types.

We used the Mobile theme by sillygwailo, a guide to installing themes can be found here


Create a New Rule in the Configurations Menu

We can now create a rule that will switch to the "Mobile" theme for all mobile devices:

  1. Check the 'Mobile' mobile checkbox in basic properties. Additional basic properties from the yellow box can be enabled by using Premium Device Data.
  2. Advanced properties can be used to go into more detail about what devices should be switched, such as the manufacturer or input methods. We don't need to complete this for now so we can ignore it.
  3. Finally, set which action should be taken. The drop down list has all currently listed themes and an extra option for specifying if a different URL should be used. Select the "Mobile" theme and press the 'Save Rule' button.

You should now be able to visit the site from a mobile device or mobile emulator to see your site responding to the device with the "Mobile" theme. We used "Mobile" as an example, a site may use any number of device optimised themes to ensure a great mobile web user experience.


By using a mobile optimised theme we have more than halved the web page weight and decreased the load time. The mobile user interface has also been improved allowing for the different screen sizes and mobile input types to be taken into consideration.


51Degrees can also be used to create custom themes that optimise for certain use cases. For example; creating a custom theme for your eCommerce web page to optimise for tablets. Tablet device users already have higher conversion rates than desktop users, showing the importance of developing web pages optimised for different device types.