The Untapped Potential of Responsive Web Design

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.

Television Interfaces

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.

YouTube Leanback

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.

Page Fold Zone

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.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

9 comments on “The Untapped Potential of Responsive Web Design

  1. Great post. I’ve been looking more and more into RWD lately after deciding it was better to hone my skills toward it rather than developing complete separate style sheets per device. Unless, of course, the client specifies otherwise, in which case – go nuts.

    My new website uses a modified version of the 1140 grid (cssgrid.net) which is fluid and scalable down to the iPhone, with a combination of html5boilerplate snippets. I’ve found it to be perfect.

    Providing a consistent viewing experience is even more mandatory in this day and age with such a plethora of devices connecting to the web every day. Good to see you’re raising more awareness of it!

    Cheers.

  2. Hey dude,
    ur post seems to be very useful……………..thnx 4 posting dis…………..keep it up………….
    n m w8ng 4 ur next post dude!!!!!!!!!!!!!

  3. I’m not sure I like the terminology used here. Responsive Web Design is not great I hope it doesn’t catch on because it really is not correct in its description.