How to design responsive web design?

How to design responsive web design?

Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).
Responsive Web Design is about using HTML and CSS to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:
The reason why responsive matters is not only to make webpage look good on all devices(mobile users increasing dramatically), but also make sure users will have comfortable visual experience when accessing your website with a not-full-width browser.

Responsive web design, originally defined by Ethan Marcotte in A List Apart, responds to the needs of the users and the devices they're using. The layout changes based on the size and capabilities of the device.

Responsiveness Webdesign is important, but not always a necessity. But most clients/users expect the sites to be responsive anyways, so following these few steps should help you.

Avoid using Margins. If you must use it, try to use it with “%” instead of pixels.
Use the bootstrap css framework which supports responsive webpages.
For images, use the class “img-responsive” to create responsive images. And avoid setting heights to the images unless really needed. (you can set the size for the div instead).
Get used to writing @media queries to create responsiveness on all devices.
Avoid using !important unless absolutely necessary.
Avoid using inline Styles. It is recommended to write all the separate styles in an external file.