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:
Presenting a single website in various forms depending on screen resolution is the prime definition of . 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. also allows for contextual layouts, user specified throughout a website.
• Mobile: Built to work with the majority of modules and configurations, 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, 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.
With a no-size-fits-all implementation, it's best to look around at various 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.
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 displays images appropriate to the device accessing them.
• FitVids: uses a JQuery plugin to display popular video players, including YouTube, Vimeo, Blip.tv and Kickstarter videos.
• Modernizer: integrates HTML5 and CSS3 using feature detection, without leaving older browsers behind.
• Responder: By altering Drupal core stylesheets, allows a responsive theme to be built with ease.
• Responsive Images: Similar to Adaptive Image, loads smaller images for smaller screens.
• TinySrc: The module downsizes images embedded in node content by directly communicating with the the tinySrc [ service.
• Semantic Views: simplifies and regulates the markup emitted by the Views module.
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 , 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.