Plein Air Interactive

For awhile now all the cool kids on the Web have been chatting about Responsive Web Design as an efficient approach for designing website layouts across a myriad of device types.  In fact, about 10 million web pages mention it.

So why all the hubbub?  Responsive web design can make it easier for you to maintain the code base of your site for the multitude of devices - think mobile phones and tablets in particular - that are exploding onto the market these days. 

With a responsive approach, you maintain a single set of templates for your web pages, then use media queries, a flexible HTML grid and "flexible images" to adjust the template layout depending on the type of device requesting your page. 

The purpose of this article is not to dive into the technical details, but if you are interested in the nuts and bolts you can read the quintessential overview on the subject on A List Apart.  Web designer Ethan Marcotte literally wrote the book on responsive web design, and it's been promoted heavily by web design strategist Jeffrey Zeldman of Happy Cog (a responsive site, btw) and mobile user experience expert Luke Wrobewski.

Less is more?

Having one set of templates to manage sounds great.  It's easier, more efficient and updating a responsive design concept can be less time-consuming (and we all know time is money).

But before you go nuts converting to a "responsive" web site, there are other things you should consider:

You need a savvy team.  You might think you can simply ask your in-house team to tackle it.  Heck, that's why you hired them, right?  They should know how to code.

True, but RWD is more than just slapping a class reference on a <div> tag.  It's more of a design pattern, an approach.  It takes time to learn that approach and soak it up.  In my experience, it can be done, but it's a lot to ask.  Be sure you and your team think it through.

If you're hiring an outside firm for a redesign, though, definitely ask them about the it.  They should certainly be able to talk intelligently on the subject and hopefully provide you with a case study or two.

Your CMS needs to play nice.  Some content management systems, especially older ones, tangle your content up in the structural code used to display the layout.  It can be painfully time-consuming to try to unravel that code, especially if your site templates still use <table>-based layouts (and, yes, we still see them - *shudder* -  on some museum sites).

Short of a full-scale redesign, if you need to retain a CMS, it may be a whole lot easier to optimze for mobile using a "detect-and-direct" strategy (explained below) rather than responsive web design.

It can dictate design choices.  Though any great web designer will tell you that anything is possible when it comes to coding layouts, some layouts are just not going to be easy to maintain with a responsive design pattern.  You'll have to decide if the branding effect you're going for is worth rendering through either a complex RWD pattern or through detect-and-direct, or whether a different, simpler RWD layout will suffice.

When to get responsive

As I've alluded to above, it's best to consider responsive web design when:

1. You're planning a complete redesign of your site and an overhaul of your CMS
2. You have a team that's capable of maintaining the work (or you've hired an agency that's done it a few dozen times)
3. When your design, layout and branding needs won't be compromised by typical RWD patterns

For lots of museum sites, with a high page count, and exhibitions and collections to display, RWD might not be the best approach to revamping templates for ever more important mobile web.

One alternative: Detect-and-direct

Another design strategy to consider is something I call "detect-and-direct".  There are different ways to make this work, and it depends on your site.  A couple of approaches:

• Have the server detect the user agent and redirect to a mobile site, fed by a different set of templates.  Examples: Indianapolis Museum of Art, Peabody Essex Museum
• Have an application do the detection and apply a different template to the same URL.  Examples: Walker Art Center, Metropolitan Museum of Art, Cape Ann Museum (disclosure: designed by plein air interactive)

One thing is for sure: museums who don't already have mobile-friendly versions of their sites in place need to be thinking about making the conversion.  Given the right set of circumstances, Responsive Web Design can be a good solution, but as always, be aware of all the factors affecting your options.