Drupal Responsive Design has grown from a hot topic to enthusiastic engagement. Developers and designers alike are amped up for the impending release of .
The mobile frontier Drupal 8 promises remains months away. Even today, a great mix of contributed modules and themes exist to mold your website into a responsive entity. For the less tech savvy, many of these drop-ins are incredibly valuable. Let's explore a few of the great responsive design modules and themes for Drupal 7.
Adaptive Image: The module provides images appropriate for the device accessing them. This module is user-friendly; simply add the adaptive effect to an image style, specify breakpoints, and you're good to go!
Picture: With the Picture module, alternate image sources are delivered depending on device capabilities. The result is conserved bandwidth and an optimal display for both screen and print. One dependency to use the Picture module includes .
Retina Images: Apple users are quite familiar with the term. Retina displays boast a 'pixel density undetectable to the human eye' at a normal viewing distance. achieves this effect by adding an option to all image effects included with core to output high-resolution images.
FitVids: Support for a range of video providers is made possible with . YouTube, Vimeo, Blip.tv and Kickstarter videos, in addition to others, are scaled down using fluid-width video embeds. This module uses the , in conjunction with a jQuery plugin. Configuration with jQuery selectors usually includes defaults, assuming application to all videos is in a div with class="region". It's worth noting that not all players will work with FitVids. The plugin can be downloaded at , and placed in the/sites/all/libraries/fitvids folder.
Tinynav: Using the tinynav.js jQuery library, this module converts "ul" & "ol" elements to select dropdowns for small screens. While the module isn't one-of-a-kind, it is a Drupal favorite. Module defaults also work with Omega sub-themes out-of-the-box, though Omega isn't necessarily required.
Specific Mobile Themes: Enabling the or module will add the option to choose a specific mobile theme or text display for users on mobile devices [compare the latter to the Reader for iPhone]. Website administrators can truly eliminate a lot of footwork by toggling ready-made themes from a simple dropdown.
Here's a list of some of a few popular Drupal 7 themes engineered for mobile visitors:
• Fusion Mobile: enables control over theme setting and block layout/contents specifically for mobile. Enabling responsive layouts for various devices like desktop browsers, tablets (portrait or landscape) and smartphones may be achieved with the help of the Fusion Accelerator.
• Mobile: is a multi-purpose, mobile-only HTML5 theme that is "clean, lightweight, and simple". Styling isn't overly complex, built to work with most modules and configurations. Packaged in the theme are three variations in Mobile, Mobile Light, and Mobile Dark; all with gentle differences in hue. Modernizr is recommended to ensure a solid experience for browsers less supportive of HTML5.
The aforementioned themes and modules represent perfectly acceptable alternatives to creating a layout from scratch. In addition, the methods used for responsive design are a perfect stop-gap measure between now and the release of a mobile-friendly Drupal 8.
Thankfully, the community has endowned Drupal 7 with some fantastic contributions, keeping pace with the rapid proliferation of mobile devices.