Responsive Design is a User Interface (UI) design term that originated for website design. In fact, in most cases it is still referred to as Responsive Web Design. Here is Wikipedia’s definition (paraphrased for brevity):

Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.

In the current environment, especially with the advent of web apps, as opposed to web pages, and more so, with the blurring of the lines between web apps and mobile apps, Responsive Design is extending beyond the web.

In the good old days, we had pretty much standard user interfaces – a fixed resolution screen, which displayed graphics in a fixed space. (In the really good old days, we had green characters on a screen with fixed number of characters per line!). With the advent of Windows based OSes came the first instance of the need for UI design. As people discovered window resizing, UI designers began taking that into consideration. In my opinion, that was when responsive design was born, but all it involved was adding appropriate scroll bars to the windows, as and when needed. In today’s world, we have mobile and tablet devices with all possible resolutions, form factors and the ability to change the devices orientation, mid-use. Users no longer accept apps that don’t adjust themselves to their devices current form factor and orientation.

The second big factor driving the need for responsive design is the fact that not everyone upgrades to the latest devices and versions of browsers/apps. This requires designers to design apps (mobile or web or even web pages) to handle older devices and browsers. This aspect of Responsive Design is referred to as Progressive Enhancement. Again from Wikipedia:

Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or better bandwidth.

Progressive design actually predates Responsive Web Design as it originated in pre-smart phone days when every phone had different browsers, most of which did not do media or JavaScript. Even today, if one is building a web app for worldwide consumption, most of the rest of the world is stuck in BlackBerry or even Symbian land.

One of the web apps and associated mobile apps that are (in my humble but most accurate opinion) an excellent example of responsive web design done right is Twitter. Go to Twitter on a desktop browser, a mobile web browser on an iPhone, iPad or via their mobile app, change device or orientation, whatever you do, the user experience and the data available on the screen remains just as accessible and dynamic. Twitter has built and published an entire JavaScript framework based on this design called Twitter Bootstrap. I discussed this framework in my earlier post on JavaScript – How JavaScript has become the language of choice for mobile and web.

I will give examples, with screenshots highlighting Responsive Design in a later post. Do you have any good (or bad) examples of responsive design? Leave a comment below…