Which Responsive Drupal 7 Theme Should I Use?

Finding a responsive theme for your next Drupal project isn't difficult, but selecting the right one for the job takes a bit more thought. Surprisingly, we found very little advice when doing so for our latest project, so we decided to do some research.

When we began, we knew that Omega and AdaptiveTheme are everyone's favorites. We also knew Zen 5 was recently released and had promised to be responsive.

We were afraid Omega and AdaptiveTheme were going to be overkill for us so we decided to do some of our own investigation. We did stumble across a few other themes worth considering, including Mothership, but none matched the popularity and support of Omega, AdaptiveTheme, and Zen.

Zen 5 was exactly what we needed. The others are definitely flexible, but the graphic configuration that Zen lacked was easily accomplished in code using the built in Zen Grids system and SASS/Compass support.

Did we spoil the article too soon? We don't think so. This decision really does depend on the specific needs of a project, so Zen might not be the answer for yours. We suggest you continue reading.

For ours, these criteria were important:

• Responsive functionality out of the box.
• Lean markup and code. No unnecessary HTML, CSS, JavaScript, or PHP.
• Panels support.
• Standards-based HTML5 with fallbacks for older browsers.
• IE-specific Support. This was crucial for this specific project.
• Strong community support, use, and stability.
• Performance. Has a small page loading size and time.
• Accessibility requirements are met.

Our findings are below.

Responsive functionality out of the box

It is no secret that Omega and AdaptiveTheme have endless amount of configuration options. Omega is extremely flexible, breaking layouts down into zones, regions, and sections. It also comes with fancy grid and block debugging tools. AdaptiveTheme, on the other hand, provides per-breakpoint layouts, allowing for specific sidebar configurations according to the device's size. The complete customization of media queries is no problem with either of these themes.

Zen had no graphical responsive configuration options, but by default had a flexible and responsive layout. We didn't need per-breakpoint layouts, but found them extremely easy once we discovered how SASS and Zen Grids were working behind the scenes. By manipulating the grid-related variables in responsive-sidebars.scss, we could accomplish just about anything that the others provided graphically.

Zen won this category for us. We don't mind using code instead of GUI configuration.

Lean markup and code

We value lean markup as much as the next guy and don't appreciate unnecessary code on every page load. To test this we compared the source of identical Drupal output across these themes and inspected the amount of resulting markup. We found that Zen had the smallest output, with AdaptiveTheme and Omega producing 17% and 31% more respectively. It was no surprise to us that Omega brought the most markup to the table with such a complex layout structure involved.

We also examined the size and cleanliness of the code itself. Zen was again the smallest (*after removing the images-source/ directory) and produced the cleanest results when ran through Coder.

Zen won this category as well.

Panels support

We had already planned to use Panels and needed to ensure the responsiveness of our theme wasn't lost when we did. Omega and AdaptiveTheme both came with responsive Panels layouts. Omega, however, does encourage the use of Context in combination with the Delta module. AdaptiveTheme's configuration options for per-panel/per-breakpoint layouts are endless. Zen, on the other hand, has nothing special built in. JohnAlbin (maintainer of Zen), claims “There’s nothing special about Zen + Panels. Zen is just like any other theme if you are using Panels. We use panels extensively with Zen and haven’t had any issues” in an issue queue.

AdaptiveTheme wins this one, as it does all the heavy lifting for you.

Standards-based HTML5

After examining code, documentation, issue queues, fallback options, and the W3 Validator, we found that all three themes followed sound best practices for HTML5.

When it came to fallback options, Zen by default uses html5shiv but makes it easy to swap for a custom build of Modernizr. Omega also uses html5shiv while AdaptiveTheme simply suggests using the Modernizr module.

Zen and AdaptiveTheme were comparable through W3's "experimental" validation, but Omega produced almost three times the errors.

Zen wins this category for us, with AdaptiveTheme close behind.

IE-specific Support

We were looking at IE8 users as a large portion of our demographic for this project. We needed to make sure it got the attention it needed, so we scanned documentation and the issue queues.

A majority of IE8-related issues were closed in all three, but AdaptiveTheme only had one open. Omega had poor responsive support (if you consider that important with IE8, see Respond.js) and Zen includes easy but optional (off by default) support for IE6 and IE7.

AdaptiveTheme escapes as the winner by a narrow margin.

Community support, use, stability

When we examine projects on Drupal, we consider a solid history of support, stability, and use of high importance. For this we look at commits, issue queues, usage statistics, and other key signs that a project is worth using. When doing so for these themes, we found:

It is hard to argue against the winner of this category: Zen.

Performance

We tested this by averaging hard refresh page load times among identical Drupal output across all three themes. We also looked at the size of each page load. We'll admit we could have been more scientific, but we found:

Yet again, Zen is our winner.

Accessibility

Finally, this project required baseline accessibility and we prefer to provide this with everything we do. We will, however, admit that we aren't experts, so we had to trust our findings in the documentation and issue queues.

All three have pledged to #D7AX. Additionally, Adaptive Theme claims “WCAG 2.0 level AA compliance” and has been proclaimed in the issue queues as “the most accessible theme and far ahead of others in accessibility”. Zen is also very strong with accessibility.

We'll give AdaptiveTheme the win on this one.

Drumroll, please

So that's it. If you haven't been counting along, the final tally is as follows:

If you find your team with similar needs to ours, we strongly recommend trying Zen 5. We won't deny that AdaptiveTheme and Omega have their strengths, such as being extremely flexible through graphic configuration options. We fully respect those themes, their contributors, and those that use them. We also, as stated above, don't believe that one theme is ever the solution for every problem.

All we are saying is this:

When your client agrees to responsive, think twice before instantly installing your favorite. Have you had similar or different experiences? Do you prefer any themes we have passed over? We would love to hear your thoughts!