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.
And here the site is on mobile.
Sparta
I've recently thrown my hat into the ring and begun producing premium themes. I use Omega as the base theme and actually provide a highly configured website that aims to make things easy for beginners. Another key with all of my themes is the training library that walks you through customizing and managing your site as well as unlimited email support.
If you're interested in learning more, check out all of my premium Drupal themes and see if there's one that might be right for your next site.
A Final Word
Responsive design clearly isn't a passing fad, and it's especially important for smaller organizations that can't afford to support a separate mobile site. Responsive sites do require more effort to build and configure, but it's a small price to pay for the proven increases in visitor engagement.
