We love to share as much as we like to find answers to some of the interesting problems that we work on.

We have on our side a team of Industry Veterans, Domain Experts, Proficient Business Consultants and Competent Technologists, who have fascinating minds and captivating ideas.

We share what we think and what we feel...

Welcome to the Fulcrum Worldwide blog! See what's happening in the world of IT/Fulcrum, right now!

Back

Best Practices to Make Your Website Responsive (RWD) (Website Design, Website Development)

In today’s competitive landscape, Responsive Website Design (RWD) is a must to develop your site, if you want a site which can be easily accessed through desktops, laptops, iPads, mobiles and etc. In short, your site has to be device responsive.

For achieving this goal, you have to create your site in a responsive format. Means, it should cover all different dimensions for all the different devices.

Best practices to make the 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 the 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; example. <span><div></div></span>. It violates the HTML standards.
  • Use proper coding conventions and rules for HTML and CSS to develop a page.

Best practices for HTML and CSS before we create a webpage:

  • Always create HTML first. After creating HTML, write CSS for RWD.
  • If you are using any framework like Bootstrap, always look after for coding standards of HTML and CSS because in most of 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 doesn’t fit for a particular dimension, use a media query for that dimension only.
  • Try to avoid device specific hacks as well as the 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 dimension.
  • Use HTML and CSS Validator plug-in to validate your code.
  • Make a minified version of CSS before deploying your code in production. Use CSS compressor for making CSS minified.
  • Avoid/stop use of "important" in CSS.


These pointers will give you a head start in terms of what are the important aspects of an ideal Responsive Website Design (RWD).

Comments