Professional Drupal Web Developers in Atlanta, GA

Creating, Developing, and Implementing Mobile Sites in Drupal

Tue, May 31, 2011 - 12:44pm
Creating, Developing, and Implementing Mobile Sites in Drupal

We've had the privilege of developing a number of mobile sites. Mobile sites are fun, partially because it forces both the developer and designer to approach access to the particular website's content in a simplified, minimalistic way.

The idea is to present information in such a way that minimizes load time, minimizes or eliminates the user's need to resize the visible portion of their browser screen, and is legible on any given mobile device.

Modules

We have found the following modules to be particularly useful when developing a mobile site:

  • Mobile Tools - We use this module primarily for theme-switching based on path. When a mobile device is detected, the user is forwarded to the mobile URL resulting in the theme switch. Switching the themes this way allows for the option to view the full site if desired by the user.

  • WURFL - This module works in conjunction with the Mobile Tools module to assist in mobile device detection. WURFL stands for Wireless Universal Resource FiLe. In our mobile site applications it is used simply to detect a mobile device, but it has the capability to provide much more data about the device's capabilities.

Themes

There are a few mobile themes available (Mobile, Nokia Mobile, iUI), and these can be great options for a mobile site theme. We made the decision to create our own, custom mobile theme. If you are versed at all in creating Drupal themes, this is a relatively simple task since the goal is a stripped down presentation. One way to create your own mobile theme is to start with a default Drupal theme like Garland, Bartik, or Seven and strip it down to a minimalistic theme that is conducive to your mobile site design.

When creating a mobile theme, make sure to use a mobile DOCTYPE in the page.tpl.php file:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

Also make use of the "viewport" meta tag. Mobile browsers use the viewport meta tag to set the width and initial zoom level, among other things. For example:

<meta name="viewport" content="width=device-width; 
initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

This sets the width of the mobile browser to the width of the device's window. This also sets the scale to 1.0, and does not allow zooming in or out which feels more like a mobile app. The default width of the viewport, when not specified, is 960px. When designing for a mobile site, keep in mind the following mobile device resolution widths:

  • iPhone (portrait) - 320px
  • iPhone (landscape) - 480px
  • iPad (portrait) - 768px
  • iPad (landscape) - 1024px
  • Smaller smart phones - minimum 240px

The best way to implement a mobile design is to use a wrapper div with a flexible width that fills the page (width: 100%). Also avoid javascript as this is disabled, by default, on many smart phones, and unnecessary javascript can significantly increase load times.

Development Tools

There are a number of development tools that are available for testing a mobile site. An iPhone simulator is included as part of the iOS SDK. This is available on Mac only. Android offers a simulator as part of the Android SDK. This is available on Mac, Windows, and Linux. Blackberry has simulators for a number of their mobile devices on their developer site. These are available for Windows only.

Another very useful tool is the Firefox User Agent Switcher add-on. This allows you to switch user agents and an iPhone 3.0 user agent is included. Additional user agents can also be added. Switching user agents provides a way to view html source output as rendered on a smart phone.

Our approach to mobile sites has been to create a separate site, in a sense, that uses all the same data as the full site does so that there is no need to maintain two separate sets of data. In some cases it is not necessary to create a separate presentation of content. In complex sites, however, this approach can be necessary. Typically, we preface all mobile directed pages with "mobile" (mobile/news, mobile/about, etc. -- specifically, this is referring to a situation where arg(0) == 'mobile' and not just an alias that begins with 'mobile'). Using this protocol, the Mobile Tools module can be set to simply use "mobile" as a cue to switch themes. There are many other approaches that could be implemented, but this approach has served us well.

Please comment if you have a different approach to mobile sites in Drupal or if you have any questions. The beauty of web development is that there are many ways to accomplish the same goal.

Tags: Web Development, Drupal, Content Management System, Mobile Sites, Themes