Responsive design - what it is and how to use it?

Feb. 1, 2019, 11:20 a.m.

1 Answer


Feb. 24, 2019, 7:50 p.m.

Responsive web design is a fairly new direction in the design of web resources, but now it is one of the main indicators of the quality of the site. In this article, we will talk about what is responsive web design and how it happens. This means that the same site can be viewed on a variety of devices, regardless of the resolution and screen format - smartphones, tablets, laptops, etc. At the same time, browsing will be equally convenient for all formats - mobile device users, for example, will not have to expand certain areas of the site in order not to miss the necessary link. It is designed to make web pages and display their content relevant to the device from which they are viewed.

Developing a responsive website design comes down to combining several techniques, the most popular of which are:

 

  • CSS3 Media Queries
  • Flexible content scaling
  • Javascript
  • CSS3 Media Queries

 

These are conditional instructions in the CSS3 code that allow you to detect the resolution of the device on which we work. As a result, we are able to apply a block of CSS instructions, which will be displayed, for example, only in telephone or tablet resolutions.

This is another old technology like the one that has found new uses. It involves the use of flexible, or relative, units when designing our websites. In short, units such as pixels are absolute units because they define the size of an element on the screen rigidly. However, the use of dimensions in percent will allow you to dynamically adjust our content to the width and height of the browser window or container.

In some cases, we can also use JavaScript to detect client parameters. CSS3 Media Queries gives us many possibilities, besides testing the width and height, we can check, for example, the number of colors or resolution. However, with the help of JavaScript we also have access to news about the agent, for example, we can check which browser the user uses and whether it supports the Media Queries themselves.