Responsive web design (RWD)

What is responsive web design?

In very simple language the website which fit in any resolution with the help of CSS is know as responsive web design. Now a days mobile and tablet users are increasing day by day, So you need to create such a web site which fit in all media. You can create responsive web page with the help of HTML5 and CSS3. Before designing your web page keep it in your mind that each and every part of your web site need to be responsive / auto resizable as the browser width changes. Photo gallery, image stroller, top menu, footer links every thing should be resizable.

How to create responsive web design?

With the help of CSS3 media queries you can create responsive web designs. CSS3 media queries accept AND, NOT with features like width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution etc.
There are three way to implement media queries:
1. Using @import rule
2. Writing Media Queries Directly in a Style Sheet
3. Include a query in a linked style sheet's media attribute

Using @import rule

@import url(style600.css) screen and (min-width: 600px);

Writing Media Queries Directly in a Style Sheet

@media screen and (min-width: 600px){
  #section{
     width: 550px;
  }
}

Include a query in a linked style sheet's media attribute

<link rel="stylesheet" type="text/css" 
media="screen and (max-device-width: 600px)" href="style600.css" />

Viewport in meta tag

Another important option in Responsive Web design is defining Viewport in meta tag. Viewport meta tag is used to control layout on mobile browsers.

<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1">

Viewport Width

Many sites set their viewport to "width=320, initial-scale=1" to fit better in iPhone, or other device having viewport 320. Please note that the screen resolution is not always same as viewport. Click here to see screen resolution and viewport of different devices.

<meta name="viewport" content="width=320, initial-scale=1">

Viewport width and Screen width