New Work, New Engine

September 14, 2011 • 9:00 am • POSTED BY Mark Llobrera

We’ve added a ton of new work to our main site recently, but one thing that might not be immediately evident is that the site is running on a new content management system (CMS) built with Drupal 7. For years we’d been limping along with a custom-built CMS, but after we built a few Drupal sites we decided it was time to bring that knowledge home.

A Few Goals of the Project:

One CMS for Multiple Sites

Earlier this year we attended An Event Apart Boston, and knew that we needed a radical re-think on our approach to our web work. So when we started mapping out the new CMS we decided that we would not only support our existing Flash site, but build out a mobile site that would allow us to experiment with the latest responsive web design techniques. The end result is a CMS that generates XML feeds for the Flash-capable experience, but detects iOS/Android mobile users and gives them an HTML experience that’s been designed for smaller screens.

Don’t Wait to Get Started: Release, Then Iterate From There

We knew that a fully mobile-first, responsive re-design of the site would take more time than we had, so we decided to do what we could and iterate from there. So: the mobile experience uses Drupal’s Mobile Tools module to funnel mobile users to one of two themes, one for phone-sized devices and one for tablets. We went with separate themes to sidestep the issue of delivering unnecessarily-large images to the smallest screens. We view this as an interim step to something better. The recent responsive redesign of Palantir.net shows that a fully-responsive design can be done in Drupal, so that’s the next step.

A Few Things We Learned:

Drupal 7: A Newscaster Who Sometimes Doesn’t Wear Pants Behind the Desk

Drupal as a CMS consists of core modules, and third-party contributed modules. So while the core modules were ready for primetime and a big improvement over Drupal 6, there were a bunch of third-party modules that were…a little rough around the edges. Metadata for our images was particularly hard to implement, because we were using the Media module that was still in a state of furious development. We also decided not to manage video assets via Drupal, because the support for embedding video directly wasn’t quite there yet. Instead we’re hosting our videos on YouTube, because their entire business is based on making sure video is delivered in the correct format for the user—mobile or otherwise.

We also couldn’t find a good module to translate content to XML feeds for the Flash site, so we wrote custom views to do that instead. Which brings us to the next key learning:

Bring Your Machete

Drupal is remarkably flexible. Part of the price you pay for that flexibility is that the HTML markup it generates is extremely DIV-happy. A single content field could be wrapped in a thicket of DIVs. Towards the end of our project most of our work involved pruning the markup so that we could get it close to what we had in our HTML mockups.

Move in Circles, or: Fingers are Fat

The development cycle for the mobile site was a departure from the conventional design -> build -> ship model of web design. Instead we designed and built the mobile site, then started to test it over the course of several days, using a wide array of devices. You can use mobile device emulators (like the iPhone/iPad Simulator that ships with XCode), but there’s no substitute for testing with a real device. We ended up tweaking a few things with our design (especially for the phone layouts) to accommodate the lower precision of fingers/thumbs. We then implemented those design changes and tested again. The end result was a more organic, iterative process that we’re testing out on projects moving forward.

There is no Finally…

The great thing about releasing something is that it gives you a good marker from which to evaluate things before plunging back in. The mobile version for our site will continue to evolve as we get better at shaping Drupal’s output. It’ll also get better as we slowly integrate the new things we’ve learned in the meantime with respect to adaptive/responsive web design. In the meantime we hope that we’ve improved the experience for our users.

If you’re interested in the latest in adaptive/responsive web design, we highly recommend Responsive Web Design by Ethan Marcotte, and Adaptive Web Design by Aaron Gustafson.