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