Responsive design architecture as the name suggests is an interactive design principle achieved by being sensible to the environment and responding accordingly to give the user/ customer with an optimum experience. Responsive design is adopted across multiple fields like Architecture, Art, and Electronics.  For example we have Smart Air Conditions adjusting the temperature of the room depending on the number of occupants in the room and living spaces which can reform themselves to enhance the experience of the occupants. Adopting the same methodology to web Ethan Marcotte has coined Responsive Web Design.

What is Responsive Web Design (RWD)

With an exponential increase in usage of mobile devices to surf web sites the existing web sites are expected to scale to mobile & tablet browsers. In order to make a the web site accessible  in multiple mediums the designers of the web site come up with different  version of the same site to support mobile . This would lead to creating multiple disconnected designs to support multiple devices for the same web site. RWD tries to avoid creating various versions of the same web site by presenting the content in most accessible manner for any viewport that access it. In short a design that can adapt to the constraints of the browser window or device that renders it, creating a design that almost responds to the user’s need.

When should we adopt RWD

RWD is one of the simplest and quickest ways to make a website work on a lot of devices. RWD should be adapted when the web site content remains the same be it any device and the only variation is the way it is being displayed. For example the small screens put elements of less importance beneath the main content or as a worst-case scenario, hide them altogether. Maybe alter navigation buttons to accommodate finger presses, rather than only offering a usable experience to those able to proffer a precise mouse click. Typography should also be scaled for the sake of readability, allowing text to be read without swipes from side to side.

There are scenarios where RWD is not the right solution if the mobile site totally serves a different purpose than the existing web site and it needs a different content, design, and interaction based upon the device, location, connection speed and other variables like the technical capabilities of the device.

How to become Responsive

In order to make a site responsive the following are the key aspects to be considered during web site design in brief.

1. A flexible, grid-based layout.

To achieve flexible grid layout all the pixel based layouts are to be replaced with the percentage based ones. The margins, paddings and fonts are also to be percentage based.

2.  Flexible images and media

Images need to scale according to the size of the viewport .This can be achieved either through scaling the size of the image or cropping the image as the functionality demands.

3.  Media queries (CSS3 specification )

With CSS3 media queries different styles for different viewports can be conditionally loaded and hence creating an optimized look for that particular view port.

Will come up with a working example in my next post regarding how to make a site responsive using the aspects mentioned above.

Popular Sites which adapted RWD

RWD has been adopted by many sites since its inception. Some of the popular ones which adopted this design principle are Disney, Microsoft, StarBucks. Sample link