A kind of web designing practise which provides optimal viewing experience to websites, including minimum navigation, easy reading, scrolling and editing. The web design in this case responds to the kind of device it is being used in such as whether in a mobile phone, a personal computer or a tablet. The platform, the screen resolution and size, orientation and similar factors determine how the design will present itself. This kind of web design makes use of flexible layouts and grids, CSS media and images smartly to create certain smoothness in functioning.

The need for responsive we design becomes stronger in an age where the use of the internet is no longer limited to the personal computer or the laptop. Mobile phones and tablets are vastly being used by people to look up things on the internet or simply to stay connected while on the go. The sheer variety of mobile phones, tablets, computers, laptops, notepads makes it essential for the development of responsive web design – it is simple impossible to create a separate website for different viewing experiences.

In the year 2004, Cameron Adams was the first person to demonstrate an example of website layout that changes itself to browser viewport. Terms such as ‘flexible’, ‘fluid’, ‘liquid’ and the like were being used in reference to web designs such as these around the years 2008 and 2009. The term ‘responsive web design’ was used by Ethan Marcotte and it came to mean fluid grids, media queries and flexible images.

Some essential features of responsive web design are:

• Screen orientations and definitions keep changing and evolving each years as hundreds of new models of phones and tablets are launched. Flexibility has become the call of the day when it comes to web design. Images, grids and mark ups are all fluid. An image for a responsive web design is divided into two parts – one is used as the background and the other is the detail on the foreground which is to be cropped according to size.
• In cases where the size is drastically different, the entire layout may have to be changed. This has to be done either through a CSS media query or through a separate style sheet. Major style sheets can remain similar and only a few specific ones can incorporate change along with flexible height, width and the like. In cases where the style sheet has created a too narrow layout, this can be detected and thus the site can switch to a new style sheet.
• The CSS3 has all the previous features that were present with the CSS 2.1 along with a few more such as maximum width, colour, orientation, device width and more. These features are all supported by devices which released after the launch of CSS3. It allows creating multiple style sheets and basic alterations to layout according the range of width. The minimu width feature sets a minimum screen or browser width which can be applicable to a certain set of styles. Anything which crosses the maximum screen or browser width will not be applicable to the respective media query. The best way to use media queries is to put all of them in a single CSS style sheet, while the rest of the styles remain for the websites. This does away with the need of creating multiple style sheets for multiple requests. Devices which don’t support CSS3 use JavaScript.

Responsive web design also allows users to choose content. Designs also differ from devices which use touchscreen as compared to those with cursors. However, responsive web design by nature needs to go through constant evaluation with the emergence of different designs and models of phones, tablets, laptops and computers.