The first decision that many web designers and developers came up with was to create just a separate “light” version of the site for mobile devices. So did many major portals.
However, in recent years, the number of different types and subspecies of devices from which users access the network has grown at an incredible pace. And also keep in mind that owners of tablets or smartphones are also viewing the full version of the site. Therefore, in the end, web designers and developers came up with the idea of ”adaptive” design.
Until now, one may encounter several versions of how various IT specialists understand the “responsive design”. Let’s try to figure out what are the options for developing a website design.
“Static” is a site that consists of immutable HTML pages. Such a site implies the presence of a fixed theme with a fixed width and most often contains one or literally several pages.
To display such a site in the center of the screen, 1000 px is enough. Content will always be aligned exactly in the center.
It is also worth considering that only a person with good web development experience can update a static site. There is no admin panel in it, so all changes must be done through the source code.
The Benefits Of Static Design
- Saving time and effort during development
- Requires less hosting load
- The output of pictures, video materials, banners can be carried out without fear that they will overlap each other or shift at different monitor resolutions
- Disadvantages of static design
On a mobile device, the site will be displayed with a horizontal scroll bar;
Large-format monitors display a static design rather poorly the option is not for those who want to show off.
“Responsive design is one of the most relevant trends in website development, which has come seriously and for a long time” almost any website dedicated to web development and web design is now full of such headers.
Finding out what it is is not difficult. However, there are some subtleties that relate to the understanding and perception of such a design. Let’s look at them.
The main feature of this design is that the width of the columns is set in percent, not in pixels. Therefore, the “rubber” design at any resolution of the monitor is stretched to the entire width of the screen.
To make such a design, especially when using block layout, is somewhat more complicated than fixed, but the user will not see empty fields on the page. It is noteworthy that the rubber design was initially quite widely used in Runet, while in the West, developers for a very long time remained committed to static design.
However, the simple rubber design has certain limitations and disadvantages. Given the wide range of screen sizes that modern devices have, it’s difficult to implement a rubber design so that at any resolution everything looks equally good, so that the design doesn’t “roll around”, so that pictures and videos do not crawl out of the boundaries of blocks, etc. for this reason other solutions were required to create a truly universal site.
To make the site look equally good both on a mobile phone and on a large monitor, the developers of some sites took the path of developing several essentially independent design options for different devices.
When a user visited the site, the server determined the type of device and screen resolution and “gave” this or that version of the site. Moreover, each version was optimized in advance for different resolutions.
For versions for low-resolution screens, thumbnails were used, and some elements were removed altogether. The layout of the blocks itself was also different from the “big” version.
Responsive design is justified when creating large-scale projects: information portals, online stores, forums, corporate sites and other similar resources. It looks especially impressive on monitors with a diagonal of at least 15.6 ”.
The last method that web designers came to was the responsive design, which was contrasted with the usual adaptive design, although until now these terms are often confused and used in a similar sense.
“Responsive” design combines the features of adaptive and “rubber” designs. It automatically adjusts to any screen width, like rubber. At the same time, in the process of adjustment, the arrangement of blocks and the size of pictures may change.
Some elements may also appear, disappear or change. For example, the usual horizontal menu can change to a dropdown.
An even more important point is the places from which people will come to your site. Therefore, it is very important to take into account any Internet speed, because a huge number of people live in remote areas, where the Internet speed is not even 1 mb / s.
There is a study according to which 57% of users will leave your site if it loads for more than a few seconds. Not so long ago, Google began to consider speed when ranking sites. It does not have a big impact on the position of sites with an average loading speed, but if the page does not load for a certain time, then the search algorithm applies penalties to such a site.
All this makes us take a closer look at the speed of the Internet and provide the user with the opportunity to download content quickly enough at the lowest speeds. That is, a “responsive” design is not only a story about screen sizes, but various scenarios, the solutions for which should be flexible and thought out “from and to”.