Target readers: Website Designers and Developers, Programmers
Keywords: CSS, HTML, Frameworks

Introduction

It is the web development approach, which emphasizes on user experience practices to make reading easier with minimum scrolling, clicks and resizing required. It is responding to the size of the browser window or the device, maintaining a single code.

Why do we need RWD?

Web development has been in market since internet is. But why suddenly a new concept, which led to redesigning of thousands of existing web sites, was introduced and welcomed by all designers. Emerge of RWD is basically an outcome of astonishing progress of smart phones and tablets in market. Each month there is an increasing amount of people who switch to using mobile and tablets instead of desktops, for surfing.

To make the same website look good across all devices, there can be two approaches
1. Maintaining different code base for these devices. But here, you will have to develop different code base, which leads to high development and maintenance cost.
2. Use responsive web designing approach. You design for three device sizes but develop a single code base in HTML that makes the same website look good on large desktop monitors and small smart phones and anywhere in between.

How to create RWD?

It is the same HTML used for all devices, using CSS (which determines the layout of webpage) to change the appearance of the page. It relies on proportion-based grids to rearrange content and design elements. For example, media queries are used to make certain css styles apply only for devices with screen width as small as mobiles:

@media only screen and (max-width:500px){
#wrapper #nav{ margin: 0 0 0 -160px;
}

Popular responsive css frameworks in market

There are certain css frameworks available that make responsive development easier. The most popular are:
1. Bootstrap.
2. Foundation.
3. Gumby.
4. Skeleton.

Richa Deshwal
Deloitte. |Bengaluru Area
Email: deshwalricha8@gmail.com