Serving mobile from Drupal

Mobile devices are gaining incredible popularity when it comes to accessing web content. Web site owners and web developers are facing the challenge of having to serve all the needs of mobile users as well as web users. I have recently been given a chance to work on a Drupal site that serves web users and mobile users from one singe Drupal installation.

The idea of serving mobile sites with Drupal has long been around. Apart from the fact that mobile is an important focus of Drupal 8 development, a host of good contributed modules exists for previous versions that aim at making Drupal mobile friendly. These modules include Wurfl, Mobile Tools, and Responsive Images, to name a few.

Most often than not, a web site has an accompanying web app or mobile app, in which case web users and mobile users need to be served the same content. Not only does Drupal need to serve mobile in such cases, but it needs to serve two different platforms from the same installation.

There are various approaches as to how a Drupal site can serve mobile users:

• Native app. The app is developed specifically for a certain type of mobile device - Android or iOS devices, for example. In order for this type of app to share data with a Drupal based website, there needs to be a certain protocol set up between them. It could use an RSS feed for one way communication, or send and retrieve data through a JSON query for instance.
• Web app. The Drupal site serves as a web app, and it is completely designed to be viewed in a mobile browser. The site can be designated to serve mobile, or it can serve both mobile and desktop users by intelligently detecting the client's device and choosing the appropriate theme or even Drupal installation to use based on the detected device.
• Responsive layout. The site is designed to be viewable in any device with any size. Using CSS media queries and/or javascript, one single theme is set up to fit devices with various capabilities. As far as Drupal is concerned, there is no distinction between desktop and mobile surfers.

The particular website that I work on uses the web app approach. In our case, a simple responsive layout was out of the question, because the web app does need to serve data that is not supposed to be accessible, or not in the same particular form, through the full website. This Drupal setup uses two themes; one to server web visitors, and one to server mobile visitors. The first fundamental question at the beginning of the development was: how should we decide when to use the mobile theme? We had two options to choose from:

• Try to detect the visitor's device, and serve them the web app, when they are on a mobile device.
• Use different URLs for the full web site and the web app.

In the first case, we are given the convenience of having to distribute and memorize only one URL. The Wurfl module could be an excellent choice to detect mobile devices. Once a mobile device has been detected, switching themes can be as easy as placing the following line inside the right conditions.

$conf['theme_default'] = 'mobile_theme';

A drawback of this method could be the fact that the mobile detections may not always be accurate. It may happen every once in a while that a mobile user gets sent to the full site, or vice versa.

The second approach, using different URLs, was the one we went with. When the mobile site uses its own URL, there is no need to detect the visitor's device; the visitor chooses which site (mobile or non-mobile) they wish to see by entering the corresponding URL. While this adds the extra burden of having to know two URLs for the site, it also allows the user to, for instance, see the full site from their mobile device, if they so desire. After all, many mobile devices have a large enough screen to give an enjoyable browsing experience.

To do the actual switching between themes, we use Themekey module. This module can be set up to check for the URL through which the site is accessed, and pick a theme based on that value.

Besides selecting the right theme, there is certain custom behavior that is only appropriate for mobile or non-mobile. For example, we may want certain custom pages to be accessible from one, but not the other. We could check again for the URL in these places, but if the URL were to ever change, or we wanted to reuse the code, we would need to change the URL in every place where we check for it. Themekey already runs this check, and there is a way for us to reuse the result of the module's theme decision. The following function in our hypothetical mobile_helper module gives us a way to check whether we are on mobile or not, based on the rules that have previously been set up in Themekey.

<?php
function mobile_helper_is_mobile() {
  static $theme_candidate;
  if (empty($theme_candidate)) {
    require_once(drupal_get_path('module', 'themekey') . '/themekey_base.inc');
    $theme_candidate = themekey_match_rules();
  }
  if ($theme_candidate == 'mobile_theme') {
    return TRUE;
  }
  else {
    return FALSE;
  }
}
?>

The themekey_match_rules() function checks all the rules set in Themekey, and returns the name of the theme that will be selected, given the current conditions. The result is cached in a static variable; however, this might not be a crucial part, since Themekey's matching algorithm is mostly cached already. This function compares the name of the selected theme to that of the mobile theme, and if they match, TRUE is returned. For convenience, the name of the mobile theme may be set up as a module configuration setting. Having this function at our disposal, we can call it to check what platform is being served and adjust our module’s behavior accordingly.

Although developers can expect to face quite a few further challenges involved in setting up a mobile site, deciding on what type of mobile app will accompany a website is one crucial decision that needs to be made at the very beginning.