Mobile-First Design Strategy
In the current era, Responsive Website Design is essential to develop a site if you are making a site that can easily open on desktops, laptops, iPads, Mobiles, etc. In short, your site is clearly visible on all digital devices.
To achieve that purpose, you have to create your site responsive. This 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 the compatibility of your page in Mozilla Firefox, Google Chrome, Safari, Opera, IE 9 as well as the 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 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 the remaining 20% of 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 the use of media queries.
- Give the size of each element (without using hacks and media queries) in such a way that your page should be visible in each dimension.
- Use HTML and CSS Validator Plug-in to validate your code.
- Make a minified version of CSS before deploying your code on production. Use CSS Compressor for making CSS minified.
- Avoid/stop the 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 queries, please feel free to contact me.