Best Practices to Make Your Site Responsive (RWD)

In a current era, Responsive Website Design must require to develop your site. If you are making a site which can be easily open at desktops, laptops, I pads, Mobiles and etc. In short, your site is clearly visible with all digital devices.

For achieving that purpose, you have to create your site responsive. Means, it covers all different dimensions of all different devices.

Best Practice to make Responsive Website Design (RWD):

• Give "width, padding-left, padding-right, margin-left, margin-right" in percentages (%).Because whenever you try to reduce or expand the width of screen, these Css properties are automatically updated.
• Don't give "width, padding-left, padding-right, margin-left, margin-right" in pixels because it contains static values. It may not get changed when you try to shrink or expand your page.
• Always check compatibility of your page in Mozilla Firefox, Google Chrome, Safari, Opera ,IE 9 as well as above versions.
•  Don't nest block level elements into inline elements Eg. <span><div></div></span>. It violates the standards of HTML.
• Use proper coding conventions and rules for HTML and Css to develop a page.
• Study Best Practices for HTML and Css before starting to make a page.
• Always make HTML first. After making HTML, write Css for making RWD.
• If you are using any framework like Bootstrap, always look after for coding standards of HTML and Css. Because in most of cases, Bootstrap violates coding standards.
• Whenever you are creating your site, give most of the values of Css properties in percentages (%).So that it will complete your 80% task for making RWD.
• For remaining 20% work, if your page is not fit for a particular dimension, use media query for that dimension only.
• Try to avoid device specific hacks as well as use of media queries.
• Give size of each elements (Without using hacks and media queries) in such a way that your page should visible in each dimensions.
• Use HTML and Css Validator Plug-in to validate your code.
•  Make minified version of Css before deploying your code on production. Use Css Compressor for making Css minified. 
•  Avoid/stop use of "important" in Css.   

It's not still finished. But you can get at least basic idea about how to implement Responsive Website Design (RWD).

Guys, Keep Exploring. If you have any query, please feel free to contact me.