Responsive Web Design (or RWD for short) is the application of CSS3 media queries to make the same HTML work for a wide variety of screen resolutions.
In many cases (not all) this is a great way to mobilize content, because it’s far more effective than compartmentalizing the problem and making device-specific experiences. With an ever broadening spectrum of screen resolutions, treating the web medium like a static magazine spread is no longer sustainable. It never was.
I’ve been using responsive web design for several months now, and I’m beginning to realize that to dismiss it as a novel tool for creating mobile websites would be severely shortsighted. That’s pretty vague by itself, so I’ll give you two specific examples to illustrate what I’m getting at.
Unless you’re a top television executive, you’ve probably noticed the video revolution happening all around us. Between YouTube, Netflix, Hulu, and so many others, a huge wealth of video content is available for online consumption.
I don’t have cable television, and while I have tried a few specialized set top boxes, I think it’s hard to beat the versatility and simplicity of hooking up a regular computer to an HDTV.
Once you’ve done that, you can watch whatever online video you want from the comfort of your couch. Perhaps I’m in a minority, but I would really appreciate more television-optimized interfaces from major video providers. There are a few novelties like http://youtube.com/leanback (as pictured below), but often times they’re not integrated into the core functionality of the site. The goal should be to create a seamless experience across web enabled devices.
Put another way, RWD isn’t just a useful tool for mobilizing content. It goes the other way too, and can be useful for creating experiences that are optimized for large displays.
Above the Fold
Whether or not you believe web pages have a “page fold” is a debate that I’m not going to delve into here. For the sake of example, let’s just say that there is indeed a page fold.
The idea is that you want to put the most important stuff above the fold, and the less important stuff below the fold. However, if you’re using a small netbook, the fold is going to be much further up the page than if you’re using a big monitor.
In fact, it’s probably better to think of it as a “Page Fold Zone” rather than a straight line across the page.
RWD has traditionally been a technique for responding to the variable width of a page, but what about the height? If the page fold is higher up than you’re expecting it to be, important text and images might get cut off, and that means there are design decisions to make. If you can’t fit as much stuff on the screen, what page elements are still essential?
These are just ideas, but ultimately my point is this: There’s a lot of untapped potential here, and I think we’ve only seen the tip of the iceberg.