Responsive Web Design, a collection of techniques articulated by Ethan Marcotte in 2010, is a way of developing web sites in the age of diverse devices. It uses widely adopted HTML and CSS syntax to present an optimized experience across a wide range of screen sizes and form factors. If we were flappers we'd call it the bees knees. Need an example?
- Check out the Boston Globe website.
- Grab the corner of your browser.
- Resize the screen
- Marvel at how the visual elements adapt to continually present a clear and concise representation.
As a recent Studiopress article points out, responsive web design is not magic fairy dust. But it is the best approach right now for providing a great experience on a multitude of devices. The most challenging bit would be to shift from pixel perfect layouts drawn up in Photoshop. Instead, we'd have to identify a "network of content" that could be remixed in the best way possible given the users' constraints. John Allsopp, writing on A List Apart, refers to this as "the tension between an existing medium, the printed page, and its child, the web".
Still, we were rarin' to go. At Placewise there was interest in how we might be able to incorporate its benefits into our own work. After I gave a brief presentation demonstrating the fundamentals the technical teams were on-board.
"Our sites look good on everything from mobile to desktop from the same codebase? What's not to love?"
Oh, the adorable, clueless optimism of the geek caste. I should have known better. If we were flappers, this would be the point where we laughed at the idea that markets could go down or that bennies are bad. Reality came calling, however, and it came quite literally. In a conference call we were informed:
"The problem is that we currently charge additional money for mobile site development. It's a nice upsell when doing a deal. If we make designs that work on mobile as well as they do on the desktop by default a chunk of business goes away."
Uh-oh. The obvious response: let's just charge more for our base design to account for the additional up-front design work that needs to be done (and because the end product is ultimately better). Unfortunately, that causes a new problem:
"We have a number of clients that don't have budget for that. We have gotten them into our system with an eye toward future sales. However, right now they're extremely price sensitive and any jump in their billing for services they deem unnecessary means we would loose them."
We're committed to progressive enhancement - that genie is out of the bottle. Our future designs will maximize the display potential of our content across whatever medium it appears on. But the business model muck up still looms.
One thought is to just "remove" the portion of the stylesheet responsible for handling the site on smartphone-sized browsers. This, however, seems arbitrary. Its like composing an excellent piece of jazz and then only letting those that pay extra hear the sax. The work is engineered to be consumed as a whole, not as a shmorgishborg of individually selectable pieces.
Another idea is to accept that separate mobile and desktop sites (and thus separate line items on an invoice) for the same client are going away. This however, means a transition for the sales and marketing teams - but, to what?
So what to do?