“You must be shapeless or formless, like water. When you pour water into a cup, it becomes the cup. When you pour water in a bottle, it becomes the bottle. When you pour water in a teapot, it becomes the teapot. Water can drip and it can crash. Become like water my friend.”

The aforementioned life quotes of Bruce Lee have been the motto of Responsive Web Design (RWD). It helps in optimal viewing and interacting experience while developing websites. It takes care of easy reading and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices ranging from desktop computers to mobile phones.

A site designed with RWD principles properly adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries (an extension of the @media rule) in the following ways:

• The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
• Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
• Media queries allow the page to use different CSS style rules based on the characteristics of the device on which the site is being displayed, most commonly the width of the browser.

Many publishers have started implementing responsive designs. However, banner advertisements and videos that are not fluid continue to throw up challenges. Search advertising and Display advertising support specific device platforms targeting advertisement size formats for desktop, smartphone, and basic mobile devices. Different landing page URLs can be used for different platforms, or Ajax can be used to display different advertisement variants on a page. CSS tables permit hybrid fixed+fluid layouts.

When a website must support basic mobile devices that lack JavaScript, browser (“user agent”) detection (also called “browser sniffing”) and mobile device detection are two ways of deducing if certain HTML and CSS features are supported (as a basis for progressive enhancement). However, these methods are not completely reliable unless used in conjunction with a device capabilities database.

For mobile phones and PCs, JavaScript frameworks like Modernizr, jQuery, and jQuery Mobile that can directly test browser support for HTML/CSS features (or identify the device or user agent) are more popular. Polyfills can be used to add support for features—e.g. to support media queries (required for RWD), and enhance HTML5 support, on Internet Explorer. Here, feature detection cannot be completely reliable; some may report that a feature is available when it is either missing or poorly implemented or is effectively non-functional.

There are many ways of validating and testing RWD designs, ranging from mobile site validators and mobile emulators to simultaneous testing tools. The Firefox browser and the Chrome console offer responsive design viewport resizing tools, as do third parties. Mashable called 2013 the Year of Responsive Web Design. Many other sources have recommended responsive design as a cost-effective alternative to mobile applications.

So, in general, we can say that Responsive web design is a revolutionising concept in viewing your websites in the most aesthetic way possible with minimum resource consumption.