allenc

Realizing the Limitations of Responsive Design

Responsive design! The One True Way(™), born from the humble media query, to restore principles of DRY for web development while allowing for optimized experiences on today’s myriad of devices. And it cures baldness.

But for better or worse, it’s become a oft-cited, oft-deployed strategy to deal with screen size fragmentation. As with all rules (and particularly “rules” with regards to web development), it has lost some of its luster, and the state of web development in 2012 should trigger a revisit of the assumptions that have made responsive design so popular in the first place.

Media queries work because the web – and in particular, the philosophies that govern CSS layout – encourage content (text and images) to flow and fill their containing boxes. Further, if a webpage is laid out in columns, those columns can be stacked one above the other to fit a constrained width. With just one page and a set of queries activated at preset sizes, websites can be targeted and made to fit a large variety of screens.

But the inherent limitations are many:

Responsive design has always been a compromise, but an increasingly unsatisfying one that limits differences to what CSS can affect. It’s appropriate for static layouts with made up mainly of text and images pages: blogs, splash pages, about sections, and news articles[4]. For web apps and pages with more content, client-side state, and navigational elements, it’s an effort to squeeze essentially two sites conditionally into one.

Plus, if you’re going through the effort of responding to different screen sizes, it’s one small step away from the ultimate responsive design.

That old gem.

The variable width layout.

Footnotes    (↑ returns to text)
  1. Though to be fair, media queries are smart enough not to download unnecessary images, but they don’t do much to unnecessary scripts or content.
  2. Of course, make sure you have the audience to even merit the additional design time needed for a mobile site.
  3. Not to mention, just because there are 2600×1440 pixels available, it does not mean that users will use their browsers full screen.
  4. The Boston Globe was one of the first and few major sites that embraced responsive design.