• About Us
  • Blog
  • Basket
  • Account
  • Sign In
  •  

Blog

Published on Tuesday, June 18, 2013

Using 51Degrees.mobi Mobile Theme Switcher For Drupal To Create A Mobile Optimised Website

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 51Degrees.mobi Mobile Theme Switcher for Drupal

  1. Download and install the Library API. This is used to link to the 51Degrees.mobi 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 51Degrees.mobi Mobile Device Detector. Just like the Library API, the package needs to be installed via the module page.

  3. Before activating the plugin 51Degrees.mobi 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 51Degrees.mobi.php file should be /sites/all/libraries/51Degrees/51Degrees.mobi.php.

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 51Degrees.mobi 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.

Comments (0)
Joe Davine
Joe Davine>

Products Team

Marketing Executive for 51Degrees.mobi

Other posts by Products Team
Contact author

Name:
Email:
Subject:
Message:
x

Tags

.NET 4G 51Degrees 5G Acer Adform Adtech Advertising Afilias Alcatel Amazon AMP Analysis Analytics Android Apache API Apple Asian Market ASP.NET Asus Blackberry Browser C C# Centro Chrome Cloud CMS CPU CSS3 Data Data Blog Data File Daydream Design Detection Developers Device Device Data Device Detection Device Intelligence Device Models Device property DeviceAtlas Disney dmexco DotNetNuke Download ebay Ericsson Event Facebook Firefox Foundation Framework Galaxy git repositories Google Google Analytics Google Daydream GPU GSMA Guess HAProxy Hash Trie HTC HTML5 HTTP HTTP Headers Huawei Infinix Ingeniux Internet usage iOS iOS 13 ipad iPadOS iPhone iPhone 11 Java Javascript Kentico LG Liferay LTE m.dot Memory Memory leak Meta Data Microsoft Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Motorola Mozilla MWC MWC 2017 MWC16 Native Apps NET New Release News Nexus NFC NGINX Nokia OnePlus 5 Opera Operating System Oppo Optimisation OS Patent Performance PHP Press Release Price Band programmatic Publishers Python Redirection Research Responsive Images Responsive web design RESS Review RTB RWD Safari Samsung Scala ScientiaMobile SEO Server Server-side optimisation Seznam.cz Sitecore Smart TV Smartphone Smartwatches Sony Swedish Beers Tablet Tencent Testing Tips Tutorial Umbraco Update User Agent User-Agent Valgrind Varnish Varnish Cache Video Vodafone VoLTE Web Web Apps Web content management Webtrekk White Paper Widgets WiFi Windows WURFL Xiaomi Xperia ZTE