In this article, I want to show you 7 modules that can play a role in making your Drupal 7 website responsive, or at least more mobile friendly. With more and more people using handheld devices that vary considerably in size, it is important to pay attention to their needs.

Let’s be honest, Drupal 7 core is not really addressing this issue on its own. No worries though, the good people from the community came up with responsive base themes like Omega or AdaptiveTheme which are just awesome. Moreover, there are quite a few ready-made themes out there that can make your website’s frontend responsive. Also, the upcoming Drupal 8 is announcing itself as mobile friendly. It will be fully responsive - both on the frontend and in the admin - which is really cool.

But in this article, I want to show you a few cool contrib modules for Drupal 7 that can help your website become responsive - or at least not hated by mobile users. So let’s get to it.

Adaptive Image

I believe this is the most famous of the bunch I wanna talk about today. Adaptive Image is a very useful module that handles images by serving device appropriate versions from your site’s image fields. It’s also very easy to configure, all you need to do is add the adaptive effect to an image style and specify some breakpoints. Do check it out in case you haven’t used it yet.

Picture

Picture is a backport of the Drupal 8 Picture module. It uses the proposed (but not implemented) HTML5 picture element and delivers alternate image sources depending on the device capabilities. This will prevent devices operating on bandwidth-challenged networks from downloading large images. Ivan Zugec of WebWash has a nice tutorial on using this module.

Retina Images

It’s the last image related module, I promise. I’m sure you’ve already heard of this whole Retina thing in one context or another. Well, it’s about high pixel density displays that basically render your images crappier than normal displays if the image resolution is not high enough (don't worry though, it's a good thing).

Retina Images solves this problem for Drupal by adding an option to the image effects that come with Drupal core to make them output high resolution images that look good on these Retina displays. Cool!

FitVids

FitVids is a cool module that handles videos for your fluid layout so you don't have to worry about that. You know, when you embed YouTube or Vimeo videos they come with a specific size. Well this takes care of that and makes them resize automatically based on the container they are in. And for this it uses the FitVids.js library.

Tinynav

This one is about navigation. Tinynav implements the tinynav.js jQuery library to transform your menu into a select dropdown on small devices. I’m sure you’ve seen it on websites. You resize the browser and the main menu turns into an HTML select list with options that link to the menu pages. Pretty cool so do check it out.

Mobile Theme

Mobile Theme is an interesting module that allows you to select a different theme to be served on mobile devices. There are a couple of themes made specifically for mobile phones that you can use for this purpose. And I know, this is not precisely responsive, but I decided to add it because of its mobile friendly character.

WindowSize

WindowSize is a module I once wrote about and that is still in the development version. However, it is quite handy for Drupal 7 responsive themers and works as designed. It basically adds a small window on the top left corner of your screen where it dynamically shows you the screen width and height. Pretty handy!

Conclusion

So there you have it. 7 cool modules that you can try and use when developing responsive themes or websites. If you know of others don’t hesitate to drop some comments. I will update the post to include them.