• 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 2013 2014 4G 51Degrees 5G A.C.Roma A7 ABI Acer Affiliate Marketing Alcatel Amazon AMP Analysis Analytics Android Android 5.0 Lollipop Android Kitkat Android Lollipop Android Media Stick Apache API Apple Apple TV Archos Asha Asian Market ASP.NET Asus Australia Big Data Black Friday Blackberry Blink Browser C C# Case Study CeBIT CES Chrome Cloud CMS combinations Comparison Competition CoolPad COTW Cron CSS3 Data Data Blog Data File Data Model Daydream Denver Design Desire Eye Desktop Detection Developers Device Device Data Device Detection Device Intelligence Device Popularity Device property Device Types Device Use Display dmexco DoCoMo Doogee DotNetNuke Download Drupal Email EReader E-Reader Ericsson Evaluation Event Examples EXPLAY Rio Facebook feature Firefox Firefox OS Fly Foundation Framework France Galaxy S3 Galaxy S5 Galaxy Tab A Galaxy Tab A 8.0 Galaxy Tab A 9.7 Germany git repositories Global Google Google Daydream GSMA HAProxy Hardware Hisense HTC HTC ONE MAX HTC OS HTML5 HTTP HTTP Headers Huawei HUAWEI. UPDATE HUDL Huwaei IBC Icemobile Prime 4.0 IE IFA IIS Image Optimiser Image Optimizer India Infographic Ingeniux Internet usage iOS iOS 7 iOS 8 ipad iPhone iPhone 6 IsEmailBrowser IsWebApp Italy Japan Java Javascript Jolla Kentico Keynote Kindle Kindle Fire Kindle Fire HD Leagoo Lenovo LG Location Log File Analysis LTE Lumia m.dot macOS Map Memory Meta Data Mi 4S Micromax Microsoft Miia Style Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Module Motorola MVC4 MWC MWC 2017 MWC16 MyPhone Native Native Apps NET New Release News News Letter Nexus Nexus 6 Nexus 9 NFC NGINX Nokia Nokia 3310 Non-Mobile NVIDIA Omate On7 OnePlus 5 Opera Opera Mini Operating System Optimisation OS OSX 10.10 OTA Panasonic Patent PC Pebble Performance phablet phone PHP Poland Presentation Press Release Price Band PRIV programmatic PS4 Python QMobile QR Codes Redirection Research Reseller Responsive Images Responsive web design RESS Review reviews RIM Ringmark RTB RWD Safari Samsung Scala Screen Screen resolution Screen Size SEO Server Server-side optimisation Set Box Set Top Box Sharepoint Shark 1 SHIFT phones Sitecore Sitecore version 9 SLUSH Smart TV Smartphone Smartphones Smartwatches Snapdragon Sony Sony Xperia Spain Swedish Beers Symbian Tablet Tablets Tesco Testing Tips Top 5 TOTW TV UDS UK Umbraco Update updates US User Agent UserAgent User-Agent Vendors Version 3 VoLTE VR Wearable Web Web Apps Web content management WebKit WebMatrix White Paper Widgets Widnows WiFi Wiko Wileyfox Windows Windows Phone Xbox XBox One Xiaomi Xperia Xperia z Yosemite Z10 ZenFon 2 ZOPO ZTE