Acquia adopts the Omega theme for its web site reboot

In early 2011, Kevin O’Leary, one of Acquia’s UX Jedi, launched an effort to redesign the visual branding of Acquia. By May, the design work was far enough along to allow us to start developing a Drupal theme for a complete reboot of acquia.com. Michael Cooper lead the effort with his team including Mariano Asselborn, Yoni Gray, Rob Loach and Charlie Gordon.  I joined their team for one three-week sprint in order to help them establish the framework of the base theme.

This article presents a high-level discussion. For a more technical discussion of our experience building a responsive site on the Omega theme, check out this post.

Selecting Acquia.com’s base theme

In February 2011, Jake Strawn presented his work on the Omega theme at the Western Mass Drupal Camp. I attended the talk and was blown away by the sophistication of this theme. It was unlike anything I’d seen in Drupal before. Two months later when we at Acquia initiated an effort to reboot the acquia.com web site, I knew had to build it on Omega for these reasons:

1. Responsive design is the emerging standard for flexible, future-proof web development.
2. The Omega theme embodies the principles of responsive design.
3. Along with the Delta module, theming a site is made configurable so that content creators have control over layout changes - no further development needed.

Ultimately, we decided to build the acquia.com base theme (and its subsequent sub themes) on Omega.

Lessons from building a responsive design theme

Responsive design starts not from the standard dimensions of design for desktop computer (i.e. 1013px max with a fold around 600px), but from the content - the raw, unstyled HTML document. Starting from the raw, unstyled HTML document requires both designer and developer to consider how a page looks through a spectrum of device viewport sizes: from tiny mobile devices to larger format screens. 

For a designer, this might mean that he needs to create at least 4 versions of the same page at different widths. For a developer, this might mean she needs to style the same page across 4 stylesheets, each subsequent stylehseet building on and overriding styles from the previously loaded sheets.

What we discovered during the acquia.com reboot project is that this added flexibility translates into increased design and development time. One could estimate the increase around 3x of the normal development time for a project. The benefit of taking this extra time is a robust and flexible theme that will remain relevant for a long time as new devices come to market.

The initial release of acquia.com uses the Omega theme to deliver a desktop-optimized experience. The pressure on design resources, the extra time required to develop a responsive theme, and the lack of familiarity with the techniques of this new approach caused us to delay the implementation of a fully responsive design until Phase 2. Even with the trade-offs we accepted to meet time to market, we have the following benefits at the end of Phase 1 because we leveraged the Omega theme:

1. We were able to easily configure the theme to just render desktop-optimized layouts, essentially hiding the mobile-optimized media query matching.
2. The responsive design capabilities of the theme are still present. We can now very easily build out a mobile-optimized component of the theme and push it to production without rearchitecting the theme.
3. Omega’s integration with the Delta module means that if we need a mobile-optimized page or set of pages, we can create a Context and Delta combination for specific URL paths that enables small screen matching matching media queries across constrained portions of the website.

We took the following lessons away from the acquia.com reboot project and our experience working with the Omega theme.

1. Responsive design is the ideal state of front end development. Given the resources and the talent, all work should be going in this direction.
2. The Omega theme is the current state-of-the-art for responsive design on Drupal; it’s a model for other CMS’s as well.
3. Developing a responsive theme requires more resources - time and skill.
4. A development team should either be trained in the techniques of responsive development or committed to establishing them in their practice.
5. Designers must be involved in establishing the look and feel of pages for all viewport size buckets that the code will target with the @media queries.

We at Acquia are taking what we learned in this project and applying the lessons to the work in our pipeline. We’ve always had passion for incredibly web experiences. Now that we have powerful tools like the Omega theme to let us build even better ones.

Many thanks!

All of the credit for the coding and implementation of the amazing Omega theme goes to Jake Strawn and Sebastian Siemssen (fubhy). These guys were phenomenal. In the three weeks I was working on the theme, they put out five major releases including the first alpha release. Often times I’d report an issue to Sebastian and it would be resolved and pushed to the repo in under 10 minutes..and this at 7pm EST and Sebastian over in Vienna, Austria!

The lion's share of the Acquia theming work belongs to Michael Cooper's team. It's one thing to put together abstract stylesheets, but the details, those persnickety, endless details are what front end design is all about. The Acquia Network team performed the magic of updating reams of legacy pages to a drastically new theme. I hope I get to work with them again soon!

I am thrilled that I had the opportunity to work with Jake and Sebastian putting the new acquia.com theme together. It showed me that Drupal not only remains relevant in the current world of web development; it also continues to establish the definition of best practice in emerging front end development techniques.