Main Content
Drupal As A Framework For Mobile Development
As more and more companies build out their websites and web applications for mobile, it pays to look at Drupal as the basis for mobile deployments. Drupal as a CMS seems ready-made for responsive and mobile-first websites.
There are three classifications for mobile development and as Drupal converges with the mobile world, we’ll look at design and development with Drupal using all three.
- mDot or Mobile browser based sites
- Native or installable mobile applications
- Hybrid or apps that use both browser interfaces and native mobile components
Drupal Mobile Development Using mDOT
When designing and developing with mDot you must have a content strategy in mind prior to beginning. You need this because content defines the site design. Also, know the most important content elements AND know and define your user. This allows you to personalize the experience using better filters.
Once your content strategy is defined, you can develop with Responsive Web Design (RWD). Responsive such that content delivery reacts to the user’s place and device. In responsive, the site must be built with flexible, not fixed layout foundations. Under responsive web design:
- Example being: Use em, Percentages and Float
- Images must be flexible--set maximum width property of CSS to 100%
- Choose either media queries or mobile detection
Sample media queries include:
- <link media=”screen and (max-device-width:480px)”>
- <link media=”screen and (max-device-width:1024px)”>
- <link media=”screen and (orientation: portrait)”>
- <link media=”screen and (orientation: landscape)”>
- <link media=”screen and (-webkit-min-device-pixel-ratio:2)”>
When designing and developing using mDOT, you’ll always design for mobile first, rather than the desktop. The reasons for this might seem straightforward but they bear repeating. It forces you to simplify your design, it forces you to focus on what is important and it forces you to think like your user.
The way mDOT and Drupal work is basically a 3 prong process: First, the application detects whether it is accessing a mobile device; next it redirects or provides the correct media queries; and lastly it switches themes if needed.
mDOT Development Resources
Here’s where you can grab the Drupal modules you might need: http://drupal.org/project/Mobile_tools
Here are some useful 3rd party detection tools:
- Wurfl
- browsecap
Here are some recommended startup themes:
- Fusion_mobile
- Nokia_mobile
Drupal and The Native App
Drupal can be the framework for your native app too. iOS or Android, you choose (or go crazy and tackle both). Use the Services module to move your data via XML to your mobile app written in Objective C or Java, etc.
Drupal and The Hybrid Approach
Many app developers are building their mobile apps using the hybrid approach which combines elements of the above two classifications. From a high level perspective, data moves via JSON format from your Drupal site to your mobile device. Again, you’ll use the Services module.
When designing and developing using the hybrid approach, you can choose among many cross-platform tools which include:
- Phonegap + (jquery or Sencha Touch)
- Titanium/Appcelerator
- Rhomobile
- Monodroid
- MoSync
- WidgetPad
Some things you should know about Drupal integration using Services module. There are 3 components of this module:
- server modules - receive and render request
- auth modules - authentication
- services modules - process and return data
Lastly, from our experience here are some key takeaways to develop and deploy a successful hybrid mobile app:
- Don’t simply release a hybrid version of a mobile site but make the experience feel like a native app
- Remember to optimize the performance of your Drupal site
Learn about how Promet helped this client with custom designed mobile application for their taxi fleet: 
