Skip to main content

Blog Post

Going Mobile with Drupal

Fresh off the heels of DrupalCon Chicago 2011, the overriding buzz around the community is making Drupal mobile-compatible. After spending the last two weeks catching up from being out of the office for 4 days, I was finally able to sit down and put pen to paper (or finger to key) and start making sense of the fast-progressing mobile Drupal landscape. What does it take to “go mobile” with Drupal? The first question to ask before embarking on a mobile project is "who's our audience?" Will they primarily be using an iPhone, Blackberry, or Android? According to a recent comScore study, Android is quickly becoming the leader in market share. Most likely, the mobile site you’re building will need to target Android users first, followed by Blackberry, then iPhone. This is an oft overlooked aspect of organizations getting into mobile development for the first time. The more devices that are targeted, the more quality assurance testing needed. Beware, Blackberry boasts 40+ different device models. Many of those are equipped with their with web browsers unique to a particular model. Delivering a mobile-compatible Drupal site can be accomplished in two different ways. One method involves using Drupal as more of a backend datastore for a native app, with no need for site theming. The other method involves Drupal as more of a traditional web application with a lightweight mobile theme.

Let’s take a look at the tools and techniques that can be used to deliver content and functionality over a mobile device using Drupal as a datastore. The biggest advantage that native apps offer is the ability to use features that are inherent to the mobile OS the app is running on. Shaking an iPhone and telling a web app to respond to the shake isn't possible. By using Drupal as a datastore, mobile OS events can push data to a Drupal site and receive Drupal data from feeds exposed by the Services module. The native app can be configured to cache data locally so that when the device is out of range, the app still works just as effectively, albeit possibly with stale data. To buildout native apps without having to learn the programming languages the OS runs on, many mobile development frameworks exist. The concept behind most development frameworks is to build native apps in languages that developers are most familiar with - HTML5 and/or Javascript. Then, the framework compiles and ports the code to multiple mobile operating systems: Objective C compiled code for iOS (iPhone's operating system) and Java compiled code for Android and Blackberry OS. Several packages in the development framework market are gaining popularity: Titanium by Appcelerator (Javascript), PhoneGap (HTML / Javascript), RhoMobile (Ruby / HTML). For developers with Flash Actionscript experience, Adobe AIR now runs on Android. An Actionscript packager for iOS offers a way to deploy compiled Flash apps to the iPhone. Flash-based mobile apps can take advantage of the lightning fast AMFPHP data interface for talking to a Drupal site.

Alternatively, the distinct advantage of launching a Drupal mobile web app is reduced deployment time. Often, the web app already has a companion Drupal site that's been developed for traditional web browsers. The only thing missing is a mobile theme that's compatible with web browsers on target mobile devices. No need to worry about building a native app and picking an app store to offer it on. The web app is readily available by requesting a URL. Once the target mobile browsers have been determined, integrating mobile features into the site can be done with the following modules:

Browser detection 
  • WURFL - Detects mobile device capabilities.
  • Browscap - Detects browser type.
  • Mobile Plugin - Device detection and image scaling.
  • Mobile Tools - Browser detection, theme switching based on device type, redirection to mobile site, and other features.

The modules listed above can be configured to serve a Drupal site on a mobile web browser. Contributed themes can be installed quickly but will likely require additional effort to output menus, content and images correctly. If your project requires building a custom theme from scratch, Fusion Mobile or Garland would be good starting points. Any custom or contributed theme deployment will involve testing on the mobile browsers that the target devices ship with. In the case of Blackberry devices, it's best to narrow down which models will be supported because many of them ship with browsers unique to a specific model. The easiest way to test how HTML will render is to use a web-based device simulator. This list shows plenty to choose from.

Still, other options exist for quick mobile site deployment. The best I've seen to date is Mobify. I talked to a Mobify rep at the Acquia booth during DrupalCon Chicago and walked through a demo of their product. The Mobify Studio workflow is slick and intuitive, geared toward the average web developer. A user selects content areas from the web site that's being ported to mobile through a wizard-type interface. Mobify then outputs HTML and CSS that can be edited on-screen, offering custom template creation.

I've detailed both the native app and web app approach to using Drupal for mobile. Here's a recap of the pros and cons:

Native Mobile AppMobile Web App
Take advantage of mobile OS features such touch screen slide and device tilt eventsOnly available at app marketplacesReduced development complexityFeatures are limited to what traditional web browsers offer
App still functions when device is offlineMore effort needed to deploy to multiple devicesMajority of deployment involves configuring a mobile theme and a few key modulesNot accessible if the device is offline or out of wireless range
Better performance - syncing Drupal data with app doesn't have to be done real-timeMobile development platforms often don't deliver 100% of advanced features without having to modify native code (Objective C, Java, etc.)Working knowledge of Drupal/HTML/CSS onlyWeb browsers differ considerably across devices, requiring signficant browser testing

While mobile web apps can only take advantage of browser-specific events and features, a few app development frameworks aim to make web apps function more like native apps. Blackberry's WebWorks platform offers developers a way to tap into more advanced mobile browser features specific to the Blackberry OS. Sencha Touch is the first-of-its-kind HTML5 framework that claims to make mobile web apps function more like native apps.

Mobile deployment tools and platforms are evolving at breakneck speed. One logical evolution in the expansion of the Drupal mobile market that should start gaining momentum is the module/native app dual release. Drupad is an iPhone app that offers user and content management features for any Drupal site. Site management takes place through the native app while the companion Drupad module assits with connecting the app to its Drupal site. Expect to see more dual or companion releases like Drupad in 2011.

Clearly, the buzz around Drupal and mobile will only get bigger as smartphones become more intelligent and increase in sales. I imagine a day in the not-to-distant future where developers will be building apps on mobile IDE’s. Often I find myself solving development problems when I’m away from my laptop, thinking about how to solve an issue. How convenient would it be to make code edits to a module file and commit from your phone?

More mobile Drupal resources


Additional Resources:

An Inside Look at the Omega Theme | Mediacurrent Blog Post

Responsive Design + Drupal | Mediacurrent Blog Post






Meet team member, Paul Chason

Paul Chason is the Managing Partner at Mediacurrent, managing the company’s operations and playing roles in sales, infrastructure, technology and marketing. Paul is a rarity in the web industry. With...

Learn more about Paul >
Access icon Up arrow icon Drupal 8 icon Facebook icon - white Facebook icon - blue outline Facebook icon - yellow Hollow right arrow icon Hollow right arrow icon - white LinkedIn icon - white LinkedIn icon - hollow LinkedIn icon - blue outline LinkedIn icon - yellow Mediacurrent wordmark Quote icon Twitter icon - white Twitter icon - hollow Twitter icon - blue outline Twitter icon - yellow Youtube icon - white Youtube icon - yellow