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.
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:
- Mobile - Clean theme that can be used as a custom theme base.
- Mobile jQuery Theme - Utilizes jQuery Mobile framework for theming.
- Nokia Mobile Theme - Contrary to its name, this theme is intended to work on all mobile devices. Its design is based on the official Nokia template.
- mobile_garland - A mobile version of the Garland theme.
- Adaptivetheme Mobile - A mobile subtheme for the HTML5 AdaptiveTheme.
- Fusion Mobile - A Fusion Core subtheme targeted for mobile.
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 mobiforge.com 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 App||Mobile Web App|
|Take advantage of mobile OS features such touch screen slide and device tilt events||Only available at app marketplaces||Reduced development complexity||Features are limited to what traditional web browsers offer|
|App still functions when device is offline||More effort needed to deploy to multiple devices||Majority of deployment involves configuring a mobile theme and a few key modules||Not 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-time||Mobile 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 only||Web 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
An Inside Look at the Omega Theme | Mediacurrent Blog Post
Responsive Design + Drupal | Mediacurrent Blog Post