How to make your design as "Responsive Design"

1. Adding Meta tags:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">


2.Internet Explorer 8 or older doesn't support media query. You can use media-queries.js or respond.js to add media query support in IE. 

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

3. Write compatible CSS code for the below ( may be in seperate file called media.css or responsive.css)

/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Your Styles */
}

/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
/* Your Styles */
}

/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Your Styles */
}

/* iPads (portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Your Styles */
}

/* Desktops and laptops */
@media only screen and (min-width : 1224px) {
/* Your Styles */
}

/* Large screens */
@media only screen and (min-width : 1824px) {
/* Your Styles */
}

Will update more soon.......