A Drupal Developers Guide to Responsive Web Design

Apr. 30 2014

The Achieve Internet Standard for RWD

I have written about the business benefits of adopting Responsive Web Design a number of times before from the basics of the concept, the SEO benefits to the cost benefits. Recently, I was tasked with putting together a comprehensive document that details how Achieve approaches Responsive Web Design projects – for internal purposes, but once I was done I thought this would be helpful for the community. In this document I cover one of the various ways our team at Achieve architects, sets up, builds and themes Responsive Drupal Development projects. Before I dive into it I will offer up a quick summary for the busy, or lazy folks…


You can get a pretty nice brochure site up and running by just using the Sky theme, an extension of the Adaptive Theme. Instructions are readily available (http://johnflower.org/blog/responsive-web-design-drupal) and they are easy to follow. However, when the client has specific needs, this one-fits-all solution comes short. Our strongest recommendation is using a custom theme, with custom breakpoints (defined by the breakpoints theme or not) that can handle all the image and object embeds with the appropriate modules listed below.

The Guide to RWD

  1. Detection
  2. Images and Video Embeds
  3. Breakpoints
  4. Layout
  5. Recommended Modules

1. Detection

Feature detection is currently considered best practice and the most Future Friendly. A great aide in this detection task is the Modernizr module (https://drupal.org/project/modernizr). Any Drupal module can then implement the functions provided by the module to test for specific features as required by the design at hand.

See more about alternative detection approaches here: http://www.html5rocks.com/en/tutorials/detection/

2. Images and Video Embeds

Currently the best approach for Responsive Drupal Development is the picture module. It provides the HTML5 compliant <picture> tag and a script to make it work for older browsers that haven’t adopted the draft.

In a nutshell, the <picture> tag provides a list of alternate versions (custom sizes and weight) of the same image to be rendered with the different breakpoints, which the browser will select using media queries and request only the right one for the current viewport. This gives the site admins and owners total control over how images scale from a desktop all the way down to a mobile phone. If the editorial overhead is not desired Drupal can be configured to render the alternate images automatically. Views Slideshow and FlexSlider both provide support for the picture tag.

If you only care about the Retina displays, say because you have a different theme for mobile (https://drupal.org/project/mobile_theme) or mobile is handled by another module, you should take a look at the Retina Images module (https://drupal.org/project/retina_images).

An alternative module is Responsive Images and Styles (https://drupal.org/project/resp_img). It integrates with a bunch of other commonly used modules such as Colorbox, field_slideshow, expire, context and media, and it will be part of D8 Core, but breaks on Drupal 7.20+.

Another solid contender is Client Side Adaptive Image. Unfortunately, this module has less integration points with other popular Drupal modules, but is one of the easiest to setup if the client does not want or need to upload custom images per breakpoint.

For video embeds, the one go to module is FitVids (https://drupal.org/project/fitvids) that will expand the video embed object to fill up the container div. You can configure the class of the container too.

If you use Video Embed Field, Picture and Breakpoints you want to use the Video Embed Field Picture module (https://drupal.org/project/vef_picture) for consistency, this will provide a scalable image for the video’s thumbnail.

3. Breakpoints

The Breakpoints module (https://drupal.org/project/breakpoints) is a very user-friendly management tool for responsive web design. Breakpoints are defined by a theme.

A theme can define breakpoints in the theme.info file like:

breakpoints[mobile] = (min-width: 0px)

breakpoints[narrow] = (min-width: 560px)

breakpoints[wide] = (min-width: 851px)

breakpoints[tv] = only screen and (min-width: 3456px)

Once this module or the theme is enabled, the settings are read from the info file and stored into the database.

4. Layout

Open Atrium Responsive Regions (https://drupal.org/project/oa_responsive_regions) let's you configure Panels regions as responsive regions that act as sliders (top, bottom, right and left) for small (mobile) viewports.

Omega offers two very cool versions. Omega 3 combined with Omega Tools and Delta (which piggybacks on Context) allows you to have a very flexible way to change theme settings (there is a bit of learning curve with this method). Omega 4 introduces a much cleaner CSS that has been somewhat future proofed. Omega 4 introduces the concept of layouts as a middle layer between the page and blocks. Additionally, you can use the Panels and Panels Everywhere modules to gain even more control over the layout.

Menu layouts can easily be controlled on the CSS, but there are modules that help such as Responsive Menus (https://drupal.org/project/responsive_menus). As a rule of thumb, it’s generally best to have custom CSS handle the change of layout for the menu. Contributed modules are only recommended if the smaller view ports require complex animations which shouldn’t be the case since smaller viewports imply smaller and less capable devices anyways.

The last notable mentions regarding layouts is the use of page and block titles. Using the FitText module (https://drupal.org/project/fit_text) you can specify which CSS selectors to target and a small script will increase the font size until it fills up the whole container- this is useful for hero boxes and callouts.

5. Recommended Modules

  1. https://drupal.org/project/modernizr
  2. https://drupal.org/project/picture
  3. https://drupal.org/project/retina_images
  4. https://drupal.org/project/flexslider
  5. http://drupal.org/project/resp_img
  6. http://drupal.org/project/cs_adaptive_image
  7. https://drupal.org/project/fitvids
  8. https://drupal.org/project/vef_picture
  9. https://drupal.org/project/breakpoints
  10. https://drupal.org/project/context_breakpoint
  11. https://drupal.org/project/oa_responsive_regions


I hope this helps everyone, both technical and non-technical, better understand Responsive Web Design. If you are looking for more information or have questions feel free to send us an email at info [at] achieveinternet.com and we will be happy to assist with your needs.



RSS Feed Tags: