Drupal 7 Responsive Modules & Themes

Drupal 7 Responsive Modules & Themes

Drupal Responsive Design has grown from a hot topic to enthusiastic engagement. Developers and designers alike are amped up for the impending release of Drupal 8's slew of mobile-ready and responsive features.

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 Adaptive Image 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 Breakpoints.

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. Retina Images 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 FitVids. YouTube, Vimeo, Blip.tv and Kickstarter videos, in addition to others, are scaled down using fluid-width video embeds. This module uses the Libraries API, 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 athttps://raw.github.com/davatron5000/FitVids.js/master/jquery.fitvids.js, 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 Tinynav 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 Mobile Theme or Switchtheme 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: 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: 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 Drupal Responsive Design 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.