Drupal 7 Mobile Development

Drupal 7 Mobile Development

Delivering content across a wide range of devices is no easy task. As a highly talented platform for mobile development, Drupal alleviates this difficulty. Ensuring content displays as best as possible requires different approaches. Here are the most reliable approaches to date, along with best practices for building mobile web sites:

Responsive Design

Presenting a single website in various forms depending on screen resolution is the prime definition of drupal responsive web design. This definition is applicable to the site itself, and the presentation layer (i.e. theme). Responsive design can have its issues; for example, it works best on optimal connections with high bandwidth and low latency.

The Drupal library boasts some great base themes to get you started:

• Omega: A highly configurable, user-friendly HTML5/960 grid-based theme. Omega also allows for contextual layouts, user specified throughout a website.

• Mobile: Built to work with the majority of modules and configurations, Mobile is flexible and fairly basic. As mentioned in prior articles, Modernizr is recommended to ensure a solid experience for browsers less supportive of HTML5.

• Zen: Another popular theme for responsive design, Zen is also a great HTML5 [7.x-5.x and later only] starter theme. Now available in "two flavors", Zen has a ton of support behind it and has quickly become synonymous with responsive design success.

• Terrain: Based on the 960 Grid System, Terrain uses a fluid-grid based approach. Features of the theme include client-side image scaling and pure css implementation; no JavaScript is required.

With a no-size-fits-all implementation, it's best to look around at various responsive modules & themes prior to application.

Building a Dedicated Mobile Site

If an existing website is in need of mobile, it might be beneficial to launch a sub-site for mobile users (eg: m.webcommune.com). How the visitor arrives at this location may be achieved in several ways. Add a domain-specific theme on top of your mobile section, or create a separate Drupal website. The second option would progressively follow the main site and aggregate content. Building on the jQuery Mobile project, this method adapts your Drupal homepage and admin pages to work well on mobile devices. This method allows for the administration of content, comments, blocks, and more, all on the device.

Site owners may also use the Mobile Tools module, which detects a mobile or desktop device. This module progressively adapts by redirecting users to a mobile site, switching themes, displaying mobile options and setting contexts for layouts to adapt to the device.

Piecemeal Development

Extracting only important information from your main site to create an m.example.com mobile site might leave some visitors in the cold. Unfortunately, this approach results in a single display for mobile, which will not be catered to any device in particular.

Here is a list of modules that aid in building mobile Drupal web sites with more flexibility and less exclusion:

• Adaptive Image: The Adaptive Image displays images appropriate to the device accessing them.

• FitVids: FitVids uses a JQuery plugin to display popular video players, including YouTube, Vimeo, Blip.tv and Kickstarter videos.

• Modernizer: Modernizer integrates HTML5 and CSS3 using feature detection, without leaving older browsers behind.

• Responder: By altering Drupal core stylesheets, Responder allows a responsive theme to be built with ease.

• Responsive Images: Similar to Adaptive Image, Responsive Images loads smaller images for smaller screens.

• TinySrc: The TinySrc module downsizes images embedded in node content by directly communicating with the the tinySrc [http://tinysrc.net/] service.

• Semantic Views: Semantic Views simplifies and regulates the markup emitted by the Views module.

Creating a device-specific native application is also possible with Drupal Mobile Development. Drupal is well suited as a backend for native applications. The Drupal community offers great tools for building native applications, including popular platforms like the iOS ToolKit and DrupalCloud for Android. Web apps also cater to mobile devices - essentially as HTML5 and JavaScript-based apps running on mobile browsers.

Another methodology is RESS, which stands for Responsive Design & Server-side Components. RESS is a hybrid approach that uses Responsive Design techniques combined with device detection to alter markup before being sent to the user.

Drupal Mobile Development Outlook

As discussed last week by Dries Buytaert at DrupalCon, Drupal 8 will excel in terms of mobile delivery. Many top mobile solutions for Drupal are in the process of being integrated into core. For more information, check out WSCCI (Web Services & Core Context Initiative) and Mobile Initiative. By default, markup in Drupal 8 will be based on HTML5.

Until Drupal 8 is released, the above methodologies remain great substitutes for displaying content across a wide range of devices. Continued areas of concern may be including web services for native app integration and HTML5 elements. Front-end performance improvements are also in order. Stay tuned as the community continues to contribute key elements to ensure Drupal remains the most progressive framework for mobile development.