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.
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…