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 assumes the same content across all devices. Sometimes this is true, but many sites offer reduced or just differentfunctionality for mobile versus the desktop. Having all the content and then selectively displaying some is possible, but somewhat undesirable – mobile devices are restricted in bandwidth and processing power, so loading a full (if hidden) desktop site is going to be unnecessarily expensive{{1}}.The counterargument would be that a mobile design comes first and drives everything else. At best, this is a good start; desktop users do have legitimate use cases that are clunky or unusable on mobile devices. At worst, it artificially limits the technologies and features that a modern site can deploy.
- Responsive design does not account for non-CSS-based differences. CSS media queries deal in just one currency. CSS alone, however, is increasingly not enough to implement a complex design. One option is to have Javascript query the window size and branch on its own execution, but it quickly becomes an exercise in diminishing returns with additional complexity and reduced code (both HTML/CSS and Javascript) reuse.
- Maintaining responsively designed sites is still costly. One of the big draws of RD is that you get to cut down on the amount of code written across multiple versions of the site{{2}}: the site starts with a base CSS set, and some subset of the rules get overwritten for specific screen sizes. When building from scratch this is a workable strategy; it quickly becomes a ball of yarn to untangle come layout updates or new screen resolutions. In the worse cases, the amount of CSS cascade and override starts to resemble an overengineered, overgeneralized framework blob.
- Phones are getting bigger, and smartphones have come with the user interface to view a desktop site since 2007. Tablets don’t need specialized layouts as much as tweaked interfaces to deal with touch versus keyboard + mouse. On the personal computing side, laptop screens have remained at 13″-15″ and the market for high-resolution 27″ and 30″ computer monitors at best niche{{3}}.
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.
[[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.[[1]]
[[2]]Of course, make sure you have the audience to even merit the additional design time needed for a mobile site.[[2]]
[[3]]Not to mention, just because there are 2600×1440 pixels available, it does not mean that users will use their browsers full screen.[[3]]
[[4]]The Boston Globe was one of the first and few major sites that embraced responsive design.[[4]]
