Drupal Themes Get Responsive

Over the past six months, responsive web design has gone from being a hot trend to an emerging standard. Not to be left behind, Drupal theme developers have begun to produce some excellent responsive themes. Here's what you need to know.

Responsive Design In A Nutshell

If you're still trying to figure out what all the fuss is about with responsive design, I'll try to briefly explain. In May of 2010, Ethan Marcotte wrote what has since become the manifesto for responsive design. He laid out the problem brilliantly - how do designers create websites that work well across the exploding number of devices people use to access the Internet?

I'll let you read his article for the nitty-grittty as he explains it far better than I can, but it boils down to using three basic techniques to allow websites to adapt to different viewport widths: a fluid grid, flexible images and media queries.

This magic formula can allow the same content to be delivered to different devices and then displayed in a way that maximizes the experience for that device. It's a neat way to address the needs of mobile users without the extra overhead of a separate mobile site.

If you're still not entirely sure what I'm talking about, read on...

Omega Theme

The 300 pound gorilla of Drupal responsive theme design is Omega by Jake Strawn. Omega is a base theme that provides an excellent foundation for building responsive websites. If you take it one step further and add the Delta and Context modules, the result is a powerful and very easy to use template system. Below is a screenshot of an Omega child theme (unstyled) with the block and grid overlay tools enabled. 

Omega, Delta and Context together are an amazing combination for building websites. Don't believe me? Well, then take Acquia's word for it. Their new theme is built on Omega and an ever-growing number of websites are following suit. 

Adaptive Theme

Of course, Omega isn't the only game in town if you're looking for a responsive base theme. Jeff Burnz has developed Adaptive Theme which is an excellent choice and very well supported. Burnz is a prominent Drupal developer whose day job involves selling premium themes. Like Omega, Adaptive has a ton of settings that offer tremendous flexibility as you can see below:

Adaptive Theme also offers additional layout options like Omega, but instead of the Delta and Context modules, Adaptive prefers the Gpanels module. Now there certainly isn't anything wrong with this approach, but Gpanels require that you embed little snippets of code in your template files. Not a big deal for many website builders, but I'm a sucker for elegant and easy solutions and that's why I give Omega the edge. That said, Adaptive is a great theme and to have two very strong choices for a base theme is a big win for Drupal site builders.

Premium Themes

I can't really do this topic justice without giving mention to some of the nice premium responsive themes out there. Respondr is a nice place to begin and is fairly representative of what's available in this category. Designed by the folks over at SooperThemes, it provides a nice out-of-the-box solution that is perfect for those on a budget. Below is a screenshot of the theme at full width on a desktop browser. Note the image rotator.

And here the site is on mobile. Again, note the image rotator.

So, I like Respondr, but I do have one small criticism. You'll notice that the layout has changed responsively and it looks pretty good, but do we really want image rotators on sites that have a significant number of mobile users? In my opinion, it doesn't jive well with a corollary of responsive design, which is mobile first. We have to ask ourselves how useful a feature like that is to our users and what its inclusion does to load time and user experience on mobile devices.

In all fairness to the guys at SooperThemes, they are making a commercial theme that has to fit a lot of different situations and image rotators are the cool thing these days, so it's tough to leave one out. And it may very well be that your site has a compelling business case for using rotators or some other fancy little widget. 

But my point here is that if you're serious about responsive design, consider a "mobile first" approach and make those features really fight for inclusion in your theme. Your mobile users will thank you.

Moving Right Along...

OK, I'll climb down off my soapbox long enough to point you to a few other sources of responsive Drupal themes. The team at Symphony Themes have a very nice selection and ThemeSnap has come up with the GoMobile theme which I've had the opportunity to take for a test drive. It's pretty sweet and I can vouch for their customer support as well.

If you have some favorites of your own, please share them below. And don't be shy about pimping your own work in the comments! I haven't intentionally left anyone out and would love for others to share what I may have missed.

Oh, and I've written another post that people seem to like on Omega theme if you're interested in learning more.