Responsive Web Design

New clients today all seem to have an interest in expanding their brand to as many platforms as possible; so it comes at no surprise when a new client request say, a mobile version of their website. It’s practically essential after all: one design for the Android, another for the iPad, a notebook version and a regular desktop browser version. But here's the catch - the resolutions must all be compatible. (Hair pulling moment anyone?)

In the field of Web design and development, we’re quickly getting to the point in which we are unable to keep up with the endless new resolutions and devices on multiple platforms. For many websites, creating a website version for each resolution and for new devices is impractical and time consuming. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there an alternative - responsive web design.

Responsive web design, is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. In theory this is easy but in actuality this practice may pose greater challenges. The practice of responsive web consists of a mix of flexible grids and layouts (think fluid layouts), images and an intelligent use of CSS media queries.

As the user switches from their desktop to an iPad for example, the website, in practice, should automatically switch to accommodate for the difference in resolution. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

A recent article from A List Apart defines responsive design as:
"... an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them." -  Responsive web design is how your content responds to the devices people are using to “pass” through it.

The general idea of the definition above sums up how a website or application should behave if it is indeed "Responsive" - that is, to respond and alter it's behaviour based on the people that are interacting with it.

Responsiveness, suggests and relies upon a site responding to changes as they happen. Many designers and developers alike have also coined the phrase "Adaptive" to mean letting a website adapt to metered changes once they’ve happened. The idea is to eliminate the use of fluid grids and have the web architecture adjust when it happens. For example if someone were to browse using a ‘non-conventional’ resolution, the designer does not have to go out of his way to support that resolution. Instead he or she may choose a sensible preset or resolutions and have the web architecture fall within one of those given ranges.

The misconception regarding responsive web design involves creating a layout for every possible resolution, which is not the case. If you were to create a website at 960px width, you’re not assuming that everyone who has their window set at 950px wide simply can’t view the site; the same premise applies here. Responsiveness in layout can be fluid, but there are no specification that says it needs to be.


Live Examples: