Profile picture for user admin
Daniel Sipos
02 May 2013

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.

Profile picture for user admin

Daniel Sipos

CEO @ Web Omelette

Danny founded WEBOMELETTE in 2012 as a passion project, mostly writing about Drupal problems he faced day to day, as well as about new technologies and things that he thought other developers would find useful. Now he now manages a team of developers and designers, delivering quality products that make businesses successful.

Contact us

Comments

aaron 02 May 2013 17:59

How well do modules like

How well do modules like Picture and Retina Images work together?

Rob Decker 06 May 2013 01:04

You should check out Theme

You should check out Theme Utils since it not only shows the browser viewport, but also shows the active media queries in use. (Shameless plug: I am the module author)

Daniel Sipos 06 May 2013 10:40

In reply to by Rob Decker (not verified)

Hey there, looks good.

Hey there, looks good. Showing the viewport size is actually something that WindowSize actually does itself :)

Julie 07 May 2013 22:53

some more drupal responsive design tools

Here you can find some more responsive design tools http://wearepropeople.com/blog/best-responsive-web-design-tools

BBC 09 May 2013 17:11

Superfish

Thanks for the article. FYI, the superfish module got a recent overhaul and now includes functionality similar to what you've described in TinyNav, allowing for menus to switch to select list.

Kalpit 04 Jun 2013 19:00

Off Topic

First of all, thank you for sharing these modules. They seem helpful.

Secondly, did you design the homepage yourself? I found it really good.

Daniel Sipos 07 Jun 2013 00:59

In reply to by Kalpit (not verified)

Hey there, sorry for the late

Hey there, sorry for the late reply.

Actually, it is a theme from ThemeBrain.

Best,

D

Aabharan 02 Jan 2015 08:49

Super duper helpful post for any website developer

This 7 module change my life ! After reading your modules, I have no words to express my feeling. Thanks a lot for helpful post!

Add new comment