Building our mobile site and leveraging Drupal to make it easy.

We recently launched a mobile (smartphone) optimised version of our site, thanks to Drupal the process was actually quite simple! Here's how we did it.

There are a number of approaches that you can take when making a mobile site, we opted to make use of the existing content of the current site, and simply alter how this is presented to the user. We also decided that in order to view the mobile site you would need to visit the mobile subdomain: http://m.deeson.co.uk. These were our implementation requirements.

Next we have our device specific constraints. With the advent of the iPhone and Android the face of mobile has changed, and the devices that we're aiming for are far more capable than feature phones. Even though these advances have taken place when implementing a mobile site we still need to keep in mind:

• Screen size - this is an obvious one, when coding your HTML/CSS you ideally should keep this flexible and avoid specifying fixed widths in the layout, as screen size can vary from device to device and also the orientation of the device.
• Page size - the amount of data that a user has to download to view a page on your site can greatly impact on the users experience, we need to consider that a users connection speed can be variable (Edge, 3G, Wifi) depending on reception. Some people also still have data caps to worry about too!
• Available technologies - JavaScript, HTML & video. Again we want to avoid make assumptions about what is available and progressively enhance. As with your desktop site your site should function with JavaScript disabled, don't assume that you'll have Flash at your disposal and don't expect any consistent availability of HTML5 features. On video, this has been a rapidly progressing case with HTML5, if you want to serve up video there are now some ways to provide as many devices with it as possible e.g. Video for Everybody! http://camendesign.com/code/video_for_everybody.

The most important factor to us of the device constraints is that we don't effectively serve up a resolution responsive layout and call it mobile (See James Pearce's excellent post "Not a mobile web, merely a 320px-wide one" http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one/).

With Drupal's theme system we can meet our first implementation requirement, and address our device constraints. In our mobile theme we simplified everything where possible by reducing code (markup, CSS and JavaScript), reducing the number of regions we offer in the theme (now just Pre content, Post content and Footer). Through making use of different theme we also get the advantage of being able to use different blocks in different regions for the mobile theme without effecting or altering any blocks used on the desktop theme.

A good example of taking advantage of this is where we don't have a full navigation on every page of the mobile site, whereas on the desktop site we do. So for the section landing pages we made use of the Menu block module http://drupal.org/project/menu_block to provide suitable section navigation e.g. http://m.deeson.co.uk/online, this is unique to the mobile site, but using the same menu system data.

Now that we have a mobile theme, we need a way to serve it! We tend to work on a LAMP stack, so in our Virtual host entry for deeson.co.uk we simply added that m.deeson.co.uk would act as an alias so all requests would be redirected to deeson.co.uk. Next we'll make use of Drupals multisite capabilities to specify a different theme when accessing the site from the mobile subdomain. We do this by creating a new folder in the /sites directory titled "m.deeson.co.uk". Copy your main settings.php file (probably from /sites/default) into the new folder.

Edit the copied settings.php file (/sites/m.deeson.co.uk/settings.php) and add in the following code (or add the array items to the $conf array if you're already using it):

$conf = array( 'theme_default' => 'deeson_mobile', 'file_directory_path' => 'sites/default/files', );

This code specifies the default theme the site should use when responding as http://m.deeson.co.uk, in our case 'deeson_mobile' which is the machine name of our mobile theme. We also specify that the files directory is still the standard one for the site, this avoids any trouble where Drupal might look for uploaded files within /sites/m.deeson.co.uk/files/.

At this point we have our mobile theme setup and the site accepting request for http://m.deeson.co.uk, and showing the correct theme. As the content of the mobile site is the same as on the desktop site, we don't want any search engines to index the site, to prevent this you can either add a meta tag to your mobile themes page template, or do the following: http://blog.cherouvim.com/robotstxt-control-for-host-aliases-via-mod_rewrite/.

The final thing to do is redirect mobile users to your site! There are a number of ways to do this, one in particular would be to use the http://drupal.org/project/mobile_tools. module, another being redirect using mod rewrite via htaccess http://www.projectronin.com/blog/?p=10.

Our approach is more laid back, we detect if the user is on a device that might want to use the mobile site, and then present them with a message giving them the option to go to the mobile site, or to continue browsing the desktop site. We remember with cookies that the user has been presented with the message and made a choice, after that point we don't show the message anymore.

And voila!