Responsive design Responsive design

[subornaakter20]

If the layout is displayed incorrectly on a certain device, or “breaks” at a different resolution, the actual values ​​for this display are taken as the breaking points.

Media queries

The development of adaptive websites is based on the principle of defining style parameters using media queries.

Based on requests, conditions and types of devices (smartphones, monitors, televisions, projectors, etc.) are determined.

The corresponding request and response will be applied with the appropriate display settings for the device from the css stylesheet.


Read also!

"Mobile Site Optimization: Features, Methods, Possible Difficulties"
Read more
What is the difference between adaptive and responsive website design
Sometimes people confuse two types of website design: adaptive and responsive. They are indeed similar, but they are different technologies, and you need to know how to tell them apart.

Adaptive Design (AWD) — adaptive design (another name is dynamic display). The site is designed with conditions that change depending on the device on which it will be opened, using several fixed-width layouts as a base.

Adaptive Web Design is oriented towards device sizes (responsive does not). It uses a number of static layouts for different types of devices (desktops, smartphones, tablets), using control (breaking) points as a base. To load layouts, certain browser window sizes are needed on the gadget, transitions from layout to layout are not smooth, but jumpy.

Typically, 6 adaptive layout options are used depending on the screen width:

320;

480;

760;

960;

1200;

1600.

Functionality plays a major role in adaptive layouts. When creating a design, the features of the device are taken into account, for example, the touch screen in mobile phones or the large space available on desktop screens.

Responsive Design (RWD) is a responsive design. The site is designed with certain property values ​​(for example, a flexible grid), which allow one layout to work on different gadgets.

Responsive layouts are created using media queries and relative sizes of grid elements specified using %. In the case of adaptive design, server scripts first identify the type of device used to access the site (desktop, tablet, smartphone), then the most optimized version of the page for the device is loaded. Grid elements are given fixed px sizes.

So, the main difference between the technologies is:

One layout for all devices One layout for automotive mailing list each type of device
Only by understanding the advantages and disadvantages of each of these types of design can you understand which one is right for you. In addition, you should know which solutions will be optimal for different types of sites and devices.

For sites with a flexible ("rubber") structure, it is better to use responsive web design. Otherwise, you can spend a lot of time and resources on redesigning the page for a phone or tablet, compensating for the lack of flexibility.

This method is not without its drawbacks. Due to the fact that the images and other visual elements used in the design of the site have a high resolution, the loading speed is significantly reduced. This is probably the main disadvantage.

If you go with a responsive approach, your designers will always be handicapped by this limitation, as good visual components can take a very long time to load on mobile devices.