In current era, Responsive Website Design is essential to develop a site if you are making a site which can easily open on desktops, laptops, iPads, Mobiles, etc. In short, your site is clearly visible on all digital devices.
For achieving that purpose, you have to create your site responsive. Means, it covers all the different dimensions of all different devices.
Best Practices 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. For example, <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 the 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 element (without using hacks and media queries) in such a way that your page should be 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 finished yet, but you can get at least a basic idea about how to implement Responsive Website Design (RWD).
I have attached one page (HTML File) with its CSS file. It produces Responsive Website Design (RWD). I have given most of the dimensions of elements in percentages (%). Even I haven't used any device specific hacks or media queries.
Keep Exploring!
If you have any query, please feel free to contact me.